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

Change dropdowns to select fields instead of lists of buttons.

Browse Source
This commit is contained in:
Sean Lip
2016-12-01 14:56:09 -08:00
parent 0b7da4b576
commit e13ce31282
3 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
accessible/field-segment.component.js
View File

@@ -49,21 +49,15 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
</template>
<template [ngIf]="isDropdown()">
<label [id]="mainFieldId" [attr.aria-label]="getFieldDescription() + ' Move right to view submenu'">
{{getFieldDescription()}}
</label>
<ol role="group">
<li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-translate-button')"
[attr.aria-level]="level" [attr.aria-selected]="mainField.getValue() == optionValue"
class="blocklyDropdownListItem">
<button [id]="idMap[optionValue + 'Button']" (click)="handleDropdownChange(mainField, optionValue)"
[disabled]="disabled" tabindex="-1"
[attr.aria-label]="optionText[optionValue] + ' Press Enter to select this value'">
{{optionText[optionValue]}}
</button>
</li>
</ol>
{{getPrefixText()}}
<select [id]="mainFieldId" [name]="mainFieldId" tabindex="-1"
[ngModel]="mainField.getValue()"
(ngModelChange)="handleDropdownChange(mainField, $event)">
<option *ngFor="#optionValue of getOptions()" value="{{optionValue}}"
[selected]="mainField.getValue() == optionValue">
{{optionText[optionValue]}}
</option>
</select>
</template>
</template>
`,

4
accessible/media/accessible.css
View File

@@ -43,8 +43,10 @@
.blocklyTree .blocklyActiveDescendant > div > label,
.blocklyActiveDescendant > button,
.blocklyActiveDescendant > input,
.blocklyActiveDescendant > select,
.blocklyActiveDescendant > blockly-field-segment > label,
.blocklyActiveDescendant > blockly-field-segment > input {
.blocklyActiveDescendant > blockly-field-segment > input,
.blocklyActiveDescendant > blockly-field-segment > select {
outline: 2px dotted #00f;
}

9
accessible/tree.service.js
View File

@@ -180,9 +180,6 @@ blocklyApp.TreeService = ng.core.Class({
}
}
},
isButtonOrFieldNode_: function(node) {
return ['BUTTON', 'INPUT'].indexOf(node.tagName) != -1;
},
getNextActiveDescWhenBlockIsDeleted: function(blockRootNode) {
// Go up a level, if possible.
var nextNode = blockRootNode.parentNode;
@@ -426,7 +423,7 @@ blocklyApp.TreeService = ng.core.Class({
// Enter key. The user wants to interact with a button, interact with
// an input field, or open the block options modal.
// Algorithm to find the field: do a DFS through the children until
// we find an INPUT or BUTTON element (in which case we use it).
// we find an INPUT, BUTTON or SELECT element (in which case we use it).
// Truncate the search at child LI elements.
var found = false;
var dfsStack = Array.from(activeDesc.children);
@@ -444,6 +441,10 @@ blocklyApp.TreeService = ng.core.Class({
'Type a value, then press Escape to exit');
found = true;
break;
} else if (currentNode.tagName == 'SELECT') {
currentNode.focus();
found = true;
return;
} else if (currentNode.tagName == 'LI') {
continue;
}