mixed-content-navigation.html (3682B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Navigation with mixed focusable and non-focusable descendants</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="../resources/focusgroup-utils.js"></script> 12 13 <div id=root focusgroup="toolbar"> 14 <span id=item1 tabindex=0>Item 1</span> 15 16 <div class="section"> 17 <h3>Section Title</h3> 18 <p>Some descriptive text that is not focusable</p> 19 <span id=item2 tabindex=0>Item 2</span> 20 21 <div> 22 <span>More non-focusable content</span> 23 <div> 24 <span>Nested non-focusable</span> 25 <span id=item3 tabindex=0>Item 3</span> 26 <span>More text</span> 27 </div> 28 </div> 29 </div> 30 31 <div class="another-section"> 32 <ul> 33 <li>List item (not focusable)</li> 34 <li><span id=item4 tabindex=0>Item 4</span></li> 35 <li>Another list item</li> 36 </ul> 37 </div> 38 39 <footer> 40 <p>Footer content</p> 41 <span id=item5 tabindex=0>Item 5</span> 42 </footer> 43 </div> 44 45 <script> 46 47 promise_test(async t => { 48 var item1 = document.getElementById("item1"); 49 var item2 = document.getElementById("item2"); 50 var item3 = document.getElementById("item3"); 51 var item4 = document.getElementById("item4"); 52 var item5 = document.getElementById("item5"); 53 54 await focusAndKeyPress(item1, kArrowRight); 55 assert_equals(document.activeElement, item2, "Should skip non-focusable content and navigate to item2"); 56 57 await focusAndKeyPress(item2, kArrowRight); 58 assert_equals(document.activeElement, item3, "Should skip non-focusable nested content and navigate to item3"); 59 60 await focusAndKeyPress(item3, kArrowRight); 61 assert_equals(document.activeElement, item4, "Should skip list content and navigate to focusable span"); 62 63 await focusAndKeyPress(item4, kArrowRight); 64 assert_equals(document.activeElement, item5, "Should skip footer text and navigate to final span"); 65 }, "Navigation should skip non-focusable descendants and only move between focusable items"); 66 67 promise_test(async t => { 68 var item1 = document.getElementById("item1"); 69 var item2 = document.getElementById("item2"); 70 var item3 = document.getElementById("item3"); 71 var item4 = document.getElementById("item4"); 72 var item5 = document.getElementById("item5"); 73 74 item5.focus(); 75 await focusAndKeyPress(item5, kArrowLeft); 76 assert_equals(document.activeElement, item4, "Should navigate backward to link"); 77 78 await focusAndKeyPress(item4, kArrowLeft); 79 assert_equals(document.activeElement, item3, "Should navigate backward to nested span"); 80 81 await focusAndKeyPress(item3, kArrowLeft); 82 assert_equals(document.activeElement, item2, "Should navigate backward to span"); 83 84 await focusAndKeyPress(item2, kArrowLeft); 85 assert_equals(document.activeElement, item1, "Should navigate backward to first item"); 86 }, "Backward navigation should skip non-focusable descendants"); 87 88 promise_test(async t => { 89 var item1 = document.getElementById("item1"); 90 var item2 = document.getElementById("item2"); 91 92 await focusAndKeyPress(item1, kArrowDown); 93 assert_equals(document.activeElement, item2, "Vertical navigation should work with mixed content"); 94 }, "Vertical navigation should work correctly with mixed focusable/non-focusable content"); 95 96 </script>