child-sequential-focus.html (2332B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/pull/8199"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <dialog autofocus id=autofocusdialog data-description="dialog element with autofocus should get initial focus." class=target> 8 <button tabindex="0">focusable button</button> 9 <button tabindex="0" autofocus>autofocusable button</button> 10 </dialog> 11 12 <dialog id=keyboardfocusdialog data-description="Only keyboard-focusable elements should get dialog initial focus."> 13 <button tabindex="-1">mouse focusable button</button> 14 <button tabindex="0" class=target>keyboard focusable button</button> 15 </dialog> 16 17 <dialog id=autofocuswithoutkeyboarddialog data-description="Autofocus takes precedence over keyboard-focusable requirement."> 18 <button tabindex="0">keyboard focusable button</button> 19 <button tabindex="-1" autofocus class=target>mouse focusable autofocus button</button> 20 </dialog> 21 22 <dialog id=subtree data-description="Only keyboard-focusable elements should get dialog initial focus including in subtrees."> 23 <div> 24 <button tabindex="-1">mouse focusable button</button> 25 <button tabindex="0" class=target>keyboard focusable button</button> 26 </div> 27 </dialog> 28 29 <dialog id=nestedbuttons data-description="Only keyboard-focusable elements should get dialog initial focus including in nested buttons."> 30 <button tabindex="-1"> 31 <span>mouse focusable button</span> 32 <button tabindex="-1">nested mouse focusable button</button> 33 </button> 34 <button tabindex="0" class=target>keyboard focusable button</button> 35 </dialog> 36 37 <script> 38 document.querySelectorAll('dialog').forEach(dialog => { 39 test(t => { 40 let target = dialog.querySelector('.target'); 41 if (dialog.classList.contains('target')) { 42 target = dialog; 43 } 44 t.add_cleanup(() => { 45 if (dialog.open) 46 dialog.close(); 47 }); 48 49 dialog.showModal(); 50 assert_equals(document.activeElement, target, 51 'showModal: the target element did not receive initial focus.'); 52 dialog.close(); 53 54 dialog.show(); 55 assert_equals(document.activeElement, target, 56 'show: the target element did not receive initial focus.'); 57 dialog.close(); 58 }, dialog.dataset.description); 59 }); 60 </script>