From 521909b2dd191a29efddb0dec296a0eb3ad2d2b4 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Thu, 8 Dec 2016 19:23:40 -0800
Subject: [PATCH] Add an aria-describedby to the 'create new block group...'
 button in the workspace to give more context.

---
 accessible/sidebar.component.js   | 6 +++++-
 accessible/utils.service.js       | 1 +
 accessible/workspace.component.js | 7 ++++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/accessible/sidebar.component.js b/accessible/sidebar.component.js
index f3e2f14b2..832f041d4 100644
--- a/accessible/sidebar.component.js
+++ b/accessible/sidebar.component.js
@@ -90,7 +90,11 @@ blocklyApp.SidebarComponent = ng.core.Component({
   },
   clearWorkspace: function() {
     blocklyApp.workspace.clear();
-    document.getElementById(this.ID_FOR_CREATE_NEW_GROUP_BUTTON).focus();
+    // The timeout is needed in order to give the blocks time to be cleared
+    // from the workspace, and for the 'workspace is empty' button to show up.
+    setTimeout(function() {
+      document.getElementById(blocklyApp.ID_FOR_EMPTY_WORKSPACE_BTN).focus();
+    }, 50);
   },
   showToolboxModalForAttachToMarkedConnection: function() {
     this.toolboxModalService.showToolboxModalForAttachToMarkedConnection(
diff --git a/accessible/utils.service.js b/accessible/utils.service.js
index e6adbf5af..98316106e 100644
--- a/accessible/utils.service.js
+++ b/accessible/utils.service.js
@@ -26,6 +26,7 @@
  */
 
 var blocklyApp = {};
+blocklyApp.ID_FOR_EMPTY_WORKSPACE_BTN = 'blocklyEmptyWorkspaceBtn';
 
 blocklyApp.UtilsService = ng.core.Class({
   constructor: [function() {}],
diff --git a/accessible/workspace.component.js b/accessible/workspace.component.js
index 5649c6755..eae4491ed 100644
--- a/accessible/workspace.component.js
+++ b/accessible/workspace.component.js
@@ -42,11 +42,12 @@ blocklyApp.WorkspaceComponent = ng.core.Component({
         </ol>
 
         <span *ngIf="workspace.topBlocks_.length === 0">
-          <p>
+          <p id="emptyWorkspaceBtnLabel">
             There are no blocks in the workspace.
             <button (click)="showToolboxModalForCreateNewGroup()"
                     class="blocklyWorkspaceFocusTarget"
-                    id="{{ID_FOR_EMPTY_WORKSPACE_BTN}}">
+                    id="{{ID_FOR_EMPTY_WORKSPACE_BTN}}"
+                    aria-describedby="emptyWorkspaceBtnLabel">
               Create new block group...
             </button>
           </p>
@@ -68,7 +69,7 @@ blocklyApp.WorkspaceComponent = ng.core.Component({
       this.treeService = treeService;
 
       this.workspace = blocklyApp.workspace;
-      this.ID_FOR_EMPTY_WORKSPACE_BTN = 'blocklyEmptyWorkspaceButton';
+      this.ID_FOR_EMPTY_WORKSPACE_BTN = blocklyApp.ID_FOR_EMPTY_WORKSPACE_BTN;
     }
   ],
   getActiveDescId: function(treeId) {