none-creates-barriers.html (3190B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Opt-out creates navigation barriers</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 <button id=item1 tabindex=0>Item 1</button> 15 <button id=item2 tabindex=0>Item 2</button> 16 17 <div id=optout focusgroup="none"> 18 <button id=optout_item1 tabindex=0>Opted out item 1</button> 19 <div> 20 <button id=optout_item2 tabindex=0>Opted out item 2</button> 21 </div> 22 </div> 23 24 <button id=item3 tabindex=0>Item 3</button> 25 <button id=item4 tabindex=0>Item 4</button> 26 </div> 27 28 <script> 29 30 promise_test(async t => { 31 var item1 = document.getElementById("item1"); 32 var item2 = document.getElementById("item2"); 33 var item3 = document.getElementById("item3"); 34 var optout_item1 = document.getElementById("optout_item1"); 35 36 await focusAndKeyPress(item1, kArrowRight); 37 assert_equals(document.activeElement, item2, "Should navigate to item2"); 38 39 await focusAndKeyPress(item2, kArrowRight); 40 assert_equals(document.activeElement, item3, "Should skip opted-out section and navigate to item3"); 41 42 assert_not_equals(document.activeElement, optout_item1, "Should not navigate to opted-out item"); 43 }, "Navigation should skip elements in opted-out focusgroup subtree"); 44 45 promise_test(async t => { 46 var item2 = document.getElementById("item2"); 47 var item3 = document.getElementById("item3"); 48 var item4 = document.getElementById("item4"); 49 var optout_item1 = document.getElementById("optout_item1"); 50 51 item4.focus(); 52 await focusAndKeyPress(item4, kArrowLeft); 53 assert_equals(document.activeElement, item3, "Should navigate to item3"); 54 55 await focusAndKeyPress(item3, kArrowLeft); 56 assert_equals(document.activeElement, item2, "Should skip opted-out section and navigate to item2"); 57 58 assert_not_equals(document.activeElement, optout_item1, "Should not navigate to opted-out item from reverse"); 59 }, "Backward navigation should skip elements in opted-out focusgroup subtree"); 60 61 promise_test(async t => { 62 var optout_item1 = document.getElementById("optout_item1"); 63 var optout_item2 = document.getElementById("optout_item2"); 64 65 optout_item1.focus(); 66 assert_equals(document.activeElement, optout_item1, "Should be able to manually focus opted-out item"); 67 68 await focusAndKeyPress(optout_item1, kArrowRight); 69 assert_equals(document.activeElement, optout_item1, "Arrow keys should not work within opted-out section"); 70 71 await focusAndKeyPress(optout_item1, kArrowDown); 72 assert_equals(document.activeElement, optout_item1, "Vertical arrow keys should not work within opted-out section"); 73 }, "Arrow keys should not work within opted-out focusgroup sections"); 74 75 </script>