From 30a4a1930f7d01d8ed378b26c1cdf65d9b950836 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Thu, 8 Dec 2016 19:55:42 -0800
Subject: [PATCH] Fix issue with aria-liveregion not speaking. Allow sufficient
 time for alert noise to play before speaking the notification.

---
 accessible/app.component.js         |  6 ++--
 accessible/audio.service.js         | 52 +++++++++++++++++++----------
 accessible/notifications.service.js |  2 +-
 accessible/tree.service.js          |  6 ++--
 demos/accessible/index.html         |  2 +-
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/accessible/app.component.js b/accessible/app.component.js
index 6d37bb9e7..c69a54ae0 100644
--- a/accessible/app.component.js
+++ b/accessible/app.component.js
@@ -29,8 +29,10 @@ blocklyApp.AppComponent = ng.core.Component({
   template: `
     <blockly-workspace></blockly-workspace>
     <blockly-sidebar></blockly-sidebar>
-    <div *ngIf="getAriaLiveReadout()" class="blocklyAriaLiveStatus"
-         aria-hidden="true">
+    <!-- Warning: Hiding this when there is no content looks visually nicer,
+    but it can have unexpected side effects. In particular, it sometimes stops
+    screenreaders from reading anything in this div. -->
+    <div class="blocklyAriaLiveStatus">
       <span aria-live="polite" role="status">{{getAriaLiveReadout()}}</span>
     </div>
 
diff --git a/accessible/audio.service.js b/accessible/audio.service.js
index 3ffb22c62..2f3f00f0a 100644
--- a/accessible/audio.service.js
+++ b/accessible/audio.service.js
@@ -23,27 +23,38 @@
  */
 
 blocklyApp.AudioService = ng.core.Class({
-  constructor: [function() {
-    // We do not play any audio unless a media path prefix is specified.
-    this.canPlayAudio = false;
+  constructor: [
+    blocklyApp.NotificationsService, function(notificationsService) {
+      this.notificationsService = notificationsService;
 
-    if (ACCESSIBLE_GLOBALS.hasOwnProperty('mediaPathPrefix')) {
-      this.canPlayAudio = true;
-      var mediaPathPrefix = ACCESSIBLE_GLOBALS['mediaPathPrefix'];
-      this.AUDIO_PATHS_ = {
-        'connect': mediaPathPrefix + 'click.mp3',
-        'delete': mediaPathPrefix + 'delete.mp3',
-        'oops': mediaPathPrefix + 'oops.mp3'
-      };
+      // We do not play any audio unless a media path prefix is specified.
+      this.canPlayAudio = false;
+
+      if (ACCESSIBLE_GLOBALS.hasOwnProperty('mediaPathPrefix')) {
+        this.canPlayAudio = true;
+        var mediaPathPrefix = ACCESSIBLE_GLOBALS['mediaPathPrefix'];
+        this.AUDIO_PATHS_ = {
+          'connect': mediaPathPrefix + 'click.mp3',
+          'delete': mediaPathPrefix + 'delete.mp3',
+          'oops': mediaPathPrefix + 'oops.mp3'
+        };
+      }
+
+      this.cachedAudioFiles_ = {};
     }
-
-    this.cachedAudioFiles_ = {};
-  }],
-  play_: function(audioId) {
+  ],
+  play_: function(audioId, onEndedCallback) {
     if (this.canPlayAudio) {
       if (!this.cachedAudioFiles_.hasOwnProperty(audioId)) {
         this.cachedAudioFiles_[audioId] = new Audio(this.AUDIO_PATHS_[audioId]);
       }
+      if (onEndedCallback) {
+        this.cachedAudioFiles_[audioId].addEventListener(
+            'ended', onEndedCallback);
+      } else {
+        this.cachedAudioFiles_[audioId].removeEventListener('ended');
+      }
+
       this.cachedAudioFiles_[audioId].play();
     }
   },
@@ -53,7 +64,14 @@ blocklyApp.AudioService = ng.core.Class({
   playDeleteSound: function() {
     this.play_('delete');
   },
-  playOopsSound: function() {
-    this.play_('oops');
+  playOopsSound: function(optionalStatusMessage) {
+    if (optionalStatusMessage) {
+      var that = this;
+      this.play_('oops', function() {
+        that.notificationsService.speak(optionalStatusMessage);
+      });
+    } else {
+      this.play_('oops');
+    }
   }
 });
diff --git a/accessible/notifications.service.js b/accessible/notifications.service.js
index 1e1b4805c..d16d765f4 100644
--- a/accessible/notifications.service.js
+++ b/accessible/notifications.service.js
@@ -53,6 +53,6 @@ blocklyApp.NotificationsService = ng.core.Class({
     }, 20));
     this.timeouts.push(setTimeout(function() {
       that.setDisplayedMessage_('');
-    }, 2000));
+    }, 5000));
   }
 });
diff --git a/accessible/tree.service.js b/accessible/tree.service.js
index c355ee108..6aee3ca51 100644
--- a/accessible/tree.service.js
+++ b/accessible/tree.service.js
@@ -493,8 +493,7 @@ blocklyApp.TreeService = ng.core.Class({
             if (this.getParentListElement_(activeDesc)) {
               statusMessage += ' Press left to go to parent list.';
             }
-            this.audioService.playOopsSound();
-            this.notificationsService.speak(statusMessage);
+            this.audioService.playOopsSound(statusMessage);
           }
         } else if (e.keyCode == 39) {
           // Right arrow key. Go down a level, if possible.
@@ -505,8 +504,7 @@ blocklyApp.TreeService = ng.core.Class({
           if (nextSibling) {
             this.setActiveDesc(nextSibling.id, treeId);
           } else {
-            this.audioService.playOopsSound();
-            this.notificationsService.speak('Reached bottom of list.');
+            this.audioService.playOopsSound('Reached bottom of list.');
           }
         }
 
diff --git a/demos/accessible/index.html b/demos/accessible/index.html
index fde57ba8c..127628d41 100644
--- a/demos/accessible/index.html
+++ b/demos/accessible/index.html
@@ -19,8 +19,8 @@
   <script src="../../accessible/libs/angular2-all.umd.min.js"></script>
 
   <script src="../../accessible/utils.service.js"></script>
-  <script src="../../accessible/audio.service.js"></script>
   <script src="../../accessible/notifications.service.js"></script>
+  <script src="../../accessible/audio.service.js"></script>
   <script src="../../accessible/block-connection.service.js"></script>
   <script src="../../accessible/block-options-modal.service.js"></script>
   <script src="../../accessible/keyboard-input.service.js"></script>