test_focus_radio.html

Enable keyboard shortcuts

<!doctype html>

<title>Test for input radio focus</title>

<script src="/tests/SimpleTest/SimpleTest.js"></script>

<script src="/tests/SimpleTest/EventUtils.js"></script>

<style>

.visHidden {

  visibility: hidden;

.dispNone {

  display: none;

</style>

<button id="before">before</button>

<fieldset>

  <legend>a</legend>

  <label><input id="a1" type="radio" name="a" checked>a1</label>

  <label><input id="a2" type="radio" name="a">a2</label>

</fieldset>

<fieldset>

  <legend>b</legend>

  <label><input id="b1" type="radio" name="b">b1</label>

  <label><input id="b2" type="radio" name="b" checked>b2</label>

</fieldset>

<fieldset>

  <legend>c</legend>

  <label><input id="c1" type="radio" name="c">c1</label>

  <label><input id="c2" type="radio" name="c">c2</label>

</fieldset>

<fieldset>

  <legend>d</legend>

  <label><input id="d1" type="radio" name="d" disabled>d1</label>

  <label><input id="d2" type="radio" name="d">d2</label>

  <label><input id="d3" type="radio" name="d" disabled>d3</label>

  <label><input id="d4" type="radio" name="d">d4</label>

</fieldset>

<fieldset>

  <legend>e</legend>

  <label><input id="e1" type="radio" name="e" hidden>e1</label>

  <label><input id="e2" type="radio" name="e">e2</label>

  <label><input id="e3" type="radio" name="e" hidden>e3</label>

  <label><input id="e4" type="radio" name="e">e4</label>

</fieldset>

<fieldset>

  <legend>f</legend>

  <label><input id="f1" type="radio" name="f" class="visHidden">f1</label>

  <label><input id="f2" type="radio" name="f">f2</label>

  <label><input id="f3" type="radio" name="f" class="visHidden">f3</label>

  <label><input id="f4" type="radio" name="f">f4</label>

</fieldset>

<fieldset>

  <legend>g</legend>

  <label><input id="g1" type="radio" name="g" class="dispNone">g1</label>

  <label><input id="g2" type="radio" name="g">g2</label>

  <label><input id="g3" type="radio" name="g" class="dispNone">g3</label>

  <label><input id="g4" type="radio" name="g">g4</label>

</fieldset>

<fieldset>

  <legend>h</legend>

  <label><input id="h1" type="radio" name="h" disabled checked>h1</label>

  <label><input id="h2" type="radio" name="h">h2</label>

</fieldset>

<fieldset>

  <legend>i</legend>

  <label><input id="i1" type="radio" name="i" hidden checked>i1</label>

  <label><input id="i2" type="radio" name="i">i2</label>

</fieldset>

<fieldset>

  <legend>j</legend>

  <label><input id="j1" type="radio" name="j">j1</label>

  <label><input id="j2" type="radio" name="j" disabled checked>j2</label>

</fieldset>

<button id="after">after</button>

<script>

  SimpleTest.waitForExplicitFinish();

  function expectFocusAfterKey(key, id) {

    const res = key.match(/(Shift\+)?(.*)/);

    const shiftKey = Boolean(res[1]);

    const rawKey = res[2];

    synthesizeKey(`KEY_${rawKey}`, { shiftKey });

    is(document.activeElement.id, id, `${id} is focused after ${key}`);

  SimpleTest.waitForFocus(async function() {

    await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]});

    expectFocusAfterKey("Tab", "before");

    // a1 is checked.

    expectFocusAfterKey("Tab", "a1");

    // b2 is checked.

    expectFocusAfterKey("Tab", "b2");

    // Nothing is checked in group c, so c1 should get focus.

    expectFocusAfterKey("Tab", "c1");

    // d1 is disabled, so d2 should get focus.

    expectFocusAfterKey("Tab", "d2");

    // e1 is hidden, so e2 should get focus.

    expectFocusAfterKey("Tab", "e2");

    // f1 is hidden, so f2 should get focus.

    expectFocusAfterKey("Tab", "f2");

    // g1 is hidden, so g2 should get focus.

    expectFocusAfterKey("Tab", "g2");

    // h1 is checked but disabled, so h2 should get focus.

    expectFocusAfterKey("Tab", "h2");

    // i1 is checked but hidden, so i2 should get focus.

    expectFocusAfterKey("Tab", "i2");

    // j2 is checked but disabled, so j1 should get focus.

    expectFocusAfterKey("Tab", "j1");

    expectFocusAfterKey("Tab", "after");

    expectFocusAfterKey("Shift+Tab", "j1");

    expectFocusAfterKey("Shift+Tab", "i2");

    expectFocusAfterKey("Shift+Tab", "h2");

    expectFocusAfterKey("Shift+Tab", "g2");

    expectFocusAfterKey("Shift+Tab", "f2");

    expectFocusAfterKey("Shift+Tab", "e2");

    expectFocusAfterKey("Shift+Tab", "d2");

    expectFocusAfterKey("Shift+Tab", "c1");

    expectFocusAfterKey("Shift+Tab", "b2");

    expectFocusAfterKey("Shift+Tab", "a1");

    expectFocusAfterKey("Shift+Tab", "before");

    expectFocusAfterKey("Tab", "a1");

    expectFocusAfterKey("ArrowDown", "a2");

    expectFocusAfterKey("Tab", "b2");

    // a2 is now checked, so shift+tab should focus it.

    expectFocusAfterKey("Shift+Tab", "a2");

    expectFocusAfterKey("Tab", "b2");

    expectFocusAfterKey("ArrowUp", "b1");

    expectFocusAfterKey("Shift+Tab", "a2");

    expectFocusAfterKey("Tab", "b1");

    expectFocusAfterKey("Tab", "c1");

    expectFocusAfterKey("ArrowDown", "c2");

    expectFocusAfterKey("Tab", "d2");

    expectFocusAfterKey("Shift+Tab", "c2");

    expectFocusAfterKey("Tab", "d2");

    // d3 is disabled, so down arrow should focus d4.

    expectFocusAfterKey("ArrowDown", "d4");

    expectFocusAfterKey("ArrowUp", "d2");

    expectFocusAfterKey("ArrowDown", "d4");

    // Down arrow should wrap at the bottom, skipping disabled.

    expectFocusAfterKey("ArrowDown", "d2");

    // Up arrow should wrap at the top.

    expectFocusAfterKey("ArrowUp", "d4");

    expectFocusAfterKey("Tab", "e2");

    // e3 is hidden, so down arrow should focus e4.

    expectFocusAfterKey("ArrowDown", "e4");

    expectFocusAfterKey("ArrowUp", "e2");

    expectFocusAfterKey("ArrowDown", "e4");

    // Down arrow should wrap at the bottom, skipping hidden.

    expectFocusAfterKey("ArrowDown", "e2");

    // Up arrow should wrap at the top.

    expectFocusAfterKey("ArrowUp", "e4");

    expectFocusAfterKey("Tab", "f2");

    // f3 is hidden, so down arrow should focus f4.

    expectFocusAfterKey("ArrowDown", "f4");

    expectFocusAfterKey("ArrowUp", "f2");

    expectFocusAfterKey("ArrowDown", "f4");

    // Down arrow should wrap at the bottom, skipping hidden.

    expectFocusAfterKey("ArrowDown", "f2");

    // Up arrow should wrap at the top.

    expectFocusAfterKey("ArrowUp", "f4");

    expectFocusAfterKey("Tab", "g2");

    // g3 is hidden, so down arrow should focus g4.

    expectFocusAfterKey("ArrowDown", "g4");

    expectFocusAfterKey("ArrowUp", "g2");

    expectFocusAfterKey("ArrowDown", "g4");

    // Down arrow should wrap at the bottom, skipping hidden.

    expectFocusAfterKey("ArrowDown", "g2");

    // Up arrow should wrap at the top.

    expectFocusAfterKey("ArrowUp", "g4");

    SimpleTest.finish();

});

</script>