Minor refactoring of the modal code (add comments, guard against invalid keystrokes, etc.).

accessible/block-options-modal.component.js

@@ -36,10 +36,10 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
         <h3 id="blockOptionsModalHeading">{{'BLOCK_OPTIONS'|translate}}</h3>
         <div role="document">
           <div class="blocklyModalButtonContainer"
-               *ngFor="#buttonInfo of actionButtonsInfo; #i=index">
-            <button [id]="getOptionId(i)"
+               *ngFor="#buttonInfo of actionButtonsInfo; #buttonIndex=index">
+            <button [id]="getOptionId(buttonIndex)"
                     (click)="buttonInfo.action(); hideModal();"
-                    [ngClass]="{activeButton: activeActionButtonIndex == i}">
+                    [ngClass]="{activeButton: activeActionButtonIndex == buttonIndex}">
               {{buttonInfo.translationIdForText|translate}}
             </button>
           </div>
@@ -110,6 +110,10 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
               evt.preventDefault();
               evt.stopPropagation();
 
+              if (that.activeActionButtonIndex == -1) {
+                return;
+              }
+
               var button = document.getElementById(
                   that.getOptionId(that.activeActionButtonIndex));
               if (that.activeActionButtonIndex <
@@ -150,7 +154,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
   },
   // Returns the ID for the corresponding option button.
   getOptionId: function(index) {
-    return 'modal-option-' + index;
+    return 'block-options-modal-option-' + index;
   },
   // Returns the ID for the "cancel" option button.
   getCancelOptionId: function() {

accessible/block-options-modal.service.js

@@ -26,6 +26,9 @@
 blocklyApp.BlockOptionsModalService = ng.core.Class({
   constructor: [function() {
     this.actionButtonsInfo = [];
+    // The aim of the pre-show hook is to populate the modal component with the
+    // information it needs to display the modal (e.g., which action buttons to
+    // display).
     this.preShowHook = function() {
       throw Error(
           'A pre-show hook must be defined for the block options modal ' +
@@ -35,8 +38,9 @@ blocklyApp.BlockOptionsModalService = ng.core.Class({
     this.onDismissCallback = null;
   }],
   registerPreShowHook: function(preShowHook) {
+    var that = this;
     this.preShowHook = function() {
-      preShowHook(this.actionButtonsInfo, this.onDismissCallback);
+      preShowHook(that.actionButtonsInfo, that.onDismissCallback);
     };
   },
   isModalShown: function() {

accessible/toolbox-modal.component.js

@@ -89,6 +89,8 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
           that.onSelectBlockCallback = onSelectBlockCallback;
           that.onDismissCallback = onDismissCallback;
 
+          // The indexes of the buttons corresponding to the first block in
+          // each category, as well as the 'cancel' button at the end.
           that.firstBlockIndexes = [];
           that.activeButtonIndex = -1;
           that.totalNumBlocks = 0;
@@ -126,11 +128,16 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
 
               that.focusOnOption(that.activeButtonIndex);
             },
-            // Enter key: selects an action, performs it, and closes the modal.
+            // Enter key: selects a block (or the 'Cancel' button), and closes
+            // the modal.
             '13': function(evt) {
               evt.preventDefault();
               evt.stopPropagation();
 
+              if (that.activeButtonIndex == -1) {
+                return;
+              }
+
               var button = document.getElementById(
                   that.getOptionId(that.activeButtonIndex));
 

accessible/toolbox-modal.service.js

@@ -42,6 +42,9 @@ blocklyApp.ToolboxModalService = ng.core.Class({
       this.selectedToolboxCategories = null;
       this.onSelectBlockCallback = null;
       this.onDismissCallback = null;
+      // The aim of the pre-show hook is to populate the modal component with
+      // the information it needs to display the modal (e.g., which categories
+      // and blocks to display).
       this.preShowHook = function() {
         throw Error(
             'A pre-show hook must be defined for the toolbox modal before it ' +
@@ -106,10 +109,11 @@ blocklyApp.ToolboxModalService = ng.core.Class({
     });
   },
   registerPreShowHook: function(preShowHook) {
+    var that = this;
     this.preShowHook = function() {
       preShowHook(
-          this.selectedToolboxCategories, this.onSelectBlockCallback,
-          this.onDismissCallback);
+          that.selectedToolboxCategories, that.onSelectBlockCallback,
+          that.onDismissCallback);
     };
   },
   isModalShown: function() {