Update config options for sidebar buttons.

accessible/README.md

@@ -21,8 +21,8 @@ in the same order as in the demo: utils.service.js will need to be the first
 Angular file imported.
 
 When the DOMContentLoaded event fires, call ng.platform.browser.bootstrap() on
-the main component to be loaded. This will usually be blocklyApp.AppView, but
-if you have another component that wraps it, use that one instead.
+the main component to be loaded. This will usually be blocklyApp.AppComponent,
+but if you have another component that wraps it, use that one instead.
 
 
 Customizing the Sidebar and Audio
@@ -41,16 +41,11 @@ The value of mediaPathPrefix should be the location of the accessible/media
 folder.
 
 The value of 'customSidebarButtons' should be a list of objects, each
-representing buttons on the sidebar. Each of these objects should have five
-keys:
-
+representing buttons on the sidebar. Each of these objects should have the
+following 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)
+  - 'id' (optional; the id of the button)
 
 
 Limitations

accessible/app.component.js

@@ -24,7 +24,7 @@
 
 blocklyApp.workspace = new Blockly.Workspace();
 
-blocklyApp.AppView = ng.core.Component({
+blocklyApp.AppComponent = ng.core.Component({
   selector: 'blockly-app',
   template: `
     <div>

accessible/sidebar.component.js

@@ -30,9 +30,8 @@ blocklyApp.SidebarComponent = ng.core.Component({
   <div class="blocklySidebarColumn">
     <div id="blockly-workspace-sidebar" (keydown)="onSidebarKeypress($event)">
       <span *ngFor="#buttonConfig of customSidebarButtons">
-        <button *ngIf="!buttonConfig.isHidden()"
+        <button id="{{buttonConfig.id || undefined}}"
                 (click)="handleButtonClick(buttonConfig)"
-                [attr.aria-describedby]="buttonConfig.ariaDescribedBy"
                 class="blocklySidebarButton">
           {{buttonConfig.text}}
         </button>
@@ -91,10 +90,6 @@ blocklyApp.SidebarComponent = ng.core.Component({
   },
   handleButtonClick: function(buttonConfig) {
     buttonConfig.action();
-    if (buttonConfig.onClickNotification) {
-      this.notificationsService.setAriaLiveReadout(
-          buttonConfig.onClickNotification);
-    }
   },
   clearWorkspace: function() {
     this.workspace.clear();

demos/accessible/index.html

@@ -84,7 +84,7 @@
       customSidebarButtons: []
     };
     document.addEventListener('DOMContentLoaded', function() {
-      ng.platform.browser.bootstrap(blocklyApp.AppView);
+      ng.platform.browser.bootstrap(blocklyApp.AppComponent);
     });
   </script>