test_selection.html

Enable keyboard shortcuts

This test gets skipped with pattern: os == 'mac' && os_version == '14.70' && arch == 'x86_64' OR os == 'mac' && os_version == '15.30' && arch == 'aarch64'
This test failed 3 times in the preceding 30 days. quicksearch this test
Manifest: accessible/tests/mochitest/events/a11y.toml

<html>

<head>

  <title>Accessible selection event testing</title>

  <link rel="stylesheet" type="text/css"

        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <script type="application/javascript"

          src="../common.js"></script>

  <script type="application/javascript"

          src="../promisified-events.js"></script>

  <script type="application/javascript"

          src="../role.js"></script>

  <script type="application/javascript"

          src="../states.js"></script>

  <script type="application/javascript">

    // //////////////////////////////////////////////////////////////////////////

    // Do tests

    // gA11yEventDumpToConsole = true; // debuggin

    async function doTests() {

      // closed combobox

      let focused = waitForEvent(EVENT_FOCUS, "combobox");

      selectAllTextAndFocus("combobox");

      await focused;

      testStates(getAccessible("combobox"), STATE_FOCUSED);

      let p = waitForEvents([

        stateChangeEventArgs("cb1_item1", STATE_SELECTED, false),

        stateChangeEventArgs("cb1_item2", STATE_SELECTED, true),

        [EVENT_SELECTION, "cb1_item2"],

]);

      synthesizeKey("KEY_ArrowDown", {});

      await p;

      // listbox

      p = waitForEvent(EVENT_SELECTION, "lb1_item1");

      let lb1item1 = getNode("lb1_item1");

      lb1item1.scrollIntoView(true);

      synthesizeMouse(lb1item1, 1, 1, {});

      await p;

      p = waitForEvents([

        stateChangeEventArgs("lb1_item1", STATE_SELECTED, false),

        stateChangeEventArgs("lb1_item2", STATE_SELECTED, true),

        [EVENT_SELECTION, "lb1_item2"],

]);

      synthesizeKey("KEY_ArrowDown", {});

      await p;

      // multiselectable listbox

      p = waitForEvents([

        stateChangeEventArgs("lb2_item1", STATE_SELECTED, true),

        [EVENT_SELECTION, "lb2_item1"],

]);

      let lb2item1 = getNode("lb2_item1");

      lb2item1.scrollIntoView(true);

      synthesizeMouse(lb2item1, 1, 1, {});

      await p;

      p = waitForEvents([

        stateChangeEventArgs("lb2_item2", STATE_SELECTED, true),

        [EVENT_SELECTION_ADD, "lb2_item2"],

]);

      synthesizeKey("KEY_ArrowDown", { shiftKey: true });

      await p;

      p = waitForEvents([

        stateChangeEventArgs("lb2_item2", STATE_SELECTED, false),

        [EVENT_SELECTION_REMOVE, "lb2_item2"],

]);

      synthesizeKey("KEY_ArrowUp", { shiftKey: true });

      await p;

      p = waitForEvents([

        stateChangeEventArgs("lb2_item1", STATE_SELECTED, false),

        [EVENT_SELECTION_REMOVE, "lb2_item1"],

]);

      synthesizeKey(" ", { ctrlKey: true });

      await p;

      SimpleTest.finish();

    SimpleTest.waitForExplicitFinish();

    addA11yLoadEvent(doTests);

  </script>

</head>

<body>

  <a target="_blank"

     href="https://bugzilla.mozilla.org/show_bug.cgi?id=414302"

     title="Incorrect selection events in HTML, XUL and ARIA">

    Bug 414302

  </a>

  <a target="_blank"

     href="https://bugzilla.mozilla.org/show_bug.cgi?id=810268"

     title="There's no way to know unselected item when selection in single selection was changed">

    Bug 810268

  </a>

  <p id="display"></p>

  <div id="content" style="display: none"></div>

  <pre id="test">

  </pre>

  <select id="combobox">

    <option id="cb1_item1" value="mushrooms">mushrooms

    <option id="cb1_item2" value="greenpeppers">green peppers

    <option id="cb1_item3" value="onions" id="onions">onions

    <option id="cb1_item4" value="tomatoes">tomatoes

    <option id="cb1_item5" value="olives">olives

  </select>

  <select id="listbox" size=5>

    <option id="lb1_item1" value="mushrooms">mushrooms

    <option id="lb1_item2" value="greenpeppers">green peppers

    <option id="lb1_item3" value="onions" id="onions">onions

    <option id="lb1_item4" value="tomatoes">tomatoes

    <option id="lb1_item5" value="olives">olives

  </select>

  <p>Pizza</p>

  <select id="listbox2" multiple size=5>

    <option id="lb2_item1" value="mushrooms">mushrooms

    <option id="lb2_item2" value="greenpeppers">green peppers

    <option id="lb2_item3" value="onions" id="onions">onions

    <option id="lb2_item4" value="tomatoes">tomatoes

    <option id="lb2_item5" value="olives">olives

  </select>

</body>

</html>