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

Tidy up messages, update aria labels, add punctuation.

Browse source
This commit is contained in:
Sean Lip 2016-09-22 17:04:28 -07:00
parent 44a2edead1
commit cd461cd6b6
6 changed files with 53 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

19
accessible/app.component.js
View file

@ -34,23 +34,14 @@ blocklyApp.AppView = ng.core
</div>
<div>
<blockly-toolbox>{{'TOOLBOX_LOAD'|translate}}</blockly-toolbox>
<blockly-workspace>{{'WORKSPACE_LOAD'|translate}}</blockly-workspace>
<blockly-toolbox></blockly-toolbox>
<blockly-workspace></blockly-workspace>
</div>
<label aria-hidden="true" hidden id="blockly-argument-block-menu">{{'ARGUMENT_BLOCK_ACTION_LIST'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-argument-input">{{'ARGUMENT_INPUT'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-argument-menu">{{'ARGUMENT_OPTIONS_LIST'|translate}}</label>
<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-more-options">{{'MORE_OPTIONS'|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}} {{'SUBMENU_INDICATOR'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-workspace-block">{{'WORKSPACE_BLOCK'|translate}} {{'SUBMENU_INDICATOR'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-button">{{'BUTTON'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-disabled">{{'DISABLED'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-menu">{{'OPTION_LIST'|translate}}</label>
<label aria-hidden="true" hidden id="blockly-more-options">{{'MORE_OPTIONS'|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>
`,
directives: [blocklyApp.ToolboxComponent, blocklyApp.WorkspaceComponent],
pipes: [blocklyApp.TranslatePipe],

67
accessible/messages.js
View file

@ -19,55 +19,40 @@
*/
/**
* @fileoverview Accessible strings.
* @fileoverview Translatable string constants for Accessible Blockly.
* @author madeeha@google.com (Madeeha Ghori)
*/
'use strict';
// The following are all Accessible Blockly strings.
// None of the alert messages have periods on them. This is because the user
// will have their punctuation setting set to 'all', which will result in any
// punctuation being read out to them.
Blockly.Msg.RUN_CODE = 'Run Code';
Blockly.Msg.CLEAR_WORKSPACE = 'Clear Workspace';
Blockly.Msg.BLOCK_ACTION_LIST = 'block action list';
Blockly.Msg.CUT_BLOCK = 'cut block';
Blockly.Msg.COPY_BLOCK = 'copy block';
Blockly.Msg.PASTE_BEFORE = 'paste before';
Blockly.Msg.PASTE_AFTER = 'paste after';
Blockly.Msg.MARK_SPOT_BEFORE = 'mark spot before';
Blockly.Msg.MARK_SPOT_AFTER = 'mark spot after';
Blockly.Msg.MOVE_TO_MARKED_SPOT = 'move to marked spot';
Blockly.Msg.DELETE = 'delete';
Blockly.Msg.MARK_THIS_SPOT = 'mark this spot';
Blockly.Msg.PASTE = 'paste';
Blockly.Msg.TOOLBOX_LOAD_MSG = 'Loading Toolbox…';
Blockly.Msg.WORKSPACE_LOAD_MSG = 'Loading Workspace…';
Blockly.Msg.BLOCK_SUMMARY = 'block summary';
Blockly.Msg.OPTION_LIST = 'option list';
Blockly.Msg.ARGUMENT_OPTIONS_LIST = 'argument options list';
Blockly.Msg.ARGUMENT_INPUT = 'argument input';
Blockly.Msg.ARGUMENT_BLOCK_ACTION_LIST = 'argument block action list';
Blockly.Msg.TEXT = 'text';
Blockly.Msg.BUTTON = 'button';
Blockly.Msg.DISABLED = 'disabled';
Blockly.Msg.CURRENT_ARGUMENT_VALUE = 'current argument value:';
Blockly.Msg.COPY_TO_WORKSPACE = 'create new group with this block';
Blockly.Msg.COPY_TO_CLIPBOARD = 'copy to clipboard';
Blockly.Msg.COPY_TO_MARKED_SPOT = 'copy to marked spot';
Blockly.Msg.TOOLBOX = 'Toolbox';
Blockly.Msg.WORKSPACE = 'Workspace';
Blockly.Msg.TOOLBOX_BLOCK = 'toolbox block. Move right to view submenu.';
Blockly.Msg.WORKSPACE_BLOCK = 'workspace block. Move right to view submenu.';
Blockly.Msg.CLEAR_WORKSPACE = 'Clear Workspace';
Blockly.Msg.RUN_CODE = 'Run Code';
Blockly.Msg.COPY_TO_MARKED_SPOT = 'Copy to marked spot.';
Blockly.Msg.COPY_TO_WORKSPACE = 'Create new group with this block.';
Blockly.Msg.DELETE = 'Delete.';
Blockly.Msg.MARK_SPOT_BEFORE = 'Mark spot before.';
Blockly.Msg.MARK_SPOT_AFTER = 'Mark spot after.';
Blockly.Msg.MARK_THIS_SPOT = 'Mark this spot.';
Blockly.Msg.MOVE_TO_MARKED_SPOT = 'Move to marked spot.';
Blockly.Msg.PASTE = 'Paste.';
Blockly.Msg.ANY = 'any';
Blockly.Msg.BUTTON = 'Button.';
Blockly.Msg.FOR = 'for';
Blockly.Msg.STATEMENT = 'statement';
Blockly.Msg.VALUE = 'value';
Blockly.Msg.CUT_BLOCK_MSG = 'Cut block: ';
Blockly.Msg.COPIED_BLOCK_MSG = 'copied';
Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG = 'pasted';
Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG = 'moved to marked spot';
Blockly.Msg.MARKED_SPOT_MSG = 'Marked spot';
Blockly.Msg.BLOCK_OPTIONS = 'Block options: ';
Blockly.Msg.CURRENT_ARGUMENT_VALUE = 'Current argument value: ';
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.BLOCK_OPTIONS = 'Block options';
Blockly.Msg.COPIED_BLOCK_MSG = 'Copied: ';
Blockly.Msg.MARKED_SPOT_MSG = 'Marked spot: ';
Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG = 'Pasted: ';
Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG = 'Moved to marked spot: ';

15
accessible/toolbox-tree.component.js
View file

@ -30,13 +30,14 @@ blocklyApp.ToolboxTreeComponent = ng.core
template: `
<li [id]="idMap['toolboxBlockRoot']" role="treeitem"
[ngClass]="{blocklyHasChildren: displayBlockMenu}"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockSummaryLabel'], 'blockly-toolbox-block')"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockSummary'], 'blockly-toolbox-block')"
[attr.aria-level]="level">
<label #blockSummaryLabel [id]="idMap['blockSummaryLabel']">{{getBlockDescription()}}</label>
<label #blockSummary [id]="idMap['blockSummary']">{{getBlockDescription()}}</label>
<ol role="group" *ngIf="displayBlockMenu">
<li [id]="idMap['sendToSelected']" role="treeitem" *ngIf="!isWorkspaceEmpty()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !canBeCopiedToMarkedConnection())"
[attr.aria-level]="level + 1">
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button')"
[attr.aria-level]="level + 1"
[attr.aria-disabled]="!canBeCopiedToMarkedConnection()">
<button [id]="idMap['sendToSelectedButton']" (click)="copyToMarkedSpot()"
[disabled]="!canBeCopiedToMarkedConnection()" tabindex="-1">
{{'COPY_TO_MARKED_SPOT'|translate}}
@ -72,7 +73,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
this.utilsService = _utilsService;
}],
ngOnInit: function() {
var idKeys = ['toolboxBlockRoot', 'blockSummaryLabel'];
var idKeys = ['toolboxBlockRoot', 'blockSummary'];
if (this.displayBlockMenu) {
idKeys = idKeys.concat([
'workspaceCopy', 'workspaceCopyButton', 'sendToSelected',
@ -103,9 +104,9 @@ blocklyApp.ToolboxTreeComponent = ng.core
getBlockDescription: function() {
return this.utilsService.getBlockDescription(this.block);
},
generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
generateAriaLabelledByAttr: function(mainLabel, secondLabel) {
return this.utilsService.generateAriaLabelledByAttr(
mainLabel, secondLabel, isDisabled);
mainLabel, secondLabel);
},
canBeCopiedToMarkedConnection: function() {
return this.clipboardService.canBeCopiedToMarkedConnection(this.block);

5
accessible/toolbox.component.js
View file

@ -28,7 +28,7 @@ blocklyApp.ToolboxComponent = ng.core
selector: 'blockly-toolbox',
template: `
<div class="blocklyToolboxColumn">
<h3 #toolboxTitle id="blockly-toolbox-title">Toolbox</h3>
<h3 #toolboxTitle id="blockly-toolbox-title">{{'TOOLBOX'|translate}}</h3>
<ol #tree
id="blockly-toolbox-tree" role="tree" class="blocklyTree"
*ngIf="toolboxCategories && toolboxCategories.length > 0" tabindex="0"
@ -67,7 +67,8 @@ blocklyApp.ToolboxComponent = ng.core
</ol>
</div>
`,
directives: [blocklyApp.ToolboxTreeComponent]
directives: [blocklyApp.ToolboxTreeComponent],
pipes: [blocklyApp.TranslatePipe]
})
.Class({
constructor: [

8
accessible/utils.service.js
View file

@ -40,12 +40,8 @@ blocklyApp.UtilsService = ng.core
}
return idMap;
},
generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
var attrValue = mainLabel + (secondLabel ? ' ' + secondLabel : '');
if (isDisabled) {
attrValue += ' blockly-disabled';
}
return attrValue;
generateAriaLabelledByAttr: function(mainLabel, secondLabel) {
return mainLabel + (secondLabel ? ' ' + secondLabel : '');
},
getInputTypeLabel: function(connection) {
// Returns the input type name, or 'any' if any official input type

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

@ -29,7 +29,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
selector: 'blockly-workspace-tree',
template: `
<li [id]="idMap['blockRoot']" role="treeitem" class="blocklyHasChildren"
[attr.aria-label]="getBlockDescription() + ' ' + ('WORKSPACE_BLOCK'|translate) + ' ' + ('SUBMENU_INDICATOR'|translate)"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockSummary'], 'blockly-workspace-block')"
[attr.aria-level]="level">
<label [id]="idMap['blockSummary']">{{getBlockDescription()}}</label>
@ -56,8 +56,9 @@ blocklyApp.WorkspaceTreeComponent = ng.core
<ol role="group">
<li *ngFor="#fieldButtonInfo of fieldButtonsInfo"
[id]="idMap[fieldButtonInfo.baseIdKey + i]" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[fieldButtonInfo.baseIdKey + 'Button' + i], 'blockly-button', fieldButtonInfo.isDisabled(inputBlock.connection))"
[attr.aria-level]="level + 2">
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[fieldButtonInfo.baseIdKey + 'Button' + i], 'blockly-button')"
[attr.aria-level]="level + 2"
[attr.aria-disabled]="fieldButtonInfo.isDisabled(inputBlock.connection)">
<button [id]="idMap[fieldButtonInfo.baseIdKey + 'Button' + i]"
(click)="fieldButtonInfo.action(inputBlock.connection)"
[disabled]="fieldButtonInfo.isDisabled(inputBlock.connection)" tabindex="-1">
@ -75,8 +76,9 @@ blocklyApp.WorkspaceTreeComponent = ng.core
<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">
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[buttonInfo.baseIdKey + 'Button'], 'blockly-button')"
[attr.aria-level]="level + 2"
[attr.aria-disabled]="buttonInfo.isDisabled()">
<button [id]="idMap[buttonInfo.baseIdKey + 'Button']" (click)="buttonInfo.action()"
[disabled]="buttonInfo.isDisabled()" tabindex="-1">
{{buttonInfo.translationIdForText|translate}}
@ -278,9 +280,9 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}
});
},
generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
generateAriaLabelledByAttr: function(mainLabel, secondLabel) {
return this.utilsService.generateAriaLabelledByAttr(
mainLabel, secondLabel, isDisabled);
mainLabel, secondLabel);
},
isCompatibleWithClipboard: function(connection) {
return this.clipboardService.isCompatibleWithClipboard(connection);