popover-focus-tabindex.html (1896B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover focus behaviors</title> 4 <meta name="timeout" content="long"> 5 <link rel="author" title="Edgar Chen" href="mailto:echen@mozilla.com"> 6 <link rel=help href="https://html.spec.whatwg.org/#flattened-tabindex-ordered-focus-navigation-scope"> 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="resources/popover-utils.js"></script> 13 14 <div id=focus-tabindex> 15 <span tabindex=0>First other focusable element</span> 16 <button popovertarget=focus-tabindex-p tabindex="1">Toggle popover</button> 17 <div popover id=focus-tabindex-p> 18 Popover with <button tabindex="0">focusable element</button> 19 </div> 20 <span tabindex=0>Second other focusable element</span> 21 </div> 22 <script> 23 promise_test(async t => { 24 const popover = document.querySelector('#focus-tabindex>[popover]'); 25 t.add_cleanup(() => { 26 popover.hidePopover(); 27 }); 28 29 const invoker = document.querySelector('#focus-tabindex>button'); 30 const others = document.querySelectorAll('#focus-tabindex>span'); 31 invoker.focus(); // Make sure button is focused. 32 assert_equals(document.activeElement, invoker); 33 invoker.click(); // Activate the invoker 34 assert_true(popover.matches(':popover-open'), 'Popover should be invoked by invoker'); 35 assert_equals(document.activeElement, invoker, 'Invoker should still be focused'); 36 others[1].focus(); 37 assert_equals(document.activeElement, others[1], "Second focused element should be focused"); 38 await sendShiftTab(); 39 assert_equals(document.activeElement, others[0], 'Popover should be skipped since its invoker has different tabindex'); 40 }, "Cases where the popover invoker has different tabindex"); 41 </script>