test_focus_removal.html (2861B)
1 <html> 2 3 <head> 4 <title>Test removal of focused accessible</title> 5 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 11 <script type="application/javascript" 12 src="../common.js"></script> 13 <script type="application/javascript" 14 src="../promisified-events.js"></script> 15 16 <script type="application/javascript"> 17 async function setFocus(aNodeToFocus, aExpectedFocus) { 18 let expected = aExpectedFocus || aNodeToFocus; 19 let focused = waitForEvent(EVENT_FOCUS, expected); 20 info("Focusing " + aNodeToFocus.id); 21 aNodeToFocus.focus(); 22 await focused; 23 ok(true, expected.id + " focused after " + 24 aNodeToFocus.id + ".focus()"); 25 } 26 27 async function expectFocusAfterRemove(aNodeToRemove, aExpectedFocus, aDisplayNone = false) { 28 let focused = waitForEvent(EVENT_FOCUS, aExpectedFocus); 29 info("Removing " + aNodeToRemove.id); 30 if (aDisplayNone) { 31 aNodeToRemove.style.display = "none"; 32 } else { 33 aNodeToRemove.remove(); 34 } 35 await focused; 36 let friendlyExpected = aExpectedFocus == document ? 37 "document" : aExpectedFocus.id; 38 ok(true, friendlyExpected + " focused after " + 39 aNodeToRemove.id + " removed"); 40 } 41 42 async function doTests() { 43 info("Testing removal of focused node itself"); 44 let button = getNode("button"); 45 await setFocus(button); 46 await expectFocusAfterRemove(button, document); 47 48 info("Testing removal of focused node's parent"); 49 let dialog = getNode("dialog"); 50 let dialogButton = getNode("dialogButton"); 51 await setFocus(dialogButton); 52 await expectFocusAfterRemove(dialog, document); 53 54 info("Testing removal of aria-activedescendant target"); 55 let listbox = getNode("listbox"); 56 let option = getNode("option"); 57 await setFocus(listbox, option); 58 await expectFocusAfterRemove(option, listbox); 59 60 info("Test hiding focused element with display: none"); 61 let groupingButton = getNode("groupingButton"); 62 await setFocus(groupingButton); 63 await expectFocusAfterRemove(groupingButton, document, true); 64 65 SimpleTest.finish(); 66 } 67 68 SimpleTest.waitForExplicitFinish(); 69 addA11yLoadEvent(doTests); 70 </script> 71 </head> 72 73 <body> 74 75 <p id="display"></p> 76 <div id="content" style="display: none"></div> 77 <pre id="test"> 78 </pre> 79 80 <button id="button"></button> 81 82 <div role="dialog" id="dialog"> 83 <button id="dialogButton"></button> 84 </div> 85 86 <div role="listbox" id="listbox" tabindex="0" aria-activedescendant="option"> 87 <div role="option" id="option"></div> 88 </div> 89 90 <div role="group" id="grouping"> 91 <button id="groupingButton"> 92 </div> 93 94 </body> 95 </html>