Consolidate the usages of the 'blockly-disabled' label.

accessible/clipboard.service.js

@@ -111,14 +111,11 @@ blocklyApp.ClipboardService = ng.core
           this.isCompatibleWithConnection_(
               blockConnection, this.markedConnection_);
     },
-    getClipboardCompatibilityHTMLText: function(connection) {
-      if (this.isCompatibleWithConnection_(connection,
-          this.clipboardBlockSuperiorConnection_) ||
-          this.isCompatibleWithConnection_(connection,
-          this.clipboardBlockNextConnection_)){
-        return '';
-      } else {
-        return 'blockly-disabled';
-      }
+    isClipboardCompatibleWithConnection: function(connection) {
+      var superiorConnection = this.clipboardBlockSuperiorConnection_;
+      var nextConnection = this.clipboardBlockNextConnection_;
+      return
+          this.isCompatibleWithConnection_(connection, superiorConnection) ||
+          this.isCompatibleWithConnection_(connection, nextConnection);
     }
   });

accessible/fieldview.component.js

@@ -30,12 +30,12 @@ blocklyApp.FieldView = ng.core
     template: `
     <li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextInput()"
         [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-input', idMap['input'])"
-        [attr.aria-level]="level"  aria-selected=false>
+        [attr.aria-level]="level" aria-selected=false>
       <input [id]="idMap['input']" [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)">
     </li>
-    <li [id]="idMap['listItem']" *ngIf="isDropdown()"
+    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isDropdown()"
         [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-menu', idMap['label'])"
-        [attr.aria-level]="level" aria-selected=false role="treeitem">
+        [attr.aria-level]="level" aria-selected=false>
       <label [id]="idMap['label']">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
       <ol role="group" [attr.aria-level]="level+1">
         <li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
@@ -47,14 +47,12 @@ blocklyApp.FieldView = ng.core
         </li>
       </ol>
     </li>
-    <li [id]="idMap['listItem']" role="treeitem"
-        *ngIf="isCheckbox()" [attr.aria-level]="level"
-        aria-selected=false>
-      // Checkboxes not currently supported.
+    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isCheckbox()"
+        [attr.aria-level]="level" aria-selected=false>
+      // Checkboxes are not currently supported.
     </li>
-    <li [id]="idMap['listItem']" role="treeitem"
+    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextField() && hasVisibleText()"
         [attr.aria-labelledBy]="utilsService.generateAriaLabelledByAttr('blockly-argument-text', idMap['label'])"
-        *ngIf="isTextField() && hasVisibleText()"
         [attr.aria-level]="level" aria-selected=false>
       <label [id]="idMap['label']">
         {{field.getText()}}
@@ -77,9 +75,8 @@ blocklyApp.FieldView = ng.core
       // this.generateElementNames() are unique.
       this.idMap = this.utilsService.generateIds(elementsNeedingIds);
     },
-    generateAriaLabelledByAttr: function() {
-      return this.utilsService.generateAriaLabelledByAttr.apply(this,
-          arguments);
+    generateAriaLabelledByAttr: function(mainLabel, secondLabel) {
+      return mainLabel + ' ' + secondLabel;
     },
     generateElementNames: function() {
       var elementNames = ['listItem'];

accessible/toolbox_treeview.component.js

@@ -60,12 +60,12 @@ blocklyApp.ToolboxTreeView = ng.core
               </button>
             </li>
             <li #sendToSelected [id]="idMap['sendToSelected']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', utilsService.getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block)))"
+                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !clipboardService.isBlockCompatibleWithMarkedConnection(block))"
                 [attr.aria-level]="level+2" aria-selected=false>
               <button #sendToSelectedButton
                       [id]="idMap['sendToSelectedButton']"
                       (click)="copyToMarked(block)"
-                      [disabled]="getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block))">
+                      [disabled]="!clipboardService.isBlockCompatibleWithMarkedConnection(block)">
                 {{'COPY_TO_MARKED_SPOT'|translate}}
               </button>
             </li>
@@ -135,13 +135,9 @@ blocklyApp.ToolboxTreeView = ng.core
         this.idMap['parentList'] = this.utilsService.generateUniqueId();
       }
     },
-    getMarkedBlockCompatibilityHTMLText: function(isCompatible) {
-      return this.utilsService.getMarkedBlockCompatibilityHTMLText(
-          isCompatible);
-    },
-    generateAriaLabelledByAttr: function() {
-      return this.utilsService.generateAriaLabelledByAttr.apply(
-          this, arguments);
+    generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
+      return this.utilsService.generateAriaLabelledByAttr(
+          mainLabel, secondLabel, isDisabled);
     },
     setActiveDesc: function(parentList) {
       // If this is the first child of the toolbox and the

accessible/toolboxview.component.js

@@ -67,7 +67,7 @@ blocklyApp.ToolboxView = ng.core
       </ol>
     `,
     directives: [blocklyApp.ToolboxTreeView],
-    providers: [blocklyApp.TreeService, blocklyApp.UtilsService],
+    providers: [blocklyApp.TreeService],
   })
   .Class({
     constructor: [

accessible/utils.service.js

@@ -42,8 +42,12 @@ blocklyApp.UtilsService = ng.core
       }
       return idMap;
     },
-    generateAriaLabelledByAttr: function() {
-      return Array.from(arguments).join(' ').trim();
+    generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
+      var attrValue = mainLabel + ' ' + secondLabel;
+      if (isDisabled) {
+        attrValue += ' blockly-disabled';
+      }
+      return attrValue;
     },
     getInputTypeLabel: function(connection) {
       // Returns an upper case string in the case of official input type names.
@@ -63,16 +67,5 @@ blocklyApp.UtilsService = ng.core
       } else {
         return Blockly.Msg.VALUE;
       }
-    },
-    getMarkedBlockCompatibilityHTMLText: function(isCompatible) {
-      if (isCompatible) {
-        // undefined will result in the
-        // 'copy to marked block' option being ENABLED.
-        return '';
-      } else {
-        // Anything will result in the
-        // 'copy to marked block' option being DISABLED.
-        return 'blockly-disabled';
-      }
     }
   });

accessible/workspace_treeview.component.js

@@ -50,34 +50,40 @@ blocklyApp.WorkspaceTreeView = ng.core
               <button [id]="idMap['copyButton']" (click)="clipboardService.copy(block, true)">{{'COPY_BLOCK'|translate}}</button>
             </li>
             <li [id]="idMap['pasteBelow']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteBelowButton'], 'blockly-button', (getNoNextConnectionHTMLText(block)||clipboardService.getClipboardCompatibilityHTMLText(block.nextConnection)))"
+                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteBelowButton'], 'blockly-button', !hasNextConnection(block) || !isCompatibleWithClipboard(block.nextConnection))"
                 [attr.aria-level]="level+2" aria-selected=false>
               <button [id]="idMap['pasteBelowButton']" (click)="clipboardService.pasteFromClipboard(block.nextConnection)"
-                  [disabled]="getNoNextConnectionHTMLText(block)" [disabled]="clipboardService.getClipboardCompatibilityHTMLText(block.nextConnection)">{{'PASTE_BELOW'|translate}}</button>
+                      [disabled]="!hasNextConnection(block) || !isCompatibleWithClipboard(block.nextConnection)">
+                {{'PASTE_BELOW'|translate}}
+              </button>
             </li>
             <li [id]="idMap['pasteAbove']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteAboveButton'], 'blockly-button', (getNoPreviousConnectionHTMLText(block) || clipboardService.getClipboardCompatibilityHTMLText(block.previousConnection)))"
+                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteAboveButton'], 'blockly-button', !hasPreviousConnection(block) || !isCompatibleWithClipboard(block.previousConnection))"
                 [attr.aria-level]="level+2" aria-selected=false>
               <button [id]="idMap['pasteAboveButton']" (click)="clipboardService.pasteFromClipboard(block.previousConnection)"
-                  [disabled]="getNoPreviousConnectionHTMLText(block)" [disabled]="clipboardService.getClipboardCompatibilityHTMLText(block.previousConnection)">{{'PASTE_ABOVE'|translate}}</button>
+                      [disabled]="!hasPreviousConnection(block) || !isCompatibleWithClipboard(block.previousConnection)">
+                {{'PASTE_ABOVE'|translate}}
+              </button>
             </li>
             <li [id]="idMap['markBelow']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markBelowButton'], 'blockly-button', getNoNextConnectionHTMLText(block))"
+                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markBelowButton'], 'blockly-button', !hasNextConnection(block))"
                 [attr.aria-level]="level+2" aria-selected=false>
               <button [id]="idMap['markBelowButton']" (click)="clipboardService.markConnection(block.nextConnection)"
-                  [disabled]="getNoNextConnectionHTMLText(block)">{{'MARK_SPOT_BELOW'|translate}}</button>
+                      [disabled]="!hasNextConnection(block)">
+                {{'MARK_SPOT_BELOW'|translate}}
+              </button>
             </li>
             <li [id]="idMap['markAbove']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markAboveButton'], 'blockly-button', getNoPreviousConnectionHTMLText(block))"
+                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markAboveButton'], 'blockly-button', !hasPreviousConnection(block))"
                 [attr.aria-level]="level+2" aria-selected=false>
               <button [id]="idMap['markAboveButton']" (click)="clipboardService.markConnection(block.previousConnection)"
-                  [disabled]="getNoPreviousConnectionHTMLText(block)">{{'MARK_SPOT_ABOVE'|translate}}</button>
+                      [disabled]="!hasPreviousConnection(block)">{{'MARK_SPOT_ABOVE'|translate}}</button>
             </li>
             <li [id]="idMap['sendToSelectedListItem']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', utilsService.getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block)))"
+                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !clipboardService.isBlockCompatibleWithMarkedConnection(block))"
                 [attr.aria-level]="level+2" aria-selected=false>
               <button [id]="idMap['sendToSelectedButton']" (click)="sendToSelected(block)"
-                  [disabled]="getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block))">{{'MOVE_TO_MARKED_SPOT'|translate}}</button>
+                      [disabled]="!clipboardService.isBlockCompatibleWithMarkedConnection(block)">{{'MOVE_TO_MARKED_SPOT'|translate}}</button>
             </li>
             <li [id]="idMap['delete']" role="treeitem"
                 [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['deleteButton'], 'blockly-button')"
@@ -101,10 +107,12 @@ blocklyApp.WorkspaceTreeView = ng.core
                 <button [id]="idMap['markSpotButton + i']" (click)="clipboardService.markConnection(inputBlock.connection)">{{'MARK_THIS_SPOT'|translate}}</button>
               </li>
               <li [id]="idMap['paste' + i]" role="treeitem"
-                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteButton' + i], 'blockly-button', clipboardService.getClipboardCompatibilityHTMLText(inputBlock.connection))"
+                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteButton' + i], 'blockly-button', !isCompatibleWithClipboard(inputBlock.connection))"
                   [attr.aria-level]="level+2" aria-selected=false>
                 <button [id]="idMap['pasteButton' + i]" (click)="clipboardService.pasteFromClipboard(inputBlock.connection)"
-                    [disabled]="clipboardService.getClipboardCompatibilityHTMLText(inputBlock.connection)">{{'PASTE'|translate}}</button>
+                        [disabled]="!isCompatibleWithClipboard(inputBlock.connection)">
+                  {{'PASTE'|translate}}
+                </button>
               </li>
             </ol>
           </li>
@@ -133,27 +141,6 @@ blocklyApp.WorkspaceTreeView = ng.core
       this.treeService = _treeService;
       this.utilsService = _utilsService;
     }],
-    deleteBlock: function(block) {
-      // If this is the top block, we should shift focus to the previous tree
-      var topBlocks = blocklyApp.workspace.topBlocks_;
-      for (var i = 0; i < topBlocks.length; i++) {
-        if (topBlocks[i].id == block.id) {
-          this.treeService.goToPreviousTree(this.parentId);
-          break;
-        }
-      }
-
-      // If this is not the top block, we should change the active descendant
-      // of the tree.
-      block.dispose(true);
-    },
-    getMarkedBlockCompatibilityHTMLText: function(isCompatible) {
-      return this.utilsService.getMarkedBlockCompatibilityHTMLText(isCompatible);
-    },
-    generateAriaLabelledByAttr: function() {
-      return this.utilsService.generateAriaLabelledByAttr.apply(
-          this, arguments);
-    },
     ngOnInit: function() {
       var elementsNeedingIds = ['blockSummary', 'listItem', 'label',
           'cutListItem', 'cutButton', 'copyListItem', 'copyButton',
@@ -172,6 +159,26 @@ blocklyApp.WorkspaceTreeView = ng.core
       this.idMap = this.utilsService.generateIds(elementsNeedingIds);
       this.idMap['parentList'] = this.generateParentListId();
     },
+    isCompatibleWithClipboard: function(connection) {
+      return this.clipboardService.isClipboardCompatibleWithConnection(
+          connection);
+    },
+    deleteBlock: function(block) {
+      // If this is the top block, shift focus to the previous tree.
+      var topBlocks = blocklyApp.workspace.topBlocks_;
+      for (var i = 0; i < topBlocks.length; i++) {
+        if (topBlocks[i].id == block.id) {
+          this.treeService.goToPreviousTree(this.parentId);
+          break;
+        }
+      }
+      // If this is not the top block, change the active descendant of the tree.
+      block.dispose(true);
+    },
+    generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
+      return this.utilsService.generateAriaLabelledByAttr(
+          mainLabel, secondLabel, isDisabled);
+    },
     generateParentListId: function() {
       if (this.isTopBlock) {
         return this.parentId + '-node0'
@@ -179,19 +186,11 @@ blocklyApp.WorkspaceTreeView = ng.core
         return this.utilsService.generateUniqueId();
       }
     },
-    getNoPreviousConnectionHTMLText: function(block) {
-      if (!block.previousConnection) {
-        return 'blockly-disabled';
-      } else {
-        return '';
-      }
+    hasPreviousConnection: function(block) {
+      return Boolean(block.previousConnection);
     },
-    getNoNextConnectionHTMLText: function(block) {
-      if (!block.nextConnection) {
-        return 'blockly-disabled';
-      } else {
-        return '';
-      }
+    hasNextConnection: function(block) {
+      return Boolean(block.nextConnection);
     },
     checkParentList: function(parentList) {
       blocklyApp.debug && console.log('setting parent list');

accessible/workspaceview.component.js

@@ -30,17 +30,19 @@ blocklyApp.WorkspaceView = ng.core
     <label>
       <h3 #workspaceTitle id="blockly-workspace-title">{{'WORKSPACE'|translate}}</h3>
     </label>
+
     <div id="blockly-workspace-toolbar" (keydown)="onWorkspaceToolbarKeypress($event, getActiveElementId())">
       <span *ngFor="#buttonConfig of toolbarButtonConfig">
-        <button (click)='buttonConfig.action()' class='blocklyTree'>
+        <button (click)="buttonConfig.action()" class="blocklyTree">
           {{buttonConfig.text}}
         </button>
       </span>
-      <button id='clear-workspace' (click)='workspace.clear()' disabled={{disableClearWorkspace()}}
-              [attr.aria-disabled]='disableClearWorkspace()' class='blocklyTree'>
+      <button id="clear-workspace" (click)="workspace.clear()"
+              [disabled]="isWorkspaceEmpty()" class="blocklyTree">
         {{'CLEAR_WORKSPACE'|translate}}
       </button>
     </div>
+
     <div *ngIf="workspace">
       <ol #tree id={{makeId(i)}} *ngFor="#block of workspace.topBlocks_; #i=index"
           tabIndex="0" role="group" class="blocklyTree" [attr.aria-labelledby]="workspaceTitle.id"
@@ -85,11 +87,7 @@ blocklyApp.WorkspaceView = ng.core
     makeId: function(index) {
       return 'blockly-workspace-tree' + index;
     },
-    disableClearWorkspace: function() {
-      if (blocklyApp.workspace.topBlocks_.length){
-        return undefined;
-      } else {
-        return 'blockly-disabled';
-      }
+    isWorkspaceEmpty: function() {
+      return !blocklyApp.workspace.topBlocks_.length;
     }
   });