test_focusable_statechange.html (4003B)
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="../role.js"></script> 15 <script type="application/javascript" 16 src="../states.js"></script> 17 <script type="application/javascript" 18 src="../promisified-events.js"></script> 19 20 <script type="application/javascript"> 21 function focusableStateChange(id, enabled) { 22 return [EVENT_STATE_CHANGE, e => { 23 e.QueryInterface(nsIAccessibleStateChangeEvent); 24 return getAccessible(id) == e.accessible && 25 e.state == STATE_FOCUSABLE && (enabled == undefined || e.isEnabled == enabled); 26 }]; 27 } 28 29 function editableStateChange(id, enabled) { 30 return [EVENT_STATE_CHANGE, e => { 31 e.QueryInterface(nsIAccessibleStateChangeEvent); 32 return getAccessible(id) == e.accessible && 33 e.state == EXT_STATE_EDITABLE && e.isExtraState && 34 (enabled == undefined || e.isEnabled == enabled); 35 }]; 36 } 37 38 async function doTests() { 39 info("disable buttons."); 40 // Expect focusable change with 'disabled', 41 // and don't expect it with 'aria-disabled'. 42 let p = waitForEvents({ 43 expected: [focusableStateChange("button2", false)], 44 unexpected: [focusableStateChange("button1")] 45 }); 46 getNode("button1").setAttribute("aria-disabled", "true"); 47 getNode("button2").disabled = true; 48 await p; 49 50 info("re-enable button"); 51 // Expect focusable change with 'disabled', 52 // and don't expect it with 'aria-disabled'. 53 p = waitForEvents({ 54 expected: [focusableStateChange("button2", true)], 55 unexpected: [focusableStateChange("button1")] 56 }); 57 getNode("button1").setAttribute("aria-disabled", "false"); 58 getNode("button2").disabled = false; 59 await p; 60 61 info("add tabindex"); 62 // Expect focusable change on non-input, 63 // and don't expect event on an already focusable input. 64 p = waitForEvents({ 65 expected: [focusableStateChange("div", true)], 66 unexpected: [focusableStateChange("button2")] 67 }); 68 getNode("button2").tabIndex = "0"; 69 getNode("div").tabIndex = "0"; 70 await p; 71 72 info("remove tabindex"); 73 // Expect focusable change when removing tabindex. 74 p = waitForEvent(...focusableStateChange("div", false)); 75 getNode("div").removeAttribute("tabindex"); 76 await p; 77 78 info("add contenteditable"); 79 // Expect editable change on non-input, 80 // and don't expect event on a native input. 81 p = waitForEvents({ 82 expected: [focusableStateChange("div", true), editableStateChange("div", true)], 83 unexpected: [focusableStateChange("input"), editableStateChange("input")] 84 }); 85 getNode("input").contentEditable = true; 86 getNode("div").contentEditable = true; 87 await p; 88 89 info("remove contenteditable"); 90 // Expect editable change on non-input, 91 // and don't expect event on a native input. 92 p = waitForEvents({ 93 expected: [focusableStateChange("div", false), editableStateChange("div", false)], 94 unexpected: [focusableStateChange("input"), editableStateChange("input")] 95 }); 96 getNode("input").contentEditable = false; 97 getNode("div").contentEditable = false; 98 await p; 99 100 SimpleTest.finish(); 101 } 102 103 SimpleTest.waitForExplicitFinish(); 104 addA11yLoadEvent(doTests); 105 </script> 106 </head> 107 108 <body> 109 110 <p id="display"></p> 111 <div id="content" style="display: none"></div> 112 <pre id="test"> 113 </pre> 114 115 <button id="button1"></button> 116 <button id="button2"></button> 117 118 <div id="div">Hello</div> 119 120 <input id="input" value="Hello"> 121 </body> 122 </html>