Hotword: Fix the order in which screen readers will read the error alerts and retry buttons

chrome/browser/resources/hotword_audio_verification/flow.js

 // Copyright 2014 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.
 
 (function() {
 
   // Correspond to steps in the hotword opt-in flow.
   /** @const */ var START = 'start-container';
   /** @const */ var AUDIO_HISTORY = 'audio-history-container';
   /** @const */ var SPEECH_TRAINING = 'speech-training-container';
@@ skipping 192 matching lines @@
    * Shows an error if the audio history setting was not enabled successfully.
    * @private
    */
   Flow.prototype.handleAudioHistoryError_ = function() {
     $('audio-history-agree').disabled = false;
     $('audio-history-cancel').disabled = false;
 
     $('audio-history-wait').hidden = true;
     $('audio-history-error').hidden = false;
 
-    $('audio-history-agree').focus();
+    // Set a timeout before focusing the Enable button so that screenreaders
+    // have time to announce the error first.
+    this.setTimeout_(function() {
+        $('audio-history-agree').focus();
+    }.bind(this), 50);
   };
 
   /**
    * Callback for when an audio history request completes.
    * @param {chrome.hotwordPrivate.AudioHistoryState} state The audio history
    *     request state.
    * @private
    */
   Flow.prototype.onAudioHistoryRequestCompleted_ = function(state) {
     if (!state.success || !state.enabled) {
@@ skipping 210 matching lines @@
       $(this.trainingPagePrefix_ + '-processing').hidden = true;
       $(this.trainingPagePrefix_ + '-wait').hidden = false;
       $(this.trainingPagePrefix_ + '-error').hidden = true;
       $(this.trainingPagePrefix_ + '-retry').hidden = true;
     } else if (this.trainingState_ == TrainingState.TIMEOUT) {
       var curStep = trainingSteps.current;
       if (curStep) {
         curStep.classList.remove('listening');
         curStep.classList.add('not-started');
       }
-      $(this.trainingPagePrefix_ + '-toast').children[1].focus();
+
+      // Set a timeout before focusing the Retry button so that screenreaders
+      // have time to announce the timeout first.
+      this.setTimeout_(function() {
+        $(this.trainingPagePrefix_ + '-toast').children[1].focus();
+      }.bind(this), 50);
     } else if (this.trainingState_ == TrainingState.ERROR) {
       // Update the buttonbar.
       $(this.trainingPagePrefix_ + '-wait').hidden = true;
       $(this.trainingPagePrefix_ + '-error').hidden = false;
       $(this.trainingPagePrefix_ + '-retry').hidden = false;
       $(this.trainingPagePrefix_ + '-processing').hidden = false;
 
-      // Focus the retry button.
-      $(this.trainingPagePrefix_ + '-retry').children[0].focus();
+      // Set a timeout before focusing the Retry button so that screenreaders
+      // have time to announce the error first.
+      this.setTimeout_(function() {
+        $(this.trainingPagePrefix_ + '-retry').children[0].focus();
+      }.bind(this), 50);
     }
   };
 
   /**
    * Handles a hotword trigger event and updates the training UI.
    * @private
    */
   Flow.prototype.handleHotwordTrigger_ = function() {
     var trainingSteps = this.getCurrentTrainingStep_('listening');
 
@@ skipping 81 matching lines @@
       previousStep = this.currentFlow_[this.currentStepIndex_ - 1];
 
     if (previousStep)
       document.getElementById(previousStep).hidden = true;
 
     chrome.app.window.current().show();
   };
 
   window.Flow = Flow;
 })();