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
  • -
  • -
  • @@ -52,7 +52,7 @@ blocklyApp.ToolboxTreeComponent = ng.core [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !canBeCopiedToMarkedConnection())" [attr.aria-level]="level + 2"> 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

    Toolbox

      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"> @@ -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"> 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