Accessibility fixes for quick unlock settings.

chrome/browser/resources/settings/people_page/setup_pin_dialog.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * 'settings-setup-pin-dialog' is the settings page for choosing a PIN.
  *
  * Example:
  *
@@ skipping 139 matching lines @@
            this.initialPin_ == this.pinKeyboardValue_;
   },
 
   /**
    * Notify the user about a problem.
    * @private
    * @param {string} messageId
    * @param {string} problemClass
    */
   showProblem_: function(messageId, problemClass) {
+    var previousMessage = this.problemMessage_;
+
+    // Update problem info.
     this.problemMessage_ = this.i18n(messageId);
     this.problemClass_ = problemClass;
     this.updateStyles();
-  },
+
+    // If the problem message has changed, fire an alert.
+    if (previousMessage != this.problemMessage_)
+      this.$.problemDiv.setAttribute('role', 'alert');
+   },
 
   /** @private */
   hideProblem_: function() {
     this.problemMessage_ = '';
     this.problemClass_ = '';
   },
 
   /** @private */
   onPinChange_: function() {
     if (!this.isConfirmStep_) {
       var isPinLongEnough = this.isPinLongEnough_(this.pinKeyboardValue_);
       var isWeak = isPinLongEnough && this.isPinWeak_(this.pinKeyboardValue_);
 
-      if (!isPinLongEnough && this.pinKeyboardValue_)
-        this.showProblem_('configurePinTooShort', 'error');
+      if (!isPinLongEnough)
+        this.showProblem_('configurePinTooShort', 'warning');
       else if (isWeak)
         this.showProblem_('configurePinWeakPin', 'warning');
       else
         this.hideProblem_();
 
       this.enableSubmit_ = isPinLongEnough;
 
     } else {
-      var canSubmit = this.canSubmit_();
+      if (this.canSubmit_())
+        this.hideProblem_();
+      else
+        this.showProblem_('configurePinMismatched', 'warning');
 
-      if (!canSubmit && this.pinKeyboardValue_)
-        this.showProblem_('configurePinMismatched', 'error');
-      else
-        this.hideProblem_();
-
-      this.enableSubmit_ = canSubmit;
+      this.enableSubmit_ = true;

[tommycli, 2016/10/25 18:13:50]

Should we rename canSubmit? Since that means something different from
enableSubmit_?

[jdufault, 2016/10/26 22:38:36]

Renamed to isPinConfirmed_.

[tommycli, 2016/10/27 00:13:25]

Hey I'm still not sure what isPinConfirmed_ means. Does it mean that the
confirmation pin matches the initial pin? Perhaps the comment needs an update.

[jdufault, 2016/10/27 19:22:08]

Done; I've updated the comment.

     }
   },
 
   /** @private */
   onPinSubmit_: function() {
     if (!this.isConfirmStep_) {
       if (this.isPinLongEnough_(this.pinKeyboardValue_)) {
         this.initialPin_ = this.pinKeyboardValue_;
         this.pinKeyboardValue_ = '';
         this.isConfirmStep_ = true;
         this.onPinChange_();
         this.$.pinKeyboard.focus();
       }
     } else {
       // onPinSubmit_ gets called if the user hits enter on the PIN keyboard.
       // The PIN is not guaranteed to be valid in that case.
-      if (!this.canSubmit_())
+      if (!this.canSubmit_()) {
+        this.showProblem_('configurePinMismatched', 'error');
         return;
+      }
 
       function onSetModesCompleted(didSet) {
         if (!didSet) {
           console.error('Failed to update pin');
           return;
         }
 
         this.resetState_();
         this.fire('done');
       }
@@ skipping 29 matching lines @@
    * @private
    * @param {boolean} isConfirmStep
    * @return {string}
    */
   getContinueMessage_: function(isConfirmStep) {
     return this.i18n(isConfirmStep ? 'confirm' : 'configurePinContinueButton');
   },
 });
 
 })();