Add a special aria-label for 'copy to marked spot' button to indicate the cause of its being disabled.

This commit is contained in:
Sean Lip
2016-10-10 17:47:15 -07:00
parent bd9f5743d3
commit e1ae3f4aa8
3 changed files with 13 additions and 2 deletions

View File

@@ -61,6 +61,9 @@ blocklyApp.ClipboardService = ng.core
return this.markedConnection_.getSourceBlock();
}
},
isAnyConnectionMarked: function() {
return Boolean(this.markedConnection_);
},
isMovableToMarkedConnection: function(block) {
// It should not be possible to move any ancestor of the block containing
// the marked spot to the marked spot.

View File

@@ -32,7 +32,7 @@ Blockly.Msg.WORKSPACE_BLOCK = 'workspace block. Move right to view submenu.';
Blockly.Msg.CLEAR_WORKSPACE = 'Erase Workspace';
Blockly.Msg.COPY_TO_CLIPBOARD = 'Copy to clipboard.';
Blockly.Msg.COPY_TO_MARKED_SPOT = 'Copy to link.';
Blockly.Msg.COPY_TO_MARKED_SPOT = 'Attach to link.';
Blockly.Msg.COPY_TO_WORKSPACE = 'Add to workspace.';
Blockly.Msg.COPY_BLOCK = 'Copy block.';

View File

@@ -42,7 +42,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
</button>
</li>
<li [id]="idMap['sendToSelected']" role="treeitem" *ngIf="!isWorkspaceEmpty()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button')"
[attr.aria-label]="getAriaLabelForCopyToMarkedSpotButton()"
[attr.aria-level]="level + 1"
[attr.aria-disabled]="!canBeCopiedToMarkedConnection()">
<button [id]="idMap['sendToSelectedButton']" (click)="copyToMarkedSpot()"
@@ -105,6 +105,14 @@ blocklyApp.ToolboxTreeComponent = ng.core
});
}
},
getAriaLabelForCopyToMarkedSpotButton: function() {
// TODO(sll): Find a way to make this more like the other buttons.
var ariaLabel = 'Attach to link button';
if (!this.clipboardService.isAnyConnectionMarked()) {
ariaLabel += ', unavailable. Add a link in the workspace first.';
}
return ariaLabel;
},
isWorkspaceEmpty: function() {
return this.utilsService.isWorkspaceEmpty();
},