|
| 1 | +<!DOCTYPE html> |
| 2 | +<meta charset="utf-8" /> |
| 3 | +<title>Popup keyboard focus behaviors</title> |
| 4 | +<link rel=" author" href=" mailto:[email protected]" > |
| 5 | +<link rel=help href="https://open-ui.org/components/popup.research.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-actions.js"></script> |
| 10 | +<script src="/resources/testdriver-vendor.js"></script> |
| 11 | + |
| 12 | +<button id=firstfocus>Button 1</button> |
| 13 | +<popup> |
| 14 | + <p>This is a popup without a focusable element</p> |
| 15 | +</popup> |
| 16 | +<button id=secondfocus>Button 2</button> |
| 17 | + |
| 18 | +<script> |
| 19 | +promise_test(async () => { |
| 20 | + const b1 = document.getElementById('firstfocus'); |
| 21 | + const b2 = document.getElementById('secondfocus'); |
| 22 | + const popup = document.querySelector('popup'); |
| 23 | + b1.focus(); |
| 24 | + assert_equals(document.activeElement,b1); |
| 25 | + popup.show(); |
| 26 | + assert_true(popup.open); |
| 27 | + assert_equals(document.activeElement,b1); |
| 28 | + // Tab once |
| 29 | + await new test_driver.send_keys(document.body,'\uE004'); // Tab |
| 30 | + assert_equals(document.activeElement, b2, 'Keyboard focus should skip the open popup'); |
| 31 | + popup.hide(); |
| 32 | + |
| 33 | + // Add a focusable button to the popup and make sure we can focus that |
| 34 | + const button = document.createElement('button'); |
| 35 | + popup.appendChild(button); |
| 36 | + b1.focus(); |
| 37 | + popup.show(); |
| 38 | + assert_equals(document.activeElement,b1); |
| 39 | + // Tab once |
| 40 | + await new test_driver.send_keys(document.body,'\uE004'); // Tab |
| 41 | + assert_equals(document.activeElement, button, 'Keyboard focus should go to the contained button'); |
| 42 | + popup.hide(); |
| 43 | +}, "Popup should not be keyboard focusable"); |
| 44 | +</script> |
0 commit comments