deeply-nested-items.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/focusgroup/tentative/descendant-navigation/deeply-nested-items.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>HTML Test: focusgroup - Navigation works with deeply nested descendants</title>

<link rel="author" title="Microsoft" href="http://www.microsoft.com/">

<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">

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

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

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

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

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

<script src="../resources/focusgroup-utils.js"></script>

<div id=root focusgroup="toolbar">

  <span id=item1 tabindex=0>Item 1</span>

  <div class="container">

    <div class="sub-container">

      <div class="deep-container">

        <span id=item2 tabindex=-1>Item 2 (deeply nested)</span>

      </div>

    </div>

  </div>

  <span>

    <span>

      <span id=item3 tabindex=-1>Item 3 (nested in spans)</span>

    </span>

  </span>

  <div>

    <p>Some text</p>

    <div>

      <span id=item4 tabindex=-1>Item 4 (nested)</span>

    </div>

  </div>

  <span id=item5 tabindex=-1>Item 5</span>

</div>

<script>

  promise_test(async t => {

    var item1 = document.getElementById("item1");

    var item2 = document.getElementById("item2");

    var item3 = document.getElementById("item3");

    var item4 = document.getElementById("item4");

    var item5 = document.getElementById("item5");

    await focusAndKeyPress(item1, kArrowRight);

    assert_equals(document.activeElement, item2, "Should navigate to deeply nested button");

    await focusAndKeyPress(item2, kArrowRight);

    assert_equals(document.activeElement, item3, "Should navigate to button nested in spans");

    await focusAndKeyPress(item3, kArrowRight);

    assert_equals(document.activeElement, item4, "Should navigate to nested span");

    await focusAndKeyPress(item4, kArrowRight);

    assert_equals(document.activeElement, item5, "Should navigate to final span");

  }, "Forward navigation should work with deeply nested focusgroup descendants");

  promise_test(async t => {

    var item1 = document.getElementById("item1");

    var item2 = document.getElementById("item2");

    var item3 = document.getElementById("item3");

    var item4 = document.getElementById("item4");

    var item5 = document.getElementById("item5");

    item5.focus();

    await focusAndKeyPress(item5, kArrowLeft);

    assert_equals(document.activeElement, item4, "Should navigate backward to nested input");

    await focusAndKeyPress(item4, kArrowLeft);

    assert_equals(document.activeElement, item3, "Should navigate backward to span nested in spans");

    await focusAndKeyPress(item3, kArrowLeft);

    assert_equals(document.activeElement, item2, "Should navigate backward to deeply nested span");

    await focusAndKeyPress(item2, kArrowLeft);

    assert_equals(document.activeElement, item1, "Should navigate backward to first span");

  }, "Backward navigation should work with deeply nested focusgroup descendants");

  promise_test(async t => {

    var item1 = document.getElementById("item1");

    var item2 = document.getElementById("item2");

    await focusAndKeyPress(item1, kArrowDown);

    assert_equals(document.activeElement, item2, "Vertical navigation should work with nested descendants");

  }, "Vertical navigation should work with nested descendants");

</script>