Combobox with grid popup: Make escape key behavior consistent with pa…

…ttern (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 <[email protected]>
Co-authored-by: Simon Pieters <[email protected]>

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>

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;
   }

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'
     );
 
   });