From de9337edde83ae3e9f232c0e04826ea7f1a54522 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Wed, 5 Oct 2016 18:21:41 -0700
Subject: [PATCH] Add general functionality to support reading a message after
 a custom button is pressed.

---
 accessible/README                     |  2 ++
 accessible/field-segment.component.js | 19 +++++++++++++------
 accessible/media/accessible.css       |  4 ++++
 accessible/workspace.component.js     | 15 ++++++++++++---
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/accessible/README b/accessible/README
index 42bf1c4fa..661b3a105 100644
--- a/accessible/README
+++ b/accessible/README
@@ -46,6 +46,8 @@ keys:
 
   - 'text' (the text to display on the button)
   - 'ariaDescribedBy' (the value of the button's aria-describedby attribute)
+  - 'onClickNotification' (a notification that the screenreader should read
+        when the button is clicked)
   - 'isHidden' (a function that returns true if the button should not be
         displayed, and false otherwise)
   - 'action' (the function that gets run when the button is clicked)
diff --git a/accessible/field-segment.component.js b/accessible/field-segment.component.js
index 86c649b0c..acb765363 100644
--- a/accessible/field-segment.component.js
+++ b/accessible/field-segment.component.js
@@ -56,7 +56,8 @@ blocklyApp.FieldSegmentComponent = ng.core
         <ol role="group">
           <li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
               [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')"
-              [attr.aria-level]="level" [attr.aria-selected]="mainField.getValue() == optionValue">
+              [attr.aria-level]="level" [attr.aria-selected]="mainField.getValue() == optionValue"
+              class="blocklyDropdownListItem">
             <button [id]="idMap[optionValue + 'Button']" (click)="handleDropdownChange(mainField, optionValue)"
                     [disabled]="disabled" tabindex="-1"
                     [attr.aria-label]="optionText[optionValue] + ' Press Enter to select this value'">
@@ -71,10 +72,13 @@ blocklyApp.FieldSegmentComponent = ng.core
     pipes: [blocklyApp.TranslatePipe]
   })
   .Class({
-    constructor: [blocklyApp.UtilsService, function(_utilsService) {
+    constructor: [
+        blocklyApp.NotificationsService, blocklyApp.UtilsService,
+        function(_notificationsService, _utilsService) {
       this.optionText = {
         keys: []
       };
+      this.notificationsService = _notificationsService;
       this.utilsService = _utilsService;
     }],
     ngOnInit: function() {
@@ -147,14 +151,17 @@ blocklyApp.FieldSegmentComponent = ng.core
       }
       return this.optionText.keys;
     },
-    handleDropdownChange: function(field, text) {
-      if (text == 'NO_ACTION') {
+    handleDropdownChange: function(field, optionValue) {
+      if (optionValue == 'NO_ACTION') {
         return;
       }
       if (this.mainField instanceof Blockly.FieldVariable) {
-        Blockly.FieldVariable.dropdownChange.call(this.mainField, text);
+        Blockly.FieldVariable.dropdownChange.call(this.mainField, optionValue);
       } else {
-        this.mainField.setValue(text);
+        this.mainField.setValue(optionValue);
       }
+
+      this.notificationsService.setStatusMessage(
+          'Selected option ' + this.optionText[optionValue]);
     }
   });
diff --git a/accessible/media/accessible.css b/accessible/media/accessible.css
index 56d170e22..0deaebb7c 100644
--- a/accessible/media/accessible.css
+++ b/accessible/media/accessible.css
@@ -31,3 +31,7 @@
 .blocklyActiveDescendant > blockly-field-segment > input {
   outline: 2px dotted #00f;
 }
+
+.blocklyDropdownListItem[aria-selected="true"] button {
+  font-weight: bold;
+}
diff --git a/accessible/workspace.component.js b/accessible/workspace.component.js
index 569138233..6df4897d0 100644
--- a/accessible/workspace.component.js
+++ b/accessible/workspace.component.js
@@ -50,7 +50,7 @@ blocklyApp.WorkspaceComponent = ng.core
       <div id="blockly-workspace-toolbar" (keydown)="onWorkspaceToolbarKeypress($event)">
         <span *ngFor="#buttonConfig of toolbarButtonConfig">
           <button *ngIf="!buttonConfig.isHidden()"
-                  (click)="buttonConfig.action()"
+                  (click)="handleButtonClick(buttonConfig)"
                   [attr.aria-describedby]="buttonConfig.ariaDescribedBy"
                   class="blocklyTree blocklyWorkspaceToolbarButton">
             {{buttonConfig.text}}
@@ -69,8 +69,9 @@ blocklyApp.WorkspaceComponent = ng.core
   })
   .Class({
     constructor: [
-        blocklyApp.TreeService, blocklyApp.UtilsService,
-        function(_treeService, _utilsService) {
+        blocklyApp.NotificationsService, blocklyApp.TreeService,
+        blocklyApp.UtilsService,
+        function(_notificationsService, _treeService, _utilsService) {
       // ACCESSIBLE_GLOBALS is a global variable defined by the containing
       // page. It should contain a key, toolbarButtonConfig, whose
       // corresponding value is an Array with two keys: 'text' and 'action'.
@@ -80,6 +81,7 @@ blocklyApp.WorkspaceComponent = ng.core
           ACCESSIBLE_GLOBALS && ACCESSIBLE_GLOBALS.toolbarButtonConfig ?
           ACCESSIBLE_GLOBALS.toolbarButtonConfig : [];
       this.workspace = blocklyApp.workspace;
+      this.notificationsService = _notificationsService;
       this.treeService = _treeService;
       this.utilsService = _utilsService;
     }],
@@ -89,6 +91,13 @@ blocklyApp.WorkspaceComponent = ng.core
     getActiveDescId: function(treeId) {
       return this.treeService.getActiveDescId(treeId);
     },
+    handleButtonClick: function(buttonConfig) {
+      buttonConfig.action();
+      if (buttonConfig.onClickNotification) {
+        this.notificationsService.setStatusMessage(
+            buttonConfig.onClickNotification);
+      }
+    },
     onWorkspaceToolbarKeypress: function(e) {
       this.treeService.onWorkspaceToolbarKeypress(
           e, document.activeElement.id);