dynamic-changes.html (2545B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Dynamic DOM and focusgroup-entry-priority changes</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 focusgroup-entry-priority changes during navigation --> 15 <div id=before1 tabindex=0>Before test 1</div> 16 17 <div id=fg1 focusgroup="toolbar no-memory"> 18 <span id=item1 tabindex=0>Item 1</span> 19 <span id=item2 tabindex=0>Item 2</span> 20 </div> 21 22 <div id=after1 tabindex=0>After test 1</div> 23 24 <!-- Test disabled element changes --> 25 <div id=before2 tabindex=0>Before test 2</div> 26 27 <div id=fg2 focusgroup="toolbar no-memory"> 28 <button id=btn1>Button 1</button> 29 <button id=btn2 disabled>Button 2</button> 30 </div> 31 32 <div id=after2 tabindex=0>After test 2</div> 33 34 <script> 35 promise_test(async t => { 36 document.getElementById("before1").focus(); 37 await navigateFocusForward(); 38 assert_equals(document.activeElement, document.getElementById("item1"), 39 "First item selected as entry element initially (tree order)"); 40 41 document.getElementById("item2").setAttribute("focusgroup-entry-priority", ""); 42 43 document.getElementById("before1").focus(); 44 await navigateFocusForward(); 45 assert_equals(document.activeElement, document.getElementById("item2"), 46 "After adding focusgroup-entry-priority, new priority is respected"); 47 }, "Dynamic focusgroup-entry-priority changes affect entry element selection"); 48 49 promise_test(async t => { 50 document.getElementById("before2").focus(); 51 await navigateFocusForward(); 52 assert_equals(document.activeElement, document.getElementById("btn1"), 53 "Tab skips disabled button"); 54 55 document.getElementById("btn2").removeAttribute("disabled"); 56 57 document.getElementById("before2").focus(); 58 await navigateFocusForward(); 59 assert_equals(document.activeElement, document.getElementById("btn1"), 60 "First enabled button selected in tree order"); 61 }, "Enabling disabled elements makes them available for tab stop"); 62 </script>