focusgroup-segments.html (6455B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Sequential navigation with focusgroup segments</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 <!-- Opted-out elements create multiple focusgroup entry points --> 15 <div id=before tabindex=0>Before toolbar</div> 16 17 <div id=toolbar focusgroup="toolbar wrap" aria-label="Text formatting"> 18 <button id=bold type="button" focusgroup-entry-priority>Bold (priority)</button> 19 <button id=italic type="button">Italic</button> 20 <span id=help-group focusgroup="none" aria-label="Help group"> 21 <button id=help type="button">Help</button> 22 <button id=shortcuts type="button">Shortcuts</button> 23 </span> 24 <button id=underline type="button" focusgroup-entry-priority>Underline (priority)</button> 25 </div> 26 27 <div id=after tabindex=0>After toolbar</div> 28 29 <!-- Test complex nested opt-out --> 30 <div id=before2 tabindex=0>Before complex</div> 31 32 <div id=complex-focusgroup focusgroup="toolbar no-memory"> 33 <button id=item1 focusgroup-entry-priority>Item 1 (priority)</button> 34 <div id=nested-opt-out focusgroup="none"> 35 <button id=opted-out-1>Opted out 1</button> 36 <div id=deeply-nested focusgroup="none"> 37 <button id=deeply-opted-out>Deeply opted out</button> 38 </div> 39 <button id=opted-out-2>Opted out 2</button> 40 </div> 41 <button id=item2 focusgroup-entry-priority>Item 2 (priority)</button> 42 <button id=item3>Item 3</button> 43 </div> 44 45 <div id=after2 tabindex=0>After complex</div> 46 47 <script> 48 promise_test(async t => { 49 var before = document.getElementById("before"); 50 var bold = document.getElementById("bold"); 51 var help = document.getElementById("help"); 52 var shortcuts = document.getElementById("shortcuts"); 53 var underline = document.getElementById("underline"); 54 var after = document.getElementById("after"); 55 56 before.focus(); 57 await navigateFocusForward(); 58 assert_equals(document.activeElement, bold, "Tab from before should focus Bold (first focusgroup item)"); 59 60 await navigateFocusForward(); 61 assert_equals(document.activeElement, help, "Tab from Bold should focus Help (first opted-out element)"); 62 63 await navigateFocusForward(); 64 assert_equals(document.activeElement, shortcuts, "Tab from Help should focus Shortcuts (next in opted-out subtree)"); 65 66 await navigateFocusForward(); 67 assert_equals(document.activeElement, underline, "Tab from Shortcuts should focus Underline (re-enter focusgroup)"); 68 69 await navigateFocusForward(); 70 assert_equals(document.activeElement, after, "Tab from Underline should exit focusgroup"); 71 }, "Tab navigation through focusgroup segments - forward direction"); 72 73 promise_test(async t => { 74 var before = document.getElementById("before"); 75 var italic = document.getElementById("italic"); 76 var help = document.getElementById("help"); 77 var shortcuts = document.getElementById("shortcuts"); 78 var underline = document.getElementById("underline"); 79 var after = document.getElementById("after"); 80 81 help.focus(); 82 await navigateFocusBackward(); 83 assert_equals(document.activeElement, bold, "Shift+Tab from Help should focus Bold"); 84 85 await navigateFocusBackward(); 86 assert_equals(document.activeElement, before, "Shift+Tab from Bold should exit focusgroup"); 87 }, "Shift+Tab navigation through focusgroup segments - backward direction"); 88 89 promise_test(async t => { 90 var bold = document.getElementById("bold"); 91 var italic = document.getElementById("italic"); 92 var underline = document.getElementById("underline"); 93 94 bold.focus(); 95 96 await focusAndKeyPress(bold, kArrowRight); 97 assert_equals(document.activeElement, italic, "Arrow right should move from Bold to Italic"); 98 99 await focusAndKeyPress(italic, kArrowRight); 100 assert_equals(document.activeElement, underline, "Arrow right should skip opted-out span and move to Underline"); 101 102 await focusAndKeyPress(underline, kArrowLeft); 103 assert_equals(document.activeElement, italic, "Arrow left should skip opted-out span and move to Italic"); 104 }, "Arrow key navigation treats opted-out elements as if they don't exist"); 105 106 promise_test(async t => { 107 var before2 = document.getElementById("before2"); 108 var item1 = document.getElementById("item1"); 109 var optedOut1 = document.getElementById("opted-out-1"); 110 var deeplyOptedOut = document.getElementById("deeply-opted-out"); 111 var optedOut2 = document.getElementById("opted-out-2"); 112 var item2 = document.getElementById("item2"); 113 var after2 = document.getElementById("after2"); 114 115 before2.focus(); 116 await navigateFocusForward(); 117 assert_equals(document.activeElement, item1, "Tab should enter at Item 1"); 118 119 await navigateFocusForward(); 120 assert_equals(document.activeElement, optedOut1, "Tab should move to first opted-out element"); 121 122 await navigateFocusForward(); 123 assert_equals(document.activeElement, deeplyOptedOut, "Tab should move to deeply nested opted-out element"); 124 125 await navigateFocusForward(); 126 assert_equals(document.activeElement, optedOut2, "Tab should move to second opted-out element"); 127 128 await navigateFocusForward(); 129 assert_equals(document.activeElement, item2, "Tab should re-enter focusgroup at Item 2"); 130 131 await navigateFocusForward(); 132 assert_equals(document.activeElement, after2, "Tab should exit focusgroup"); 133 }, "Complex nested opt-out creates proper focusgroup segments"); 134 135 promise_test(async t => { 136 var help = document.getElementById("help"); 137 var shortcuts = document.getElementById("shortcuts"); 138 139 help.focus(); 140 141 await focusAndKeyPress(help, kArrowRight); 142 assert_equals(document.activeElement, help, "Arrow keys should not work within opted-out section"); 143 144 await focusAndKeyPress(help, kArrowDown); 145 assert_equals(document.activeElement, help, "Vertical arrow keys should not work within opted-out section"); 146 }, "Arrow keys do not work within opted-out focusgroup sections"); 147 </script>