diff --git a/accessible/toolbox-tree.component.js b/accessible/toolbox-tree.component.js
index e5bbb75be..826a44edd 100644
--- a/accessible/toolbox-tree.component.js
+++ b/accessible/toolbox-tree.component.js
@@ -29,7 +29,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
selector: 'blockly-toolbox-tree',
template: `
@@ -69,7 +69,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
return blocklyApp.ToolboxTreeComponent;
})],
inputs: [
- 'block', 'displayBlockMenu', 'level', 'index', 'tree', 'noCategories', 'isTopLevel'],
+ 'block', 'displayBlockMenu', 'level', 'tree', 'isFirstToolboxTree'],
pipes: [blocklyApp.TranslatePipe]
})
.Class({
@@ -92,10 +92,19 @@ blocklyApp.ToolboxTreeComponent = ng.core
'blockCopyButton', 'sendToSelected', 'sendToSelectedButton']);
}
this.idMap = this.utilsService.generateIds(elementsNeedingIds);
- if (this.isTopLevel) {
- this.idMap['parentList'] = 'blockly-toolbox-tree-node0';
- } else {
- this.idMap['parentList'] = this.utilsService.generateUniqueId();
+ this.idMap['parentList'] = this.utilsService.generateUniqueId();
+ },
+ ngAfterViewInit: function() {
+ // If this is the first tree in the category-less 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.isFirstToolboxTree) {
+ var that = this;
+ setTimeout(function() {
+ that.treeService.setActiveDesc(
+ that.idMap['parentList'], 'blockly-toolbox-tree');
+ });
}
},
getBlockDescription: function() {
diff --git a/accessible/toolbox.component.js b/accessible/toolbox.component.js
index a7d5acd93..d43bb1532 100644
--- a/accessible/toolbox.component.js
+++ b/accessible/toolbox.component.js
@@ -55,13 +55,12 @@ blocklyApp.ToolboxComponent = ng.core
+
+ role="treeitem" [level]="1" [block]="block"
+ [tree]="tree" [displayBlockMenu]="true"
+ [isFirstToolboxTree]="i === 0">