Combobox Examples: add tests for backspace pull (#1645)

Fixes #1345.

* Add regression tests: backspace for combobox-both and combobox-list
* Remove backspace from key table and fix bugs

Co-authored-by: Simon Pieters <zcorpan@gmail.com>
Co-authored-by: Matt King <a11yThinker@Gmail.com>

test/tests/combobox_autocomplete-both.js

@@ -540,6 +540,203 @@ ariaTest(
   }
 );
 
+// "Test 1" in https://github.com/w3c/aria-practices/issues/1345
+
+ariaTest(
+  'Test backspace with focus on textbox',
+  exampleFile,
+  'standard-single-line-editing-keys',
+  async (t) => {
+    // Send key "a" to the textbox
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys('a');
+
+    // Get the value of the first option in the listbox
+
+    const firstOption = await (
+      await t.context.queryElements(t, ex.optionsSelector)
+    )[0].getText();
+
+    // Confirm that the value of the textbox is now set to the first option
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      firstOption,
+      'key press "a" should result in first option in textbox'
+    );
+
+    // Send key BACK_SPACE
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.BACK_SPACE);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now "A"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'A',
+      'key press "BACK_SPACE" should result in deleting the autocompleted text'
+    );
+
+    // Send key BACK_SPACE
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.BACK_SPACE);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now ""
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      '',
+      'key press "BACK_SPACE" should result in deleting the "A"'
+    );
+
+    // Send key ARROW_DOWN
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.ARROW_DOWN);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm aria-selected is set on the item "Alabama"
+
+    await assertAttributeValues(
+      t,
+      ex.optionsSelector + ':nth-of-type(1)',
+      'aria-selected',
+      'true'
+    );
+
+    // Confirm that the value of the textbox is now set to the first option
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      firstOption,
+      'key press "ARROW_DOWN" should result in first option in textbox'
+    );
+
+    // Confirm that there are 56 options visible
+    t.is(
+      await (await t.context.queryElements(t, ex.optionsSelector)).length,
+      56,
+      'key press "ARROW_DOWN" should result in all options being visible'
+    );
+  }
+);
+
+// "Test 2" in https://github.com/w3c/aria-practices/issues/1345
+
+ariaTest(
+  'Test backspace with focus on textbox (2)',
+  exampleFile,
+  'standard-single-line-editing-keys',
+  async (t) => {
+    // Send keys "no" to the textbox
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys('n', 'o');
+
+    // Confirm that the value of the textbox is now set to "North Carolina"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'North Carolina',
+      'key press "n" "o" should result in "North Carolina" in textbox'
+    );
+
+    // Send key BACK_SPACE
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.BACK_SPACE);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now "No"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'No',
+      'key press "BACK_SPACE" should result in deleting the autocompleted text'
+    );
+
+    // Send key BACK_SPACE
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.BACK_SPACE);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now "N"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'N',
+      'key press "BACK_SPACE" should result in deleting the "o"'
+    );
+
+    // Send key ARROW_DOWN
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.ARROW_DOWN);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now set to "Nebraska"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'Nebraska',
+      'key press "ARROW_DOWN" should result in "Nebraska" in textbox'
+    );
+
+    // Confirm that there are 9 options visible
+    t.is(
+      await (await t.context.queryElements(t, ex.optionsSelector)).length,
+      9,
+      'key press "ARROW_DOWN" should result in 9 options being visible'
+    );
+  }
+);
+
 ariaTest(
   'Test enter key press with focus on listbox',
   exampleFile,
@@ -551,7 +748,7 @@ ariaTest(
       .findElement(By.css(ex.textboxSelector))
       .sendKeys('a', Key.ARROW_DOWN);
 
-    // Get the value of the first option in the listbox
+    // Get the value of the second option in the listbox
 
     const secondOption = await (
       await t.context.queryElements(t, ex.optionsSelector)
@@ -563,7 +760,7 @@ ariaTest(
       .findElement(By.css(ex.textboxSelector))
       .sendKeys(Key.ENTER);
 
-    // Confirm that the listbox is still open
+    // Confirm that the listbox is closed
 
     await assertAttributeValues(
       t,

test/tests/combobox_autocomplete-list.js

@@ -596,6 +596,172 @@ ariaTest(
   }
 );
 
+// "Test 3" in https://github.com/w3c/aria-practices/issues/1345
+
+ariaTest(
+  'Test backspace with focus on textbox',
+  exampleFile,
+  'standard-single-line-editing-keys',
+  async (t) => {
+    t.plan(7);
+
+    // Send key "a" to the textbox
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys('a');
+
+    // Confirm that the value of the textbox is "a"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'a',
+      'key press "a" should result in "a" in textbox'
+    );
+
+    // Send key BACK_SPACE
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.BACK_SPACE);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now ""
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      '',
+      'key press "BACK_SPACE" should result in deleting the "a"'
+    );
+
+    // Send key ARROW_DOWN
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.ARROW_DOWN);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is still ""
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      '',
+      'key press "ARROW_DOWN" should result in no change in textbox value'
+    );
+
+    // Confirm that "Alabama" option is aria-selected="true"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.optionsSelector + '[aria-selected="true"]'))
+        .getText(),
+      'Alabama',
+      'key press "ARROW_DOWN" should result in "Alabama" option being selected'
+    );
+
+    // Confirm that there are 56 options visible
+    t.is(
+      await (await t.context.queryElements(t, ex.optionsSelector)).length,
+      56,
+      'key press "ARROW_DOWN" should result in all options being visible'
+    );
+  }
+);
+
+// "Test 4" in https://github.com/w3c/aria-practices/issues/1345
+
+ariaTest(
+  'Test backspace with focus on textbox (2)',
+  exampleFile,
+  'standard-single-line-editing-keys',
+  async (t) => {
+    t.plan(7);
+
+    // Send keys "no" to the textbox
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys('n', 'o');
+
+    // Confirm that the value of the textbox is now set to "no"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'no',
+      'key press "n" "o" should result in "no" in textbox'
+    );
+
+    // Send key BACK_SPACE
+
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.BACK_SPACE);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is now "n"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'n',
+      'key press "BACK_SPACE" should result in deleting the "o"'
+    );
+
+    // Send key ARROW_DOWN
+    await t.context.session
+      .findElement(By.css(ex.textboxSelector))
+      .sendKeys(Key.ARROW_DOWN);
+
+    // Confirm that the listbox is still open
+
+    await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
+
+    // Confirm that the value of the textbox is still "n"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.textboxSelector))
+        .getAttribute('value'),
+      'n',
+      'key press "ARROW_DOWN" should result in no change in textbox value'
+    );
+
+    // Confirm that "Nebraska" option is aria-selected="true"
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.optionsSelector + '[aria-selected="true"]'))
+        .getText(),
+      'Nebraska',
+      'key press "ARROW_DOWN" should result in "Nebraska" option being selected'
+    );
+
+    // Confirm that there are 9 options visible
+    t.is(
+      await (await t.context.queryElements(t, ex.optionsSelector)).length,
+      9,
+      'key press "ARROW_DOWN" should result in 9 options being visible'
+    );
+  }
+);
+
 ariaTest(
   'Test single escape key press with focus on textbox',
   exampleFile,