test_focus_selects.html

Enable keyboard shortcuts

<html>

<head>

  <title>Accessible focus 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">

    // gA11yEventDumpID = "eventdump"; // debug stuff

    // gA11yEventDumpToConsole = true;

    var gQueue = null;

    async function doTests() {

      // Bug 746534 - File causes crash or hang on OS X

      if (MAC) {

        todo(false, "Bug 746534 - test file causes crash or hang on OS X");

        SimpleTest.finish();

        return;

      let p = waitForEvent(EVENT_FOCUS, "orange");

      // first item is focused until there's selection

      getNode("list").focus();

      await p;

      p = waitForEvents({

        expected: [[EVENT_SELECTION, "orange"]],

        unexpected: [

          [EVENT_FOCUS],

          stateChangeEventArgs("orange", EXT_STATE_ACTIVE, true, true),

],

});

      // item is selected and stays focused and active

      synthesizeKey("VK_DOWN");

      await p;

      p = waitForEvents([

        stateChangeEventArgs("orange", EXT_STATE_ACTIVE, false, true),

        stateChangeEventArgs("apple", EXT_STATE_ACTIVE, true, true),

        [EVENT_FOCUS, "apple"],

]);

      // last selected item is focused

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

      await p;

      p = waitForEvents({

        expected: [

          [EVENT_FOCUS, "orange"],

          stateChangeEventArgs("orange", EXT_STATE_ACTIVE, true, true),

],

        unexpected: [

          [EVENT_FOCUS, "apple"],

          stateChangeEventArgs("apple", EXT_STATE_ACTIVE, true, true),

],

});

      // no focus event if nothing is changed

      synthesizeKey("VK_DOWN");

      // current item is focused

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

      await p;

      p = waitForEvent(EVENT_FOCUS, "emptylist");

      // focus on empty list (no items to be focused)

      synthesizeKey("VK_TAB");

      await p;

      p = waitForEvents({

        expected: [[EVENT_FOCUS, "orange"]],

        unexpected: [stateChangeEventArgs("orange", EXT_STATE_ACTIVE, true, true)],

});

      // current item is focused

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

      await p;

      p = waitForEvent(EVENT_FOCUS, "combobox");

      getNode("combobox").focus();

      await p;

      p = waitForEvents({

        expected: [[EVENT_SELECTION, "cb_apple"]],

        unexpected: [

          [EVENT_FOCUS],

          stateChangeEventArgs("cb_apple", EXT_STATE_ACTIVE, true, true),

],

});

      // collapsed combobox keeps a focus

      synthesizeKey("VK_DOWN");

      await p;

      // no focus events for unfocused list controls when current item is

      // changed

      p = waitForEvent(EVENT_FOCUS, "emptylist");

      getNode("emptylist").focus();

      await p;

      p = waitForEvents({

        expected: [[EVENT_SELECTION, "orange"]],

        unexpected: [

          [EVENT_FOCUS],

          stateChangeEventArgs("orange", EXT_STATE_ACTIVE, true, true),

],

});

      // An unfocused selectable list gets selection change events,

      // but not active or focus change events.

      getNode("list").selectedIndex = getNode("orange").index;

      await p;

      p = waitForEvents({

        expected: [[EVENT_SELECTION, "cb_orange"]],

        unexpected: [

          [EVENT_FOCUS],

          stateChangeEventArgs("cb_orange", EXT_STATE_ACTIVE, true, true),

],

});

      // An unfocused selectable combobox gets selection change events,

      // but not focus events nor active state change events.

      getNode("cb_orange").selected = true;

      await p;

      // Bug 1838983: Make sure we don't fail a C++ assertion when the focused

      // active item is destroyed.

      info("Focusing recreate");

      p = waitForEvent(EVENT_FOCUS, "recreateA");

      const recreate = getNode("recreate");

      recreate.focus();

      await p;

      info("Changing recreate size");

      p = waitForEvent(EVENT_FOCUS, recreate);

      // This will recreate the select and its children.

      recreate.size = 1;

      await p;

      SimpleTest.finish();

    SimpleTest.waitForExplicitFinish();

    addA11yLoadEvent(doTests);

  </script>

</head>

<body>

  <a target="_blank"

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

     title="Accessibles for focused HTML Select elements are not getting focused state">

    Mozilla Bug 433418

  </a>

  <a target="_blank"

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

     title="List controls should fire a focus event on the selected child when tabbing or when the selected child changes while the list is focused">

    Mozilla Bug 474893

  </a>

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

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

  <pre id="test">

  </pre>

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

    <option id="orange">Orange</option>

    <option id="apple">Apple</option>

  </select>

  <select id="emptylist" size="5"></select>

  <select id="combobox">

    <option id="cb_orange">Orange</option>

    <option id="cb_apple">Apple</option>

  </select>

  <select id="recreate" size="5">

    <option id="recreateA">a</option>

  </select>

  <div id="eventdump"></div>

</body>

</html>