From aabf0400279b8ec6caba798f3ceb39cb6ccac940 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@Gmail.com>
Date: Mon, 16 Mar 2020 23:40:43 -0700
Subject: [PATCH] Combobox with grid popup: Make escape key behavior consistent
 with pattern (pull #1334)

Fixes #860 and #1066:
* Revise Escape key documentation to reflect expected behavior
* updated escape key behavior to match combobox pattern
* Make escape hide the popup if it's shown, regardless of where focus is
* Update the corresponding test to no longer expect a failure (fixes #860).
* Remove comment about failing test

Co-authored-by: Jon <jongund@illinois.edu>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
---
 examples/combobox/grid-combo.html  |  9 +++---
 examples/combobox/js/grid-combo.js | 14 +++++----
 test/tests/combobox_grid-combo.js  | 48 ++++++++++++++++++++----------
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/examples/combobox/grid-combo.html b/examples/combobox/grid-combo.html
index 4f673657e9..2585446f5f 100644
--- a/examples/combobox/grid-combo.html
+++ b/examples/combobox/grid-combo.html
@@ -105,8 +105,8 @@ <h3 id="kbd_label_textbox">Textbox</h3>
             <th><kbd>Escape</kbd></th>
             <td>
               <ul>
-                <li>Clears the textbox</li>
                 <li>If the grid is displayed, closes it.</li>
+                <li>If the grid is not displayed, clears the textbox.</li>
               </ul>
             </td>
           </tr>
@@ -150,9 +150,8 @@ <h3 id="kbd_label_popup">Grid Popup</h3>
             <th><kbd>Escape</kbd></th>
             <td>
               <ul>
-                <li>Closes the grid popup.</li>
-                <li>Sets focus on the textbox.</li>
-                <li>Clears the textbox.</li>
+                <li>Closes the grid.</li>
+                <li>Sets visual focus on the textbox.</li>
               </ul>
             </td>
           </tr>
@@ -380,7 +379,7 @@ <h3 id="rps_label_popup">Grid Popup</h3>
       <h2>Javascript and CSS Source Code</h2>
       <ul>
         <li> CSS: <a href="css/combobox.css" type="tex/css">combobox.css</a></li>
-        <li>Javascript: <a href="js/grid-combobox.js">grid-combobox.js</a></li>
+        <li>Javascript: <a href="js/grid-combo.js">grid-combo.js</a></li>
         <li>Javascript: <a href="js/grid-combo-example.js">grid-combo-example.js</a></li>
       </ul>
     </section>
diff --git a/examples/combobox/js/grid-combo.js b/examples/combobox/js/grid-combo.js
index 2cf83afa47..489bb781b2 100644
--- a/examples/combobox/js/grid-combo.js
+++ b/examples/combobox/js/grid-combo.js
@@ -94,12 +94,16 @@ aria.GridCombobox.prototype.handleInputKeyDown = function (evt) {
       );
     }
     else {
+      if (!this.shown) {
+        setTimeout((function () {
+          // On Firefox, input does not get cleared here unless wrapped in
+          // a setTimeout
+          this.input.value = '';
+        }).bind(this), 1);
+      }
+    }
+    if (this.shown) {
       this.hideResults();
-      setTimeout((function () {
-        // On Firefox, input does not get cleared here unless wrapped in
-        // a setTimeout
-        this.input.value = '';
-      }).bind(this), 1);
     }
     return;
   }
diff --git a/test/tests/combobox_grid-combo.js b/test/tests/combobox_grid-combo.js
index 306fc398da..8a9483b9fe 100644
--- a/test/tests/combobox_grid-combo.js
+++ b/test/tests/combobox_grid-combo.js
@@ -495,37 +495,55 @@ ariaTest('Test enter key press with focus on grid',
   });
 
 ariaTest('Test escape key press with focus on combobox',
-  exampleFile, 'popup-key-escape', async (t) => {
+  exampleFile, 'textbox-key-escape', async (t) => {
     t.plan(2);
 
-    // Send key "a", then key ESCAPE to the combobox
+    // Send key "a" then key "ARROW_DOWN to put the focus on the listbox,
+    // then key ESCAPE to the textbox
+
     await t.context.session
       .findElement(By.css(ex.comboboxSelector))
       .sendKeys('a', Key.ESCAPE);
 
-    // Wait for gridbox to close
-    await t.context.session.wait(
-      async function () {
-        return !(await t.context.session.findElement(By.css(ex.gridSelector)).isDisplayed());
-      },
-      t.context.waitTime,
-      'Timeout waiting for gridbox to close afer escape'
+    // Confirm the listbox is closed and the textbox is cleared
+
+    await assertAttributeValues(t, ex.comboboxSelector, 'aria-expanded', 'false');
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.comboboxSelector))
+        .getAttribute('value'),
+      'a',
+      'In listbox key press "ESCAPE" should result in "a" in textbox'
     );
 
-    // Confirm the grid is closed and the comboboxed is cleared
+  });
+
+
+ariaTest('Test double escape key press with focus on combobox',
+  exampleFile, 'textbox-key-escape', async (t) => {
+    t.plan(2);
+
+    // Send key "a", then key ESCAPE twice to the textbox
+
+    await t.context.session
+      .findElement(By.css(ex.comboboxSelector))
+      .sendKeys('a', Key.ESCAPE, Key.ESCAPE);
+
+    // Confirm the listbox is closed and the textbox is cleared
+
     await assertAttributeValues(t, ex.comboboxSelector, 'aria-expanded', 'false');
     t.is(
       await t.context.session
         .findElement(By.css(ex.comboboxSelector))
         .getAttribute('value'),
       '',
-      'In key press "ESCAPE" should result in clearing of the combobox'
+      'In key press "ESCAPE" should result in clearing the textbox'
     );
 
   });
 
-// This test fails due to bug: https://github.com/w3c/aria-practices/issues/860
-ariaTest.failing('Test escape key press with focus on popup',
+
+ariaTest('Test escape key press with focus on popup',
   exampleFile, 'popup-key-escape', async (t) => {
     t.plan(2);
 
@@ -558,8 +576,8 @@ ariaTest.failing('Test escape key press with focus on popup',
       await t.context.session
         .findElement(By.css(ex.comboboxSelector))
         .getAttribute('value'),
-      '',
-      'In grid key press "ESCAPE" should result in clearing of the combobox'
+      'a',
+      'In grid key press "ESCAPE" should result the "a" in the combobox'
     );
 
   });