diff --git a/accessible/field.component.js b/accessible/field.component.js
index 93a058857..7affe7e53 100644
--- a/accessible/field.component.js
+++ b/accessible/field.component.js
@@ -30,11 +30,13 @@ blocklyApp.FieldComponent = ng.core
template: `
+ [attr.aria-label]="disabled ? 'Disabled text field' : 'Press Enter to edit text'"
+ tabindex="-1">
+ [attr.aria-label]="disabled ? 'Disabled number field' : 'Press Enter to edit number'"
+ tabindex="-1">
@@ -43,7 +45,7 @@ blocklyApp.FieldComponent = ng.core
diff --git a/accessible/toolbox-tree.component.js b/accessible/toolbox-tree.component.js
index 0bd31ac8f..e5bbb75be 100644
--- a/accessible/toolbox-tree.component.js
+++ b/accessible/toolbox-tree.component.js
@@ -37,14 +37,14 @@ blocklyApp.ToolboxTreeComponent = ng.core
-
-
+
{{'COPY_TO_CLIPBOARD'|translate}}
@@ -52,7 +52,7 @@ blocklyApp.ToolboxTreeComponent = ng.core
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !canBeCopiedToMarkedConnection())"
[attr.aria-level]="level + 2">
+ [disabled]="!canBeCopiedToMarkedConnection()" tabindex="-1">
{{'COPY_TO_MARKED_SPOT'|translate}}
diff --git a/accessible/toolbox.component.js b/accessible/toolbox.component.js
index a20d6c152..a7d5acd93 100644
--- a/accessible/toolbox.component.js
+++ b/accessible/toolbox.component.js
@@ -30,7 +30,7 @@ blocklyApp.ToolboxComponent = ng.core
0" tabIndex="0"
+ *ngIf="toolboxCategories && toolboxCategories.length > 0" tabindex="0"
[attr.aria-labelledby]="toolboxTitle.id"
[attr.aria-activedescendant]="getActiveDescId()"
(keydown)="treeService.onKeypress($event, tree)">
diff --git a/accessible/tree.service.js b/accessible/tree.service.js
index ec175649c..0c463e191 100644
--- a/accessible/tree.service.js
+++ b/accessible/tree.service.js
@@ -82,21 +82,19 @@ blocklyApp.TreeService = ng.core
}
return null;
},
- focusOnNextTree_: function(treeId) {
+ getIdOfNextTree_: function(treeId) {
var trees = this.getAllTreeNodes_();
for (var i = 0; i < trees.length - 1; i++) {
if (trees[i].id == treeId) {
- trees[i + 1].focus();
return trees[i + 1].id;
}
}
return null;
},
- focusOnPreviousTree_: function(treeId) {
+ getIdOfPreviousTree_: function(treeId) {
var trees = this.getAllTreeNodes_();
for (var i = trees.length - 1; i > 0; i--) {
if (trees[i].id == treeId) {
- trees[i - 1].focus();
return trees[i - 1].id;
}
}
@@ -190,12 +188,11 @@ blocklyApp.TreeService = ng.core
if (e.keyCode == 9) {
// Tab key.
var destinationTreeId =
- e.shiftKey ? this.focusOnPreviousTree_(treeId) :
- this.focusOnNextTree_(treeId);
- this.notifyUserAboutCurrentTree_(destinationTreeId);
-
- e.preventDefault();
- e.stopPropagation();
+ e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
+ this.getIdOfNextTree_(treeId);
+ if (destinationTreeId) {
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
+ }
}
},
isButtonOrFieldNode_: function(node) {
@@ -260,16 +257,20 @@ blocklyApp.TreeService = ng.core
// For Esc and Tab keys, the focus is removed from the input field.
this.focusOnCurrentTree_(treeId);
- // In addition, for Tab keys, the user tabs to the previous/next tree.
if (e.keyCode == 9) {
var destinationTreeId =
- e.shiftKey ? this.focusOnPreviousTree_(treeId) :
- this.focusOnNextTree_(treeId);
- this.notifyUserAboutCurrentTree_(destinationTreeId);
+ e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
+ this.getIdOfNextTree_(treeId);
+ if (destinationTreeId) {
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
+ }
}
- e.preventDefault();
- e.stopPropagation();
+ // Allow Tab keypresses to go through.
+ if (e.keyCode == 27) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
}
} else {
// Outside an input field, Enter, Tab and navigation keys are all
@@ -302,14 +303,14 @@ blocklyApp.TreeService = ng.core
}
}
} else if (e.keyCode == 9) {
- // Tab key.
+ // Tab key. Note that allowing the event to propagate through is
+ // intentional.
var destinationTreeId =
- e.shiftKey ? this.focusOnPreviousTree_(treeId) :
- this.focusOnNextTree_(treeId);
- this.notifyUserAboutCurrentTree_(destinationTreeId);
-
- e.preventDefault();
- e.stopPropagation();
+ e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
+ this.getIdOfNextTree_(treeId);
+ if (destinationTreeId) {
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
+ }
} else if (e.keyCode >= 35 && e.keyCode <= 40) {
// End, home, and arrow keys.
if (e.keyCode == 35) {
diff --git a/accessible/workspace-tree.component.js b/accessible/workspace-tree.component.js
index 39e33b048..b024101d6 100644
--- a/accessible/workspace-tree.component.js
+++ b/accessible/workspace-tree.component.js
@@ -60,7 +60,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
[attr.aria-level]="level + 2">
+ [disabled]="fieldButtonInfo.isDisabled(inputBlock.connection)" tabindex="-1">
{{fieldButtonInfo.translationIdForText|translate}}
@@ -78,7 +78,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[buttonInfo.baseIdKey + 'Button'], 'blockly-button', buttonInfo.isDisabled())"
[attr.aria-level]="level + 2">
+ [disabled]="buttonInfo.isDisabled()" tabindex="-1">
{{buttonInfo.translationIdForText|translate}}
diff --git a/accessible/workspace.component.js b/accessible/workspace.component.js
index a2c940ec0..255735020 100644
--- a/accessible/workspace.component.js
+++ b/accessible/workspace.component.js
@@ -47,7 +47,7 @@ blocklyApp.WorkspaceComponent = ng.core