popover-not-keyboard-focusable.html (2116B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover keyboard focus behaviors</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 6 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 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 13 <button id=firstfocus tabindex="0">Button 1</button> 14 <div popover> 15 <p>This is a popover without a focusable element</p> 16 </div> 17 <button id=secondfocus tabindex="0">Button 2</button> 18 19 <script> 20 promise_test(async () => { 21 const b1 = document.getElementById('firstfocus'); 22 const b2 = document.getElementById('secondfocus'); 23 const popover = document.querySelector('[popover]'); 24 b1.focus(); 25 assert_equals(document.activeElement,b1); 26 popover.showPopover(); 27 assert_true(popover.matches(':popover-open')); 28 assert_equals(document.activeElement,b1); 29 // Tab once 30 await new test_driver.send_keys(document.body,'\uE004'); // Tab 31 assert_equals(document.activeElement, b2, 'Keyboard focus should skip the open popover'); 32 assert_true(popover.matches(':popover-open'),'changing focus should not close the popover'); 33 popover.hidePopover(); 34 35 // Add a focusable button to the popover and make sure we can focus that 36 const button = document.createElement('button'); 37 button.setAttribute("tabindex", "0"); 38 popover.appendChild(button); 39 b1.focus(); 40 popover.showPopover(); 41 assert_equals(document.activeElement,b1); 42 // Tab once 43 await new test_driver.send_keys(document.body,'\uE004'); // Tab 44 assert_equals(document.activeElement, button, 'Keyboard focus should go to the contained button'); 45 assert_true(popover.matches(':popover-open'),'changing focus to the popover should leave it showing'); 46 popover.hidePopover(); 47 assert_false(popover.matches(':popover-open')); 48 }, "Popover should not be keyboard focusable"); 49 </script>