settings UI: security key accessibility fixes

This makes the following improvements to the security key settings UI subpage:
1) Label the "PIN" text field in the "Manage sign-in data" and "Enroll
  fingerprints" dialogs.
2) Add IronA11yAnnouncer support to settings-security-keys-pin-field
  PIN validation errors.
3) Disable credential management confirm buttons in between asynchronous
  operations.

Bug: 955859
Change-Id: Ie05a237fe24d43a71bc24a89eb9a03d168b349cc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1808298
Commit-Queue: Martin Kreichgauer <martinkr@google.com>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697272}

chrome/browser/resources/settings/privacy_page/security_keys_bio_enroll_dialog.html

@@ -51,7 +51,8 @@
 
           <div id="pinPrompt">
             <p>$i18n{securityKeysBioEnrollmentPinPrompt}</p>
-            <settings-security-keys-pin-field id="pin">
+            <settings-security-keys-pin-field
+                id="pin" label="$i18n{securityKeysPIN}">
             </settings-security-keys-pin-field>
           </div>
 

chrome/browser/resources/settings/privacy_page/security_keys_credential_management_dialog.html

@@ -69,7 +69,8 @@
 
           <div id="pinPrompt">
             <p>$i18nRaw{securityKeysCredentialManagementPinPrompt}</p>
-            <settings-security-keys-pin-field id="pin">
+            <settings-security-keys-pin-field
+                id="pin" label="$i18n{securityKeysPIN}">
             </settings-security-keys-pin-field>
           </div>
 
@@ -92,9 +93,9 @@
                     </div>
                     <div class="user">[[formatUser_(item)]]</div>
                     <cr-checkbox on-change="checkedCredentialsChanged_"
-                       data-id$="[[item.id]]"
-                       checked="[[credentialIsChecked_(item.id)]]"
-                       disabled="[[deleteInProgress_]]"></cr-checkbox>
+                        data-id$="[[item.id]]"
+                        checked="[[credentialIsChecked_(item.id)]]"
+                        disabled="[[deleteInProgress_]]"></cr-checkbox>
                   </div>
                 </template>
               </iron-list>

chrome/browser/resources/settings/privacy_page/security_keys_credential_management_dialog.js

@@ -98,7 +98,9 @@ Polymer({
     if (!this.$.pin.validate()) {
       return;
     }
+    this.confirmButtonDisabled_ = true;
     this.browserProxy_.providePIN(this.$.pin.value).then((retries) => {
+      this.confirmButtonDisabled_ = false;
       if (retries != null) {
         this.$.pin.showIncorrectPINError(retries);
         this.collectPin_();
@@ -258,9 +260,11 @@ Polymer({
     assert(this.credentials_ && this.credentials_.length > 0);
     assert(this.checkedCredentialIds_.size > 0);
 
+    this.confirmButtonDisabled_ = true;
     this.deleteInProgress_ = true;
     this.browserProxy_.deleteCredentials(Array.from(this.checkedCredentialIds_))
         .then((err) => {
+          this.confirmButtonDisabled_ = false;
           this.deleteInProgress_ = false;
           this.onError_(err);
         });

chrome/browser/resources/settings/privacy_page/security_keys_pin_field.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 

chrome/browser/resources/settings/privacy_page/security_keys_pin_field.js

@@ -18,7 +18,10 @@ Polymer({
     label: String,
 
     /** The validation error label of the input field. */
-    error: String,
+    error: {
+      type: String,
+      observer: 'errorChanged_',
+    },
 
     /** The value of the input field. */
     value: String,
@@ -32,6 +35,10 @@ Polymer({
 
   /** @override */
   attached: function() {
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      Polymer.IronA11yAnnouncer.requestAvailability();
+    });
+
     this.inputVisible_ = false;
   },
 
@@ -158,4 +165,11 @@ Polymer({
 
     return '';
   },
+
+  /** @private */
+  errorChanged_: function() {
+    // Make screen readers announce changes to the PIN validation error
+    // label.
+    this.fire('iron-announce', {text: this.error});
+  },
 });