From 85f2ae87619c04b234479f8e9da290a3a7483f43 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Thu, 14 Jul 2016 11:50:05 -0700
Subject: [PATCH] Set active descendant correctly for toolbox tree. Change
 roles to 'tree' where appropriate.

---
 accessible/toolbox.component.js   | 16 ++++++++++++----
 accessible/workspace.component.js |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/accessible/toolbox.component.js b/accessible/toolbox.component.js
index 08180310..99f9a1bd 100644
--- a/accessible/toolbox.component.js
+++ b/accessible/toolbox.component.js
@@ -29,10 +29,10 @@ blocklyApp.ToolboxComponent = ng.core
     template: `
       <h3 #toolboxTitle id="blockly-toolbox-title">Toolbox</h3>
       <ol #tree
-          id="blockly-toolbox-tree" role="group" class="blocklyTree"
+          id="blockly-toolbox-tree" role="tree" class="blocklyTree"
           *ngIf="toolboxCategories && toolboxCategories.length > 0" tabIndex="0"
           [attr.aria-labelledby]="toolboxTitle.id"
-          [attr.aria-activedescendant]="tree.getAttribute('aria-activedescendant') || tree.id + '-node0' "
+          [attr.aria-activedescendant]="getActiveDescId()"
           (keydown)="treeService.onKeypress($event, tree)">
         <template [ngIf]="xmlHasCategories">
           <li #parent
@@ -106,11 +106,19 @@ blocklyApp.ToolboxComponent = ng.core
     ngAfterViewInit: function() {
       // If this is a top-level tree in the toolbox, set its active
       // descendant after the ids have been computed.
+      // Note that a timeout is needed here in order to trigger Angular
+      // change detection.
       if (this.xmlHasCategories) {
-        this.treeService.setActiveDesc(
-            'blockly-toolbox-tree-node0', 'blockly-toolbox-tree');
+        var that = this;
+        setTimeout(function() {
+          that.treeService.setActiveDesc(
+              'blockly-toolbox-tree-node0', 'blockly-toolbox-tree');
+        });
       }
     },
+    getActiveDescId: function() {
+      return this.treeService.getActiveDescId('blockly-toolbox-tree');
+    },
     getToolboxWorkspace: function(categoryNode) {
       if (categoryNode.attributes && categoryNode.attributes.name) {
         var categoryName = categoryNode.attributes.name.value;
diff --git a/accessible/workspace.component.js b/accessible/workspace.component.js
index 38e50fae..1efc6ee7 100644
--- a/accessible/workspace.component.js
+++ b/accessible/workspace.component.js
@@ -47,7 +47,7 @@ blocklyApp.WorkspaceComponent = ng.core
 
     <div *ngIf="workspace">
       <ol #tree *ngFor="#block of workspace.topBlocks_; #i = index"
-          tabIndex="0" role="group" class="blocklyTree blocklyWorkspaceTree"
+          tabIndex="0" role="tree" class="blocklyTree blocklyWorkspaceTree"
           [attr.aria-activedescendant]="getActiveDescId(tree.id)"
           [attr.aria-labelledby]="workspaceTitle.id"
           (keydown)="onKeypress($event, tree)">