scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move action menu below the block description. Edit the aria label to improve discoverability of the submenu.

Browse source
This commit is contained in:
Sean Lip 2016-08-04 19:28:36 -07:00
commit f7b0c1b5e6
3 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
accessible/app.component.js
View file

@ -49,6 +49,7 @@ blocklyApp.AppView = ng.core
<label aria-hidden="true" hidden id="blockly-argument-text">{{'TEXT'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-block-menu">{{'BLOCK_ACTION_LIST'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-block-summary">{{'BLOCK_SUMMARY'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-other-actions">{{'OTHER_ACTIONS'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-submenu-indicator">{{'SUBMENU_INDICATOR'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-toolbox-block">{{'TOOLBOX_BLOCK'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-workspace-block">{{'WORKSPACE_BLOCK'|translate}}</label>

1
accessible/messages.js
View file

@ -70,3 +70,4 @@ Blockly.Msg.BLOCK_MOVED_TO_MARKED_SPOT_MSB = 'Block moved to marked spot: ';
Blockly.Msg.TOOLBOX_BLOCK = 'toolbox block';
Blockly.Msg.WORKSPACE_BLOCK = 'workspace block';
Blockly.Msg.SUBMENU_INDICATOR = 'move right to view submenu';
Blockly.Msg.OTHER_ACTIONS = 'Other actions';

36
accessible/workspace-tree.component.js
View file

@ -34,23 +34,6 @@ blocklyApp.WorkspaceTreeComponent = ng.core
<label [id]="idMap['blockSummary']">{{getBlockDescription()}}</label>
<ol role="group">
<li [id]="idMap['listItem']" class="blocklyHasChildren" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', 'blockly-submenu-indicator')"
[attr.aria-level]="level + 1">
<label [id]="idMap['label']">{{'BLOCK_ACTION_LIST'|translate}}</label>
<ol role="group">
<li *ngFor="#buttonInfo of actionButtonsInfo"
[id]="idMap[buttonInfo.baseIdKey]" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[buttonInfo.baseIdKey + 'Button'], 'blockly-button', buttonInfo.isDisabled())"
[attr.aria-level]="level + 2">
<button [id]="idMap[buttonInfo.baseIdKey + 'Button']" (click)="buttonInfo.action()"
[disabled]="buttonInfo.isDisabled()">
{{buttonInfo.translationIdForText|translate}}
</button>
</li>
</ol>
</li>
<template ngFor #inputBlock [ngForOf]="block.inputList" #i="index">
<li role="treeitem" [id]="idMap['listItem' + i]" [attr.aria-level]="level + 1" *ngIf="inputBlock.fieldRow.length"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['fieldLabel' + i])">
@ -64,7 +47,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
</blockly-workspace-tree>
<li #inputList [id]="idMap['inputList' + i]" role="treeitem"
*ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-menu', idMap['inputMenuLabel' + i])"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['inputMenuLabel' + i], 'blockly-submenu-indicator')"
[attr.aria-level]="level + 1"
(keydown)="treeService.onKeypress($event, tree)">
<label [id]="idMap['inputMenuLabel' + i]">
@ -84,6 +67,23 @@ blocklyApp.WorkspaceTreeComponent = ng.core
</ol>
</li>
</template>
<li [id]="idMap['listItem']" class="blocklyHasChildren" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-other-actions', 'blockly-submenu-indicator')"
[attr.aria-level]="level + 1">
<label [id]="idMap['label']">{{'OTHER_ACTIONS'|translate}}</label>
<ol role="group">
<li *ngFor="#buttonInfo of actionButtonsInfo"
[id]="idMap[buttonInfo.baseIdKey]" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[buttonInfo.baseIdKey + 'Button'], 'blockly-button', buttonInfo.isDisabled())"
[attr.aria-level]="level + 2">
<button [id]="idMap[buttonInfo.baseIdKey + 'Button']" (click)="buttonInfo.action()"
[disabled]="buttonInfo.isDisabled()">
{{buttonInfo.translationIdForText|translate}}
</button>
</li>
</ol>
</li>
</ol>
</li>