Add general functionality to support reading a message after a custom button is pressed.

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)

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]);
     }
   });

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;
+}

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);