popover-focus-form-control.html (1768B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>Popover focus behaviors in form control elements</title> 4 <meta name="timeout" content="long" /> 5 <link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com"> 6 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script> 13 <script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script> 14 <script src="resources/popover-utils.js"></script> 15 16 <div> 17 <button popovertarget="popover" id="invoker">Open popover</button> 18 <div popover id="popover"> 19 <input type="checkbox" id="target1" /> 20 <input type="checkbox" id="target2" /> 21 <my-element id="host"> 22 <template shadowrootmode="open"> 23 <input type="checkbox" id="target3" /> 24 <input type="checkbox" id="target4" /> 25 </template> 26 </my-element> 27 <button id="close">Close popover</button> 28 </div> 29 <button id="after"> 30 This button is where focus should land after traversing this popover 31 </button> 32 </div> 33 34 <script> 35 promise_test(async () => { 36 // Open popover 37 invoker.focus(); 38 invoker.click(); 39 assert_true(popover.matches(":popover-open")); 40 assert_equals(document.activeElement, invoker); 41 42 await assert_focus_navigation_bidirectional([ 43 'invoker', 44 'target1', 45 'target2', 46 'host/target3', 47 'host/target4', 48 'close', 49 'after', 50 ]); 51 }, 'Focus navigation for form controls contained in a popover'); 52 </script>