test_selects.html - mozsearch

Enable keyboard shortcuts

<html>

<head>

  <title>HTML selects accessible states tests</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="../role.js"></script>

  <script type="application/javascript"

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

  <script type="application/javascript"

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

  <script type="application/javascript">

    // gA11yEventDumpToConsole = true;

    function doTest() {

      // combobox

      var combobox = getAccessible("combobox");

      testStates(combobox,

                 STATE_HASPOPUP | STATE_COLLAPSED | STATE_FOCUSABLE, 0,

                 STATE_FOCUSED, 0);

      var comboboxList = combobox.firstChild;

      testStates(comboboxList, STATE_INVISIBLE, 0, STATE_FOCUSABLE, 0);

      var opt1 = comboboxList.firstChild;

      testStates(opt1, STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,

                 0, STATE_FOCUSED, 0);

      var opt2 = comboboxList.lastChild;

      testStates(opt2, STATE_SELECTABLE | STATE_FOCUSABLE, 0, STATE_SELECTED, 0,

                 STATE_FOCUSED, 0);

      // collapsed combobox

      testStates("collapsedcombobox",

                 STATE_COLLAPSED | STATE_FOCUSABLE, 0,

                 STATE_FOCUSED, 0);

      testStates("collapsed-1",

                 STATE_FOCUSABLE | STATE_SELECTABLE, 0,

                 STATE_OFFSCREEN | STATE_INVISIBLE, 0);

      testStates("collapsed-2",

                 STATE_OFFSCREEN, 0,

                 STATE_INVISIBLE, 0);

      // listbox

      testStates("listbox",

                 STATE_FOCUSABLE, 0,

                 STATE_HASPOPUP | STATE_COLLAPSED | STATE_FOCUSED);

      testStates("listitem-active",

                 STATE_FOCUSABLE | STATE_SELECTABLE, EXT_STATE_ACTIVE,

                 STATE_SELECTED | STATE_FOCUSED);

      testStates("listitem",

                 STATE_FOCUSABLE | STATE_SELECTABLE, 0,

                 STATE_SELECTED | STATE_FOCUSED, EXT_STATE_ACTIVE);

      testStates("listitem-disabled",

                 STATE_UNAVAILABLE, 0,

                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,

                 EXT_STATE_ACTIVE);

      testStates("listgroup",

                 0, 0,

                 STATE_UNAVAILABLE | STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,

                 EXT_STATE_ACTIVE);

      testStates("listgroup-disabled",

                 STATE_UNAVAILABLE, 0,

                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,

                 EXT_STATE_ACTIVE);

      todo(false, "no unavailable state on option in disabled group (bug 759666)");

//      testStates("listitem-disabledgroup",

//                 STATE_UNAVAILABLE, 0,

//                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,

//                 EXT_STATE_ACTIVE);

      testStates("listbox-disabled",

                 STATE_UNAVAILABLE, 0,

                 STATE_FOCUSABLE);

      todo(false, "no unavailable state on option in disabled select (bug 759666)");

//      testStates("listitem-disabledlistbox",

//                 STATE_UNAVAILABLE, 0,

//                 STATE_SELECTABLE | STATE_SELECTED | STATE_FOCUSABLE,

//                 EXT_STATE_ACTIVE);

      SimpleTest.finish();

    SimpleTest.waitForExplicitFinish();

    addA11yLoadEvent(doTest);

  </script>

</head>

<body>

  <a target="_blank"

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

     title="mochitest for selects and lists">

    Mozilla Bug 443889

  </a>

  <a target="_blank"

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

     title="mochitest for selects and lists">

    Mozilla Bug 640716

  </a>

  <a target="_blank"

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

     title="Expose active state on current item of selectable widgets">

    Mozilla Bug 689847

  </a>

  <a target="_blank"

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

     title="Isolate focusable and unavailable states from State()">

    Mozilla Bug 756983

  </a>

  <a target="_blank"

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

     title=" HTML:option group position is not correct when select is collapsed">

    Mozilla Bug 907682

  </a>

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

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

  <pre id="test">

  </pre>

  <select id="combobox">

    <option>item 1</option>

    <option>item 2</option>

  </select>

  <select id="collapsedcombobox">

    <option id="collapsed-1">item 1</option>

    <option id="collapsed-2">item 2</option>

  </select>

  <select id="listbox" name="component" size="3">

    <option id="listitem-active">Build</option>

    <option id="listitem">Disability Access APIs</option>

    <option id="listitem-disabled" disabled>General</option>

    <optgroup id="listgroup" label="group">

      <option>option</option>

    </optgroup>

    <optgroup id="listgroup-disabled" disabled label="group2">

      <option id="listitem-disabledgroup">UI</option>

    </optgroup>

  </select>

  <select id="listbox-disabled" size="3" disabled>

    <option id="listitem-disabledlistbox">option</option>

  </select>

</body>

</html>