From 09980308eccdfa6b8e9b3a30119c35a49223b774 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Mon, 5 Dec 2016 18:12:48 -0800
Subject: [PATCH] Remove premature focus on buttons in modal dialogs, since
 this prevents readout of the dialog text.

---
 accessible/block-options-modal.component.js | 19 +++++++++++--------
 accessible/toolbox-modal.component.js       | 13 +++++++------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/accessible/block-options-modal.component.js b/accessible/block-options-modal.component.js
index 265c748a3..a4e0f96c6 100644
--- a/accessible/block-options-modal.component.js
+++ b/accessible/block-options-modal.component.js
@@ -26,22 +26,26 @@
 blocklyApp.BlockOptionsModalComponent = ng.core.Component({
   selector: 'blockly-block-options-modal',
   template: `
-    <div *ngIf="modalIsVisible" id="blockOptionsModal" role="dialog" tabindex="-1">
-      <div (click)="hideModal()" class="blocklyModalCurtain">
-        <!-- The $event.stopPropagation() here prevents the modal from
-        closing when its interior is clicked. -->
-        <div class="blocklyModal" (click)="$event.stopPropagation()" role="document">
+    <div *ngIf="modalIsVisible" class="blocklyModalCurtain"
+         (click)="hideModal()">
+      <!-- $event.stopPropagation() prevents the modal from closing when its
+      interior is clicked. -->
+      <div id="blockOptionsModal" class="blocklyModal" role="dialog"
+           (click)="$event.stopPropagation()" tabindex="-1">
+        <div role="document">
           <h3>{{'BLOCK_OPTIONS'|translate}}</h3>
 
           <div class="blocklyModalButtonContainer"
                *ngFor="#buttonInfo of actionButtonsInfo; #i=index">
-            <button [id]="getOptionId(i)" (click)="buttonInfo.action(); hideModal();"
+            <button [id]="getOptionId(i)"
+                    (click)="buttonInfo.action(); hideModal();"
                     [ngClass]="{activeButton: activeActionButtonIndex == i}">
               {{buttonInfo.translationIdForText|translate}}
             </button>
           </div>
           <div class="blocklyModalButtonContainer">
-            <button [id]="getCancelOptionId()" (click)="hideModal()"
+            <button [id]="getCancelOptionId()"
+                    (click)="hideModal()"
                     [ngClass]="{activeButton: activeActionButtonIndex == actionButtonsInfo.length}">
               {{'CANCEL'|translate}}
             </button>
@@ -129,7 +133,6 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
 
           setTimeout(function() {
             document.getElementById('blockOptionsModal').focus();
-            that.focusOnOption(that.activeActionButtonIndex);
           }, 150);
         }
       );
diff --git a/accessible/toolbox-modal.component.js b/accessible/toolbox-modal.component.js
index 1d4f404dd..54149aa48 100644
--- a/accessible/toolbox-modal.component.js
+++ b/accessible/toolbox-modal.component.js
@@ -26,11 +26,13 @@
 blocklyApp.ToolboxModalComponent = ng.core.Component({
   selector: 'blockly-toolbox-modal',
   template: `
-    <div *ngIf="modalIsVisible" id="toolboxModal" role="dialog" tabindex="-1">
-      <div (click)="dismissModal()" class="blocklyModalCurtain">
-        <!-- The $event.stopPropagation() here prevents the modal from
-        closing when its interior is clicked. -->
-        <div class="blocklyModal" (click)="$event.stopPropagation()" role="document">
+    <div *ngIf="modalIsVisible" class="blocklyModalCurtain"
+         (click)="dismissModal()">
+      <!-- $event.stopPropagation() prevents the modal from closing when its
+      interior is clicked. -->
+      <div id="toolboxModal" class="blocklyModal" role="dialog"
+           (click)="$event.stopPropagation()" tabindex="-1">
+        <div role="document">
           <h3>{{'SELECT_A_BLOCK'|translate}}</h3>
 
           <div *ngFor="#toolboxCategory of toolboxCategories; #categoryIndex=index">
@@ -157,7 +159,6 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
 
           setTimeout(function() {
             document.getElementById('toolboxModal').focus();
-            that.focusOnOption(that.activeButtonIndex);
           }, 150);
         }
       );