CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-07 00:50:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up usage and formatting of aria-level (fixing an off-by-one error in the process).

Browse Source
This commit is contained in:
Sean Lip
2016-07-18 16:11:29 -07:00
parent d9a3569706
commit 0de625caf4
4 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
accessible/field.component.js
View File

@@ -30,18 +30,18 @@ blocklyApp.FieldComponent = ng.core
template: `
<li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextInput()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-input', idMap['input'])"
[attr.aria-level]="level" aria-selected=false>
[attr.aria-level]="level" aria-selected="false">
<input [id]="idMap['input']" [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
[disabled]="disabled">
</li>
<li [id]="idMap['listItem']" role="treeitem" *ngIf="isDropdown()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-menu', idMap['label'])"
[attr.aria-level]="level" aria-selected=false>
[attr.aria-level]="level" aria-selected="false">
<label [id]="idMap['label']">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
<ol role="group" [attr.aria-level]="level+1">
<ol role="group">
<li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')"
[attr.aria-level]="level+1" aria-selected=false>
[attr.aria-level]="level + 1" aria-selected="false">
<button [id]="idMap[optionValue + 'Button']" (click)="handleDropdownChange(field, optionValue)"
[disabled]="disabled">
{{optionText[optionValue]}}
@@ -50,12 +50,12 @@ blocklyApp.FieldComponent = ng.core
</ol>
</li>
<li [id]="idMap['listItem']" role="treeitem" *ngIf="isCheckbox()"
[attr.aria-level]="level" aria-selected=false>
[attr.aria-level]="level" aria-selected="false">
// Checkboxes are not currently supported.
</li>
<li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextField() && hasVisibleText()"
[attr.aria-labelledBy]="utilsService.generateAriaLabelledByAttr('blockly-argument-text', idMap['label'])"
[attr.aria-level]="level" aria-selected=false>
[attr.aria-level]="level" aria-selected="false">
<label [id]="idMap['label']">
{{field.getText()}}
</label>

20
accessible/toolbox-tree.component.js
View File

@@ -34,17 +34,16 @@ blocklyApp.ToolboxTreeComponent = ng.core
[attr.aria-selected]="index == 0 && tree.getAttribute('aria-activedescendant') == 'blockly-toolbox-tree-node0'"
[attr.aria-level]="level">
<label #blockSummaryLabel [id]="idMap['blockSummaryLabel']">{{block.toString()}}</label>
<ol role="group" *ngIf="displayBlockMenu || block.inputList.length > 0"
[attr.aria-level]="level+1">
<ol role="group" *ngIf="displayBlockMenu || block.inputList.length > 0">
<li #listItem class="blocklyHasChildren" [id]="idMap['listItem']"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummaryLabel'])"
*ngIf="displayBlockMenu" role="treeitem"
aria-selected=false [attr.aria-level]="level+1">
aria-selected="false" [attr.aria-level]="level + 1">
<label #label [id]="idMap['label']">{{'BLOCK_ACTION_LIST'|translate}}</label>
<ol role="group" *ngIf="displayBlockMenu" [attr.aria-level]="level+2">
<ol role="group" *ngIf="displayBlockMenu">
<li #workspaceCopy [id]="idMap['workspaceCopy']" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['workspaceCopyButton'], 'blockly-button')"
[attr.aria-level]="level+2" aria-selected=false>
[attr.aria-level]="level + 2" aria-selected="false">
<button #workspaceCopyButton [id]="idMap['workspaceCopyButton']"
(click)="copyToWorkspace(block)">
{{'COPY_TO_WORKSPACE'|translate}}
@@ -52,7 +51,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
</li>
<li #blockCopy [id]="idMap['blockCopy']" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockCopyButton'], 'blockly-button')"
[attr.aria-level]="level+2" aria-selected=false>
[attr.aria-level]="level + 2" aria-selected="false">
<button #blockCopyButton [id]="idMap['blockCopyButton']"
(click)="clipboardService.copy(block, true)">
{{'COPY_TO_CLIPBOARD'|translate}}
@@ -60,7 +59,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
</li>
<li #sendToSelected [id]="idMap['sendToSelected']" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !canBeCopiedToMarkedConnection(block))"
[attr.aria-level]="level+2" aria-selected=false>
[attr.aria-level]="level + 2" aria-selected="false">
<button #sendToSelectedButton
[id]="idMap['sendToSelectedButton']"
(click)="copyToMarked(block)"
@@ -72,18 +71,17 @@ blocklyApp.ToolboxTreeComponent = ng.core
</li>
<div *ngFor="#inputBlock of block.inputList; #i=index">
<blockly-field *ngFor="#field of inputBlock.fieldRow; #j=index"
[attr.aria-level]="level+1" [field]="field"
[level]="level+1" [disabled]="true">
[field]="field" [level]="level + 1" [disabled]="true">
</blockly-field>
<blockly-toolbox-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
[block]="inputBlock.connection.targetBlock()"
[displayBlockMenu]="false"
[level]="level+1">
[level]="level + 1">
</blockly-toolbox-tree>
<li #listItem1 [id]="idMap['listItem' + i]" role="treeitem"
*ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-text', idMap['listItem' + i + 'Label'])"
[attr.aria-level]="level+1" aria-selected=false>
[attr.aria-level]="level + 1" aria-selected="false">
<!--TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language.-->
<label #label [id]="idMap['listItem' + i + 'Label']">
{{utilsService.getInputTypeLabel(inputBlock.connection)}}

6
accessible/toolbox.component.js
View File

@@ -39,7 +39,7 @@ blocklyApp.ToolboxComponent = ng.core
[id]="idMap['Parent' + i]" role="treeitem"
[ngClass]="{blocklyHasChildren: true, blocklyActiveDescendant: tree.getAttribute('aria-activedescendant') == idMap['Parent' + i]}"
*ngFor="#category of toolboxCategories; #i=index"
aria-level="1" aria-selected=false
aria-level="1" aria-selected="false"
[attr.aria-label]="category.attributes.name.value">
<div *ngIf="category && category.attributes">
<label [id]="idMap['Label' + i]" #name>
@@ -47,7 +47,7 @@ blocklyApp.ToolboxComponent = ng.core
</label>
<ol role="group" *ngIf="getToolboxWorkspace(category).topBlocks_.length > 0">
<blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(category).topBlocks_"
[level]=2 [block]="block"
[level]="2" [block]="block"
[displayBlockMenu]="true"
[tree]="tree">
</blockly-toolbox-tree>
@@ -57,7 +57,7 @@ blocklyApp.ToolboxComponent = ng.core
</template>
<div *ngIf="!xmlHasCategories">
<blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(toolboxCategories[0]).topBlocks_; #i=index"
[level]=1 [block]="block"
[level]="1" [block]="block"
[displayBlockMenu]="true"
[index]="i" [tree]="tree"
[noCategories]="true"

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

@@ -33,12 +33,12 @@ blocklyApp.WorkspaceTreeComponent = ng.core
[attr.aria-level]="level" aria-selected="false">
<label [id]="idMap['blockSummary']">{{block.toString()}}</label>
<ol role="group" [attr.aria-level]="level + 1">
<ol role="group">
<li [id]="idMap['listItem']" class="blocklyHasChildren" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummary'])"
[attr.aria-level]="level+1" aria-selected="false">
[attr.aria-level]="level + 1" aria-selected="false">
<label [id]="idMap['label']">{{'BLOCK_ACTION_LIST'|translate}}</label>
<ol role="group" [attr.aria-level]="level + 2">
<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())"
@@ -52,9 +52,9 @@ blocklyApp.WorkspaceTreeComponent = ng.core
</li>
<div *ngFor="#inputBlock of block.inputList; #i = index">
<blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field"></blockly-field>
<blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field" [level]="level + 1"></blockly-field>
<blockly-workspace-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
[block]="inputBlock.connection.targetBlock()" [level]="level"
[block]="inputBlock.connection.targetBlock()" [level]="level + 1"
[tree]="tree">
</blockly-workspace-tree>
<li #inputList [attr.aria-level]="level + 1" [id]="idMap['inputList' + i]"
@@ -62,15 +62,15 @@ blocklyApp.WorkspaceTreeComponent = ng.core
*ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()" (keydown)="treeService.onKeypress($event, tree)">
<!-- TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language. -->
<label [id]="idMap['inputMenuLabel' + i]"> {{utilsService.getInputTypeLabel(inputBlock.connection)}} {{utilsService.getBlockTypeLabel(inputBlock)}} needed: </label>
<ol role="group" [attr.aria-level]="level + 2">
<ol role="group">
<li [id]="idMap['markSpot' + i]" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markButton' + i], 'blockly-button')"
[attr.aria-level]="level + 2" aria-selected=false>
[attr.aria-level]="level + 2" aria-selected="false">
<button [id]="idMap['markSpotButton + i']" (click)="clipboardService.markConnection(inputBlock.connection)">{{'MARK_THIS_SPOT'|translate}}</button>
</li>
<li [id]="idMap['paste' + i]" role="treeitem"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteButton' + i], 'blockly-button', !isCompatibleWithClipboard(inputBlock.connection))"
[attr.aria-level]="level+2" aria-selected=false>
[attr.aria-level]="level + 2" aria-selected="false">
<button [id]="idMap['pasteButton' + i]" (click)="clipboardService.pasteFromClipboard(inputBlock.connection)"
[disabled]="!isCompatibleWithClipboard(inputBlock.connection)">
{{'PASTE'|translate}}