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

Ensure aria-labels for workspace work correctly with Voiceover on Mac.

Browse Source
This commit is contained in:
Sean Lip
2016-07-28 18:29:44 -07:00
parent f7bdf1168d
commit 47888b806f
3 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
accessible/field.component.js
View File

@@ -28,17 +28,17 @@ blocklyApp.FieldComponent = ng.core
.Component({
selector: 'blockly-field',
template: `
<input *ngIf="isTextInput()" [id]="idMap['input']"
<input *ngIf="isTextInput()" [id]="mainFieldId"
[ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
[disabled]="disabled" type="text" aria-label="Press Enter to edit text">
<input *ngIf="isNumberInput()" [id]="idMap['input']"
<input *ngIf="isNumberInput()" [id]="mainFieldId"
[ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
[disabled]="disabled" type="number" aria-label="Press Enter to edit number">
<div *ngIf="isDropdown()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-menu', idMap['label'])">
<label [id]="idMap['label']">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
<label [id]="mainFieldId">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
<ol role="group">
<li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')">
@@ -54,11 +54,11 @@ blocklyApp.FieldComponent = ng.core
// Checkboxes are not currently supported.
</div>
<label [id]="idMap['label']" *ngIf="isTextField() && hasVisibleText()">
<label [id]="mainFieldId" *ngIf="isTextField() && hasVisibleText()">
{{field.getText()}}
</label>
`,
inputs: ['field', 'index', 'parentId', 'disabled'],
inputs: ['field', 'index', 'parentId', 'disabled', 'mainFieldId'],
pipes: [blocklyApp.TranslatePipe]
})
.Class({
@@ -78,17 +78,12 @@ blocklyApp.FieldComponent = ng.core
return mainLabel + ' ' + secondLabel;
},
generateElementNames: function() {
var elementNames = ['listItem'];
if (this.isTextInput() || this.isNumberInput()) {
elementNames.push('input');
} else if (this.isDropdown()) {
elementNames.push('label');
var elementNames = [];
if (this.isDropdown()) {
var keys = this.getOptions();
for (var i = 0; i < keys.length; i++){
elementNames.push(keys[i], keys[i] + 'Button');
}
} else if (this.isTextField() && this.hasVisibleText()) {
elementNames.push('label');
}
return elementNames;
},

2
accessible/utils.service.js
View File

@@ -41,7 +41,7 @@ blocklyApp.UtilsService = ng.core
return idMap;
},
generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
var attrValue = mainLabel + ' ' + secondLabel;
var attrValue = mainLabel + (secondLabel ? ' ' + secondLabel : '');
if (isDisabled) {
attrValue += ' blockly-disabled';
}

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

@@ -52,8 +52,9 @@ blocklyApp.WorkspaceTreeComponent = ng.core
</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">
<blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field">
<li role="treeitem" [id]="idMap['listItem' + i]" [attr.aria-level]="level + 1" *ngIf="inputBlock.fieldRow.length"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['fieldLabel' + i])">
<blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field" [mainFieldId]="idMap['fieldLabel' + i]">
</blockly-field>
</li>
@@ -72,7 +73,7 @@ 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'], 'blockly-button', fieldButtonInfo.isDisabled(inputBlock.connection))"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[fieldButtonInfo.baseIdKey + 'Button' + i], 'blockly-button', fieldButtonInfo.isDisabled(inputBlock.connection))"
[attr.aria-level]="level + 2">
<button [id]="idMap[fieldButtonInfo.baseIdKey + 'Button' + i]"
(click)="fieldButtonInfo.action(inputBlock.connection)"
@@ -329,7 +330,8 @@ blocklyApp.WorkspaceTreeComponent = ng.core
for (var i = 0; i < this.block.inputList.length; i++) {
var inputBlock = this.block.inputList[i];
that.idKeys.push(
'inputList' + i, 'inputMenuLabel' + i, 'listItem' + i);
'inputList' + i, 'inputMenuLabel' + i, 'listItem' + i,
'fieldLabel' + i);
}
},
ngDoCheck: function() {