From 3b84076c9375fb5675fe04d3d0ae4c4e081e7aea Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Wed, 21 Sep 2016 15:41:58 -0700
Subject: [PATCH] Add new fields to toolbarButtonConfig.

---
 accessible/README                 | 19 +++++++++++--------
 accessible/workspace.component.js |  4 +++-
 demos/accessible/index.html       |  6 +++---
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/accessible/README b/accessible/README
index 37ea67879..42bf1c4fa 100644
--- a/accessible/README
+++ b/accessible/README
@@ -33,20 +33,23 @@ To customize the toolbar, you will need to declare an ACCESSIBLE_GLOBALS object
 in the global scope that looks like this:
 
     var ACCESSIBLE_GLOBALS = {
-      toolbarButtonConfig: [],
-      mediaPathPrefix: null
+      mediaPathPrefix: null,
+      toolbarButtonConfig: []
     };
 
-The value corresponding to 'toolbarButtonConfig' can be modified by adding
-objects representing buttons on the toolbar. Each of these objects should have
-two keys:
+The value of mediaPathPrefix should be the location of the accessible/media
+folder.
+
+The value of 'toolbarButtonConfig' should be a list of objects, each
+representing buttons on the toolbar. Each of these objects should have four
+keys:
 
   - 'text' (the text to display on the button)
+  - 'ariaDescribedBy' (the value of the button's aria-describedby attribute)
+  - '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)
 
-In addition, if you want audio to be played, set mediaPathPrefix to the
-location of the accessible/media folder.
-
 
 Limitations
 -----------
diff --git a/accessible/workspace.component.js b/accessible/workspace.component.js
index d69ec7ea8..44ad6c558 100644
--- a/accessible/workspace.component.js
+++ b/accessible/workspace.component.js
@@ -45,7 +45,9 @@ blocklyApp.WorkspaceComponent = ng.core
     <div class="blocklyToolbarColumn">
       <div id="blockly-workspace-toolbar" (keydown)="onWorkspaceToolbarKeypress($event)">
         <span *ngFor="#buttonConfig of toolbarButtonConfig">
-          <button (click)="buttonConfig.action()"
+          <button *ngIf="!buttonConfig.isHidden()"
+                  (click)="buttonConfig.action()"
+                  [attr.aria-describedby]="buttonConfig.ariaDescribedBy"
                   class="blocklyTree blocklyWorkspaceToolbarButton">
             {{buttonConfig.text}}
           </button>
diff --git a/demos/accessible/index.html b/demos/accessible/index.html
index af424764d..c4097d341 100644
--- a/demos/accessible/index.html
+++ b/demos/accessible/index.html
@@ -71,11 +71,11 @@
 
   <script>
     var ACCESSIBLE_GLOBALS = {
+      // Prefix of path to sound files.
+      mediaPathPrefix: '../../accessible/media/',
       // Additional buttons for the workspace toolbar that
       // go before the "Clear Workspace" button.
-      toolbarButtonConfig: [],
-      // Prefix of path to sound files.
-      mediaPathPrefix: '../../accessible/media/'
+      toolbarButtonConfig: []
     };
     document.addEventListener('DOMContentLoaded', function() {
       ng.platform.browser.bootstrap(blocklyApp.AppView);