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() {
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() {
this.toolboxModalService.showToolboxModalForAttachToMarkedConnection(

View File

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

View File

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