show-modal-focusing-steps.html (2286B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="./resources/common.js"></script> 9 <script> 10 promise_test(() => { 11 return waitUntilLoadedAndAutofocused().then(() => { 12 outerButton = document.getElementById('outer-button'); 13 assert_equals(document.activeElement, outerButton); 14 15 // Test that focus goes to the dialog if the dialog has no focusable elements 16 var outerDialog = document.getElementById('outer-dialog'); 17 outerDialog.showModal(); 18 assert_equals(document.activeElement, outerDialog); 19 20 // Test that an autofocus element in the dialog gets focus. 21 var dialog = document.getElementById('dialog'); 22 dialog.showModal(); 23 autofocusButton = document.getElementById('autofocus-button'); 24 assert_equals(document.activeElement, autofocusButton); 25 dialog.close(); 26 27 // ... or else first focusable element in the dialog gets focus. 28 autofocusButton.parentNode.removeChild(autofocusButton); 29 dialog.showModal(); 30 firstButton = document.getElementById('first-button'); 31 assert_equals(document.activeElement, firstButton); 32 dialog.close(); 33 34 // ... or else the dialog itself gets focus.; 35 var buttons = dialog.querySelectorAll('button'); 36 for (var i = 0; i < buttons.length; ++i) 37 buttons[i].hidden = true; 38 dialog.showModal(); 39 assert_equals(document.activeElement, dialog); 40 dialog.close(); 41 42 document.getElementById('outer-dialog').close(); 43 }); 44 }, "focus when a modal dialog is opened"); 45 </script> 46 </head> 47 <body> 48 <button id="outer-button" autofocus></button> 49 <dialog id="outer-dialog"> 50 <dialog id="dialog" tabindex=0> 51 <button disabled></button> 52 <dialog> 53 <button autofocus></button> 54 </dialog> 55 <button id="first-button"></button> 56 <div> 57 <span> 58 <button id="autofocus-button" autofocus></button> 59 </span> 60 </div> 61 <button id="final-button"></button> 62 </dialog> 63 </dialog> 64 </body> 65 </html>