nested-focusgroups.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset="utf-8">

<title>HTML Test: focusgroup - Nested focusgroup navigation</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="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>

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

<!-- Test forward navigation through nested focusgroups -->

<div id=before1 tabindex=0>Before outer</div>

<div id=outer focusgroup="toolbar">

  <span id=outer1 tabindex=0 focusgroup-entry-priority>Outer 1 (priority)</span>

  <div id=inner focusgroup="toolbar no-memory">

    <span id=inner1 tabindex=0 focusgroup-entry-priority>Inner 1 (priority)</span>

    <span id=inner2 tabindex=0>Inner 2</span>

  </div>

  <span id=outer2 tabindex=0>Outer 2</span>

</div>

<div id=after1 tabindex=0>After outer</div>

<script>

  promise_test(async t => {

    document.getElementById("before1").focus();

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("outer1"),

                  "Tab enters outer focusgroup at focusgroup-entry-priority element");

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("inner1"),

                  "Tab enters nested inner focusgroup at focusgroup-entry-priority element");

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("outer2"),

                  "Tab moves to second segment of outer focusgroup");

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("after1"),

                  "Tab moves outside both focusgroups");

  }, "Forward Tab navigation through nested focusgroups");

  promise_test(async t => {

    document.getElementById("after1").focus();

    await navigateFocusBackward();

    assert_equals(document.activeElement, document.getElementById("outer2"),

                  "Shift+Tab enters second segment of outer focusgroup");

    await navigateFocusBackward();

    assert_equals(document.activeElement, document.getElementById("inner1"),

                  "Shift+Tab enters nested focusgroup at focusgroup-entry-priority element");

    await navigateFocusBackward();

    assert_equals(document.activeElement, document.getElementById("outer1"),

                  "Shift+Tab moves to outer focusgroup");

    await navigateFocusBackward();

    assert_equals(document.activeElement, document.getElementById("before1"),

                  "Shift+Tab exits both focusgroups");

  }, "Reverse Shift+Tab navigation through nested focusgroups");

</script>