tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

nested-focusgroups.html (2957B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>HTML Test: focusgroup - Nested focusgroup navigation</title>
      4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
      5 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/resources/testdriver.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 <script src="/resources/testdriver-actions.js"></script>
     11 <script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
     12 <script src="../resources/focusgroup-utils.js"></script>
     13 
     14 <!-- Test forward navigation through nested focusgroups -->
     15 <div id=before1 tabindex=0>Before outer</div>
     16 
     17 <div id=outer focusgroup="toolbar">
     18  <span id=outer1 tabindex=0 focusgroup-entry-priority>Outer 1 (priority)</span>
     19  <div id=inner focusgroup="toolbar no-memory">
     20    <span id=inner1 tabindex=0 focusgroup-entry-priority>Inner 1 (priority)</span>
     21    <span id=inner2 tabindex=0>Inner 2</span>
     22  </div>
     23  <span id=outer2 tabindex=0>Outer 2</span>
     24 </div>
     25 
     26 <div id=after1 tabindex=0>After outer</div>
     27 
     28 <script>
     29  promise_test(async t => {
     30    document.getElementById("before1").focus();
     31    await navigateFocusForward();
     32    assert_equals(document.activeElement, document.getElementById("outer1"),
     33                  "Tab enters outer focusgroup at focusgroup-entry-priority element");
     34 
     35    await navigateFocusForward();
     36    assert_equals(document.activeElement, document.getElementById("inner1"),
     37                  "Tab enters nested inner focusgroup at focusgroup-entry-priority element");
     38 
     39    await navigateFocusForward();
     40    assert_equals(document.activeElement, document.getElementById("outer2"),
     41                  "Tab moves to second segment of outer focusgroup");
     42 
     43    await navigateFocusForward();
     44    assert_equals(document.activeElement, document.getElementById("after1"),
     45                  "Tab moves outside both focusgroups");
     46  }, "Forward Tab navigation through nested focusgroups");
     47 
     48  promise_test(async t => {
     49    document.getElementById("after1").focus();
     50    await navigateFocusBackward();
     51    assert_equals(document.activeElement, document.getElementById("outer2"),
     52                  "Shift+Tab enters second segment of outer focusgroup");
     53 
     54    await navigateFocusBackward();
     55    assert_equals(document.activeElement, document.getElementById("inner1"),
     56                  "Shift+Tab enters nested focusgroup at focusgroup-entry-priority element");
     57 
     58    await navigateFocusBackward();
     59    assert_equals(document.activeElement, document.getElementById("outer1"),
     60                  "Shift+Tab moves to outer focusgroup");
     61 
     62    await navigateFocusBackward();
     63    assert_equals(document.activeElement, document.getElementById("before1"),
     64                  "Shift+Tab exits both focusgroups");
     65  }, "Reverse Shift+Tab navigation through nested focusgroups");
     66 </script>