sequential-focus.html (1970B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Text Fragments Test</title> 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 </head> 11 <body> 12 <!-- 13 The document performs a same-document navigation, which contains the text fragment 'foo'. 14 'foo' is inside of a <a> element. If it were focused, hitting `Enter` would 15 directly navigate to its href, which is not intended. 16 Instead, it should only have the sequential focus, ie. pressing `Tab` would focus the next 17 focusable element. 18 --> 19 <a href="#" id="link">foo</a> 20 <button id="next-button">Next Focusable Element</button> 21 <script> 22 // Define the test for text fragment focus behavior 23 promise_test(async t => { 24 const link = document.getElementById('link'); 25 const nextButton = document.getElementById('next-button'); 26 27 const hashChange = new Promise(r => window.addEventListener('hashchange', r, { once: true })); 28 29 // Simulate a same-document load to the text fragment 30 location.hash = '#some-hash-to-trigger-hashchange:~:text=foo'; 31 32 await hashChange; 33 34 // Assert that the link element does not have focus initially 35 assert_not_equals(document.activeElement, link, 'Link element should not have focus initially'); 36 37 // Simulate pressing TAB to shift focus to the next element 38 await test_driver.send_keys(document.body, '\uE004'); // '\uE004' is the WebDriver key code for TAB 39 40 // Assert that the next focusable element (button) has focus 41 assert_equals(document.activeElement, nextButton, 'Next focusable element should have focus after pressing TAB'); 42 }, 'Text Fragment focus behavior'); 43 </script> 44 </body> 45 </html>