diff --git a/accessible/block-options-modal.component.js b/accessible/block-options-modal.component.js index a4e0f96c6..d68a04b70 100644 --- a/accessible/block-options-modal.component.js +++ b/accessible/block-options-modal.component.js @@ -27,14 +27,14 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({ selector: 'blockly-block-options-modal', template: `
+ (click)="dismissModal()"> - @@ -67,7 +68,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({ this.modalIsVisible = false; this.actionButtonsInfo = []; - this.activeActionButtonIndex = 0; + this.activeActionButtonIndex = -1; this.onDismissCallback = null; var that = this; @@ -75,17 +76,36 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({ function(newActionButtonsInfo, onDismissCallback) { that.modalIsVisible = true; that.actionButtonsInfo = newActionButtonsInfo; - that.activeActionButtonIndex = 0; + that.activeActionButtonIndex = -1; that.onDismissCallback = onDismissCallback; that.keyboardInputService.setOverride({ - // Tab key: no-op. + // Tab key: navigates to the previous or next item in the list. '9': function(evt) { evt.preventDefault(); evt.stopPropagation(); + + if (evt.shiftKey) { + // Move to the previous item in the list. + if (that.activeActionButtonIndex <= 0) { + that.activeActionButtonIndex = 0; + that.audioService.playOopsSound(); + } else { + that.activeActionButtonIndex--; + } + } else { + // Move to the next item in the list. + if (that.activeActionButtonIndex == + that.actionButtonsInfo.length) { + that.audioService.playOopsSound(); + } else { + that.activeActionButtonIndex++; + } + } + + that.focusOnOption(that.activeActionButtonIndex); }, - // Enter key: selects an action, performs it, and closes the - // modal. + // Enter key: selects an action, performs it, and closes the modal. '13': function(evt) { evt.preventDefault(); evt.stopPropagation(); @@ -96,38 +116,24 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({ that.actionButtonsInfo.length) { that.actionButtonsInfo[that.activeActionButtonIndex].action(); } else { - that.onDismissCallback(); + that.dismissModal(); } that.hideModal(); }, // Escape key: closes the modal. '27': function() { - that.onDismissCallback(); - that.hideModal(); + that.dismissModal(); }, - // Up key: navigates to the previous item in the list. + // Up key: no-op. '38': function(evt) { // Prevent the page from scrolling. evt.preventDefault(); - if (that.activeActionButtonIndex == 0) { - that.audioService.playOopsSound(); - } else { - that.activeActionButtonIndex--; - that.focusOnOption(that.activeActionButtonIndex); - } }, - // Down key: navigates to the next item in the list. + // Down key: no-op. '40': function(evt) { // Prevent the page from scrolling. evt.preventDefault(); - if (that.activeActionButtonIndex == - that.actionButtonsInfo.length) { - that.audioService.playOopsSound(); - } else { - that.activeActionButtonIndex++; - that.focusOnOption(that.activeActionButtonIndex); - } } }); @@ -150,6 +156,10 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({ getCancelOptionId: function() { return this.getOptionId(this.actionButtonsInfo.length); }, + dismissModal: function() { + this.onDismissCallback(); + this.hideModal(); + }, // Closes the modal. hideModal: function() { this.modalIsVisible = false; diff --git a/accessible/toolbox-modal.component.js b/accessible/toolbox-modal.component.js index 54149aa48..5e030db59 100644 --- a/accessible/toolbox-modal.component.js +++ b/accessible/toolbox-modal.component.js @@ -30,30 +30,29 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({ (click)="dismissModal()"> - `, @@ -78,7 +77,7 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({ this.onDismissCallback = null; this.firstBlockIndexes = []; - this.activeButtonIndex = 0; + this.activeButtonIndex = -1; this.totalNumBlocks = 0; var that = this; @@ -91,7 +90,7 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({ that.onDismissCallback = onDismissCallback; that.firstBlockIndexes = []; - that.activeButtonIndex = 0; + that.activeButtonIndex = -1; that.totalNumBlocks = 0; var cumulativeIndex = 0; @@ -102,12 +101,30 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({ that.firstBlockIndexes.push(cumulativeIndex); that.totalNumBlocks = cumulativeIndex; - that.activeButtonIndex = 0; that.keyboardInputService.setOverride({ - // Tab key: no-op. + // Tab key: navigates to the previous or next item in the list. '9': function(evt) { evt.preventDefault(); evt.stopPropagation(); + + if (evt.shiftKey) { + // Move to the previous item in the list. + if (that.activeButtonIndex <= 0) { + that.activeActionButtonIndex = 0; + that.audioService.playOopsSound(); + } else { + that.activeButtonIndex--; + } + } else { + // Move to the next item in the list. + if (that.activeButtonIndex == that.totalNumBlocks) { + that.audioService.playOopsSound(); + } else { + that.activeButtonIndex++; + } + } + + that.focusOnOption(that.activeButtonIndex); }, // Enter key: selects an action, performs it, and closes the modal. '13': function(evt) { @@ -135,25 +152,13 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({ '27': function() { that.dismissModal(); }, - // Up key: navigates to the previous item in the list. + // Up key: no-op. '38': function(evt) { evt.preventDefault(); - if (that.activeButtonIndex == 0) { - that.audioService.playOopsSound(); - } else { - that.activeButtonIndex--; - } - that.focusOnOption(that.activeButtonIndex); }, - // Down key: navigates to the next item in the list. + // Down key: no-op. '40': function(evt) { evt.preventDefault(); - if (that.activeButtonIndex == that.totalNumBlocks) { - that.audioService.playOopsSound(); - } else { - that.activeButtonIndex++; - } - that.focusOnOption(that.activeButtonIndex); } });