From 7336d03538629d644e7b145d56bb36bf1091c159 Mon Sep 17 00:00:00 2001
From: CoryDCode <corydiers@google.com>
Date: Thu, 1 Jun 2017 17:30:50 -0700
Subject: [PATCH] =?UTF-8?q?Fixing=20modals=20so=20they're=20announced=20on?=
 =?UTF-8?q?=20focus,=20and=20changing=20variables=20t=E2=80=A6=20(#1030)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fixing modals so they're announced on focus, and changing variables to only react to enter, not onChange.

* Adding a temp index.

* Whoops - added it in the wrong spot.
---
 accessible/field-segment.component.js         | 10 +++++-----
 accessible/variable-add-modal.component.js    |  4 +++-
 accessible/variable-modal.service.js          |  5 ++++-
 accessible/variable-remove-modal.component.js | 13 +++++++++----
 accessible/variable-rename-modal.component.js |  6 +++++-
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/accessible/field-segment.component.js b/accessible/field-segment.component.js
index 0f3ee6c58..4f2852a4e 100644
--- a/accessible/field-segment.component.js
+++ b/accessible/field-segment.component.js
@@ -156,6 +156,11 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
   },
   // Confirm a selection for dropdown fields.
   selectOption: function() {
+    if (this.optionValue != Blockly.Msg.RENAME_VARIABLE && this.optionValue !=
+        Blockly.Msg.DELETE_VARIABLE.replace('%1', this.mainField.getValue())) {
+      this.mainField.setValue(this.optionValue);
+    }
+
     if (this.optionValue == Blockly.Msg.RENAME_VARIABLE) {
       this.variableModalService.showRenameModal_(this.mainField.getValue());
     }
@@ -172,11 +177,6 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
       return;
     }
 
-    if (this.optionValue != Blockly.Msg.RENAME_VARIABLE && this.optionValue !=
-        Blockly.Msg.DELETE_VARIABLE.replace('%1', this.mainField.getValue())) {
-      this.mainField.setValue(this.optionValue);
-    }
-
     var optionText = undefined;
     for (var i = 0; i < this.dropdownOptions.length; i++) {
       if (this.dropdownOptions[i].value == optionValue) {
diff --git a/accessible/variable-add-modal.component.js b/accessible/variable-add-modal.component.js
index 2220ce9ea..e113b49fb 100644
--- a/accessible/variable-add-modal.component.js
+++ b/accessible/variable-add-modal.component.js
@@ -43,6 +43,8 @@ blocklyApp.VariableAddModalComponent = ng.core.Component({
       <div id="varModal" class="blocklyModal" role="alertdialog"
            (click)="$event.stopPropagation()" tabindex="0"
            aria-labelledby="variableModalHeading">
+          <h3 id="variableModalHeading">Add a variable...</h3>
+
           <form id="varForm">
             <p id="inputLabel">New Variable Name:
               <input id="mainFieldId" type="text" [ngModel]="VALUE"
@@ -81,7 +83,7 @@ blocklyApp.VariableAddModalComponent = ng.core.Component({
           Blockly.CommonModal.setupKeyboardOverrides(that);
 
           setTimeout(function() {
-            document.getElementById('mainFieldId').focus();
+            document.getElementById('varModal').focus();
           }, 150);
         }
       );
diff --git a/accessible/variable-modal.service.js b/accessible/variable-modal.service.js
index 77a121c29..5c425069b 100644
--- a/accessible/variable-modal.service.js
+++ b/accessible/variable-modal.service.js
@@ -66,7 +66,7 @@ blocklyApp.VariableModalService = ng.core.Class({
   },
   // Show the remove variable modal.
   showRemoveModal_: function(oldName) {
-    var count = blocklyApp.workspace.getVariableUses(oldName).length;
+    var count = this.getNumVariables(oldName);
     if (count > 1) {
       this.preRemoveShowHook(oldName, count);
       this.modalIsShown = true;
@@ -74,6 +74,9 @@ blocklyApp.VariableModalService = ng.core.Class({
       blocklyApp.workspace.deleteVariableInternal_(oldName);
     }
   },
+  getNumVariables: function(oldName) {
+    return blocklyApp.workspace.getVariableUses(oldName).length;
+  },
   // Hide the variable modal.
   hideModal: function() {
     this.modalIsShown = false;
diff --git a/accessible/variable-remove-modal.component.js b/accessible/variable-remove-modal.component.js
index 585f1cd61..480485342 100644
--- a/accessible/variable-remove-modal.component.js
+++ b/accessible/variable-remove-modal.component.js
@@ -43,10 +43,12 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
       <div id="varModal" class="blocklyModal" role="alertdialog"
            (click)="$event.stopPropagation()" tabindex="0"
            aria-labelledby="variableModalHeading">
+          <h3 id="variableModalHeading">
+            Delete {{getNumVariables()}} uses of the "{{currentVariableName}}"
+            variable?
+          </h3>
+
           <form id="varForm">
-            <p id="label">Remove {{count}} instances of
-              "{{currentVariableName}}" variable?
-            </p>
             <hr>
             <button id="yesButton" (click)="submit()">
               YES
@@ -83,7 +85,7 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
           Blockly.CommonModal.setupKeyboardOverrides(that);
 
           setTimeout(function() {
-            document.getElementById('label').focus();
+            document.getElementById('varModal').focus();
           }, 150);
         }
       );
@@ -101,6 +103,9 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
   getInteractiveContainer: function() {
     return document.getElementById("varForm");
   },
+  getNumVariables: function() {
+    return this.variableModalService.getNumVariables(this.currentVariableName);
+  },
   // Submits the name change for the variable.
   submit: function() {
     blocklyApp.workspace.deleteVariableInternal_(this.currentVariableName);
diff --git a/accessible/variable-rename-modal.component.js b/accessible/variable-rename-modal.component.js
index 534e74372..fb4835064 100644
--- a/accessible/variable-rename-modal.component.js
+++ b/accessible/variable-rename-modal.component.js
@@ -42,6 +42,10 @@ blocklyApp.VariableRenameModalComponent = ng.core.Component({
       <div id="varModal" class="blocklyModal" role="alertdialog"
            (click)="$event.stopPropagation()" tabindex="0"
            aria-labelledby="variableModalHeading">
+          <h3 id="variableModalHeading">
+            Rename the "{{currentVariableName}}" variable...
+          </h3>
+
           <form id="varForm">
             <p id="inputLabel">New Variable Name:
               <input id="mainFieldId" type="text" [ngModel]="VALUE"
@@ -82,7 +86,7 @@ blocklyApp.VariableRenameModalComponent = ng.core.Component({
           Blockly.CommonModal.setupKeyboardOverrides(that);
 
           setTimeout(function() {
-            document.getElementById('mainFieldId').focus();
+            document.getElementById('varModal').focus();
           }, 150);
         }
       );