Add an aria-describedby to the 'create new block group...' button in the workspace to give more context.

This commit is contained in:
Sean Lip
2016-12-08 19:23:40 -08:00
parent 5960aa8461
commit 521909b2dd
3 changed files with 10 additions and 4 deletions

View File

@@ -90,7 +90,11 @@ blocklyApp.SidebarComponent = ng.core.Component({
}, },
clearWorkspace: function() { clearWorkspace: function() {
blocklyApp.workspace.clear(); blocklyApp.workspace.clear();
document.getElementById(this.ID_FOR_CREATE_NEW_GROUP_BUTTON).focus(); // The timeout is needed in order to give the blocks time to be cleared
// from the workspace, and for the 'workspace is empty' button to show up.
setTimeout(function() {
document.getElementById(blocklyApp.ID_FOR_EMPTY_WORKSPACE_BTN).focus();
}, 50);
}, },
showToolboxModalForAttachToMarkedConnection: function() { showToolboxModalForAttachToMarkedConnection: function() {
this.toolboxModalService.showToolboxModalForAttachToMarkedConnection( this.toolboxModalService.showToolboxModalForAttachToMarkedConnection(

View File

@@ -26,6 +26,7 @@
*/ */
var blocklyApp = {}; var blocklyApp = {};
blocklyApp.ID_FOR_EMPTY_WORKSPACE_BTN = 'blocklyEmptyWorkspaceBtn';
blocklyApp.UtilsService = ng.core.Class({ blocklyApp.UtilsService = ng.core.Class({
constructor: [function() {}], constructor: [function() {}],

View File

@@ -42,11 +42,12 @@ blocklyApp.WorkspaceComponent = ng.core.Component({
</ol> </ol>
<span *ngIf="workspace.topBlocks_.length === 0"> <span *ngIf="workspace.topBlocks_.length === 0">
<p> <p id="emptyWorkspaceBtnLabel">
There are no blocks in the workspace. There are no blocks in the workspace.
<button (click)="showToolboxModalForCreateNewGroup()" <button (click)="showToolboxModalForCreateNewGroup()"
class="blocklyWorkspaceFocusTarget" class="blocklyWorkspaceFocusTarget"
id="{{ID_FOR_EMPTY_WORKSPACE_BTN}}"> id="{{ID_FOR_EMPTY_WORKSPACE_BTN}}"
aria-describedby="emptyWorkspaceBtnLabel">
Create new block group... Create new block group...
</button> </button>
</p> </p>
@@ -68,7 +69,7 @@ blocklyApp.WorkspaceComponent = ng.core.Component({
this.treeService = treeService; this.treeService = treeService;
this.workspace = blocklyApp.workspace; this.workspace = blocklyApp.workspace;
this.ID_FOR_EMPTY_WORKSPACE_BTN = 'blocklyEmptyWorkspaceButton'; this.ID_FOR_EMPTY_WORKSPACE_BTN = blocklyApp.ID_FOR_EMPTY_WORKSPACE_BTN;
} }
], ],
getActiveDescId: function(treeId) { getActiveDescId: function(treeId) {