empty-and-non-focusable.html (2907B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Empty and non-focusable focusgroups</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 <!-- Empty focusgroup --> 15 <div id=before1 tabindex=0>Before empty</div> 16 <div id=empty focusgroup="toolbar"></div> 17 <div id=after1 tabindex=0>After empty</div> 18 19 <!-- Focusgroup with only non-focusable elements --> 20 <div id=before2 tabindex=0>Before non-focusable</div> 21 <div id=nonfocus focusgroup="toolbar"> 22 <span id=span1>Non-focusable 1</span> 23 <span id=span2>Non-focusable 2</span> 24 </div> 25 <div id=after2 tabindex=0>After non-focusable</div> 26 27 <!-- Focusgroup with only disabled elements --> 28 <div id=before3 tabindex=0>Before disabled</div> 29 <div id=disabled focusgroup="toolbar"> 30 <button id=btn-disabled disabled>Disabled</button> 31 </div> 32 <div id=after3 tabindex=0>After disabled</div> 33 34 <!-- Empty focusgroup container but container itself is focusable --> 35 <div id=before4 tabindex=0>Before focusable container</div> 36 <div id=container tabindex=0 focusgroup="toolbar"></div> 37 <div id=after4 tabindex=0>After focusable container</div> 38 39 <script> 40 promise_test(async t => { 41 document.getElementById("before1").focus(); 42 await navigateFocusForward(); 43 assert_equals(document.activeElement, document.getElementById("after1"), 44 "Tab skips empty focusgroup"); 45 }, "Empty focusgroup is skipped during Tab navigation"); 46 47 promise_test(async t => { 48 document.getElementById("before2").focus(); 49 await navigateFocusForward(); 50 assert_equals(document.activeElement, document.getElementById("after2"), 51 "Tab skips focusgroup with only non-focusable elements"); 52 }, "Focusgroup with only non-focusable elements is skipped"); 53 54 promise_test(async t => { 55 document.getElementById("before3").focus(); 56 await navigateFocusForward(); 57 assert_equals(document.activeElement, document.getElementById("after3"), 58 "Tab skips focusgroup with disabled elements"); 59 }, "Focusgroup with only disabled elements is skipped"); 60 61 promise_test(async t => { 62 document.getElementById("before4").focus(); 63 await navigateFocusForward(); 64 assert_equals(document.activeElement, document.getElementById("container"), 65 "Tab focuses the focusgroup container itself when empty but focusable"); 66 }, "Focusable empty focusgroup container receives focus"); 67 </script>