select-keyboard.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/select-keyboard.tentative.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>HTMLselectElement Test: keyboard accessibility</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<!-- NOTE: most of this test is duplicated in the

     select-keyboard-behavior{.tentative}.html test. It'd be good to

     merge the content of this test into that one.-->

  <select id="select0">

    <button id="select0-button0" type=select>button</button>

    <option class=one>one</option>

    <option class=two>two</option>

    <option class=three>three</option>

  </select>

  <select id="select1">

    <option id="select1-child0">one</option>

  </select>

  <select id="select2" disabled>

    <button id="select2-button0" type=select>button</button>

    <option disabled>one</option>

    <option>two</option>

    <option>three</option>

  </select>

  <select id="select3">

    <button id="select3-button0" type=select>button</button>

    <option class=one>one</option>

    <option disabled>two</option>

    <option class=three>three</option>

  </select>

<style>

  select, ::picker(select) {

    appearance: base-select;

</style>

<script>

// See https://w3c.github.io/webdriver/#keyboard-actions

const KEY_CODE_MAP = {

  'Enter':      '\uE007',

  'Space':      '\uE00D',

  'ArrowUp':    '\uE013',

  'ArrowDown':  '\uE015'

};

function clickOn(element) {

    const actions = new test_driver.Actions();

    return actions.pointerMove(0, 0, {origin: element})

      .pointerDown({button: actions.ButtonType.LEFT})

      .pointerUp({button: actions.ButtonType.LEFT})

      .send();

promise_test(async t => {

  const select = document.querySelector("#select0");

  const button = document.querySelector("#select0-button0");

  assert_false(select.matches(':open'), "select should not be initially open");

  await test_driver.send_keys(button, KEY_CODE_MAP.Enter);

  assert_false(select.matches(':open'), "Enter key shouldn't open select");

  await test_driver.send_keys(button, KEY_CODE_MAP.Space);

  assert_true(select.matches(':open'), "Space key should open select");

  assert_equals(select.value, "one");

  await test_driver.send_keys(select, KEY_CODE_MAP.ArrowDown);

  assert_equals(document.activeElement, select.querySelector('.two'),

    "Down arrow should focus the next option.");

  assert_equals(select.value, "one", "Down arrow should not commit the newly focused option.");

  await test_driver.send_keys(select, KEY_CODE_MAP.ArrowDown);

  assert_equals(document.activeElement, select.querySelector('.three'),

    "Down arrow should focus the next option.");

  assert_equals(select.value, "one", "Down arrow should not commit the newly focused option.");

  await test_driver.send_keys(select, KEY_CODE_MAP.ArrowDown);

  assert_equals(document.activeElement, select.querySelector('.three'),

    "Down arrow should do nothing if already at the last option.");

  assert_equals(select.value, "one", "Down arrow should not commit the newly focused option.");

  await test_driver.send_keys(select, KEY_CODE_MAP.ArrowUp);

  assert_equals(document.activeElement, select.querySelector('.two'),

    "Up arrow should focus the previous option.");

  assert_equals(select.value, "one", "Up arrow should not commit the newly focused option.");

  await test_driver.send_keys(select, KEY_CODE_MAP.ArrowUp);

  assert_equals(document.activeElement, select.querySelector('.one'),

    "Up arrow should focus the previous option.");

  assert_equals(select.value, "one", "Up arrow should not commit the newly focused option.");

  await test_driver.send_keys(select, KEY_CODE_MAP.ArrowUp);

  assert_equals(document.activeElement, select.querySelector('.one'),

    "Up arrow should do nothing if already at the first option.");

  assert_equals(select.value, "one", "Up arrow should not commit the newly focused option.");

  await test_driver.send_keys(select, KEY_CODE_MAP.Enter);

  assert_false(select.matches(':open'), "Enter key should close select");

  await test_driver.send_keys(button, KEY_CODE_MAP.Space);

  assert_true(select.matches(':open'), "Space key should open select");

  // This behavior is suspicious (since Space key can open the select),

  // but it maches <select>. See https://github.com/openui/open-ui/issues/386

  await test_driver.send_keys(select, " ");

  assert_true(select.matches(':open'), "Space key should *not* close select");

  await test_driver.send_keys(select, KEY_CODE_MAP.Enter);

  assert_false(select.matches(':open'), "Enter key should close select");

}, "Validate Enter, Up/Down Arrow, and Space keyboard accessibility support for <select>");

promise_test(async t => {

  const selectOption = document.getElementById("select1-child0");

  const event = document.createEvent("Event");

  event.initEvent("keydown");

  selectOption.dispatchEvent(event);

}, "Firing a synthetic event at a select's option doesn't crash");

promise_test(async t => {

  const select2 = document.querySelector("#select2");

  const select2Button = document.querySelector("#select2-button0");

  assert_false(select2.matches(':open'), "select should not be initially open");

  await test_driver.send_keys(select2Button, KEY_CODE_MAP.Enter);

  assert_false(select2.matches(':open'), "Enter key should not open a disabled select");

  await clickOn(select2);

  assert_false(select2.matches(':open'), "Click should not open a disabled select");

  assert_equals(select2.value, "one");

  const select3 = document.querySelector("#select3");

  const select3Button = document.querySelector("#select3-button0");

  assert_false(select3.matches(':open'), "select should not be initially open");

  await test_driver.send_keys(select3Button, KEY_CODE_MAP.Enter);

  assert_false(select3.matches(':open'), "Enter key shouldn't open select");

  await test_driver.send_keys(select3Button, KEY_CODE_MAP.Space);

  assert_true(select3.matches(':open'), "Space key should open select");

  assert_equals(select3.value, "one");

  await test_driver.send_keys(select3, KEY_CODE_MAP.ArrowDown);

  assert_equals(document.activeElement, select3.querySelector('.three'),

    "Down arrow should go to next non-disabled option");

  await test_driver.send_keys(select3, KEY_CODE_MAP.ArrowUp);

  assert_equals(document.activeElement, select3.querySelector('.one'),

    "Up arrow should go to the previous non-disabled option");

}, "Validate Enter, Up/Down Arrow keyboard accessibility support for disabled <select>");

</script>