diff --git a/accessible/toolbox_treeview.component.js b/accessible/toolbox_treeview.component.js index b1e03a899..dca39da82 100644 --- a/accessible/toolbox_treeview.component.js +++ b/accessible/toolbox_treeview.component.js @@ -29,51 +29,76 @@ blocklyApp.ToolboxTreeView = ng.core selector: 'toolbox-tree-view', template: `
  • + [ngClass]="{blocklyHasChildren: displayBlockMenu || block.inputList.length > 0, blocklyActiveDescendant: index == 0 && noCategories}" + [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummaryLabel'])" + [attr.aria-selected]="index == 0 && tree.getAttribute('aria-activedescendant') == 'blockly-toolbox-tree-node0'" + [attr.aria-level]="level"> {{setActiveDesc(parentList)}} -
      -
    1. +
        +
        1. + (click)="copyToWorkspace(block)"> + {{stringMap['COPY_TO_WORKSPACE']}} +
        2. + (click)="clipboardService.copy(block, true)"> + {{stringMap['COPY_TO_CLIPBOARD']}} +
        3. - +
        2. - - + + + +
      2. - +
      2. - + + `, directives: [ng.core.forwardRef( function() { return blocklyApp.ToolboxTreeView; }), diff --git a/accessible/toolboxview.component.js b/accessible/toolboxview.component.js index abb71bec0..bb33692e3 100644 --- a/accessible/toolboxview.component.js +++ b/accessible/toolboxview.component.js @@ -28,29 +28,41 @@ blocklyApp.ToolboxView = ng.core selector: 'toolbox-view', template: `

      Toolbox

      -
        -
      1. - -
        - - {{labelCategory(name, i, tree)}} -
          - -
        -
        -
        2. -
        - + +
        + +
      `, @@ -58,26 +70,36 @@ blocklyApp.ToolboxView = ng.core providers: [blocklyApp.TreeService, blocklyApp.UtilsService], }) .Class({ - constructor: [blocklyApp.TreeService, blocklyApp.UtilsService, function(_treeService, _utilsService) { - this.sightedToolbox = document.getElementById('blockly-toolbox-xml'); - + constructor: [ + blocklyApp.TreeService, blocklyApp.UtilsService, + function(_treeService, _utilsService) { this.toolboxCategories = []; this.toolboxWorkspaces = Object.create(null); this.treeService = _treeService; this.utilsService = _utilsService; - this.toolboxHasCategories = false; + this.xmlHasCategories = false; }], ngOnInit: function() { - var elementsNeedingIds = []; - var categories = this.makeArray(this.sightedToolbox); - if (this.toolboxHasCategories) { - for (var i = 0; i < categories.length; i++){ - elementsNeedingIds.push('Parent' + i); - elementsNeedingIds.push('Label' + i); + // Note that sometimes the toolbox may not have categories; it may + // display individual blocks directly (which is often the case in, + // e.g., Blockly Games). + var xmlToolboxElt = document.getElementById('blockly-toolbox-xml'); + var xmlCategoryElts = xmlToolboxElt.getElementsByTagName('category'); + if (xmlCategoryElts.length) { + this.xmlHasCategories = true; + this.toolboxCategories = Array.from(xmlCategoryElts); + + var elementsNeedingIds = []; + for (var i = 0; i < this.toolboxCategories.length; i++) { + elementsNeedingIds.push('Parent' + i, 'Label' + i); } this.idMap = this.utilsService.generateIds(elementsNeedingIds); this.idMap['Parent0'] = 'blockly-toolbox-tree-node0'; + } else { + // Create a single category is created with all the top-level blocks. + this.xmlHasCategories = false; + this.toolboxCategories = [Array.from(xmlToolboxElt.children)]; } }, labelCategory: function(label, i, tree) { @@ -93,23 +115,6 @@ blocklyApp.ToolboxView = ng.core parent.setAttribute('aria-selected', 'true'); } }, - makeArray: function(val) { - if (val) { - if (this.toolboxCategories.length) { - return this.toolboxCategories; - } else { - var categories = val.getElementsByTagName('category'); - if (categories.length) { - this.toolboxHasCategories = true; - this.toolboxCategories = Array.from(categories); - return this.toolboxCategories; - } - this.toolboxHasCategories = false; - this.toolboxCategories = [Array.from(val.children)]; - return this.toolboxCategories; - } - } - }, getToolboxWorkspace: function(categoryNode) { if (categoryNode.attributes && categoryNode.attributes.name) { var categoryName = categoryNode.attributes.name.value; diff --git a/accessible/workspace_treeview.component.js b/accessible/workspace_treeview.component.js index 9246ce3a5..db0001320 100644 --- a/accessible/workspace_treeview.component.js +++ b/accessible/workspace_treeview.component.js @@ -109,7 +109,11 @@ blocklyApp.WorkspaceTreeView = ng.core
    • - + + `, directives: [ng.core.forwardRef( function() { return blocklyApp.WorkspaceTreeView; }), blocklyApp.FieldView], diff --git a/accessible/workspaceview.component.js b/accessible/workspaceview.component.js index e104755f5..ae0fccfbe 100644 --- a/accessible/workspaceview.component.js +++ b/accessible/workspaceview.component.js @@ -64,8 +64,8 @@ blocklyApp.WorkspaceView = ng.core // The first is the text to display on the button, and the second is the // function that gets run when the button is clicked. this.toolbarButtonConfig = - ACCESSIBLE_GLOBALS && ACCESSIBLE_GLOBALS.toolbarButtonConfig ? - ACCESSIBLE_GLOBALS.toolbarButtonConfig : []; + ACCESSIBLE_GLOBALS && ACCESSIBLE_GLOBALS.toolbarButtonConfig ? + ACCESSIBLE_GLOBALS.toolbarButtonConfig : []; this.stringMap = { 'WORKSPACE': Blockly.Msg.WORKSPACE, 'CLEAR_WORKSPACE': Blockly.Msg.CLEAR_WORKSPACE