test_aria_statechange.html (7713B)
1 <html> 2 3 <head> 4 <title>ARIA state change event testing</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="../events.js"></script> 19 20 <script type="application/javascript"> 21 let PromEvents = {}; 22 Services.scriptloader.loadSubScript( 23 "chrome://mochitests/content/a11y/accessible/tests/mochitest/promisified-events.js", 24 PromEvents); 25 26 /** 27 * Do tests. 28 */ 29 var gQueue = null; 30 31 // gA11yEventDumpID = "eventdump"; // debugging 32 // gA11yEventDumpToConsole = true; // debugging 33 34 function expandNode(aID, aIsExpanded) { 35 this.DOMNode = getNode(aID); 36 37 this.eventSeq = [ 38 new expandedStateChecker(aIsExpanded, this.DOMNode), 39 ]; 40 41 this.invoke = function expandNode_invoke() { 42 this.DOMNode.setAttribute("aria-expanded", 43 (aIsExpanded ? "true" : "false")); 44 }; 45 46 this.getID = function expandNode_getID() { 47 return prettyName(aID) + " aria-expanded changed to '" + aIsExpanded + "'"; 48 }; 49 } 50 51 function busyify(aID, aIsBusy) { 52 this.DOMNode = getNode(aID); 53 54 this.eventSeq = [ 55 new stateChangeChecker(STATE_BUSY, kOrdinalState, aIsBusy, this.DOMNode), 56 ]; 57 58 this.invoke = function busyify_invoke() { 59 this.DOMNode.setAttribute("aria-busy", (aIsBusy ? "true" : "false")); 60 }; 61 62 this.getID = function busyify_getID() { 63 return prettyName(aID) + " aria-busy changed to '" + aIsBusy + "'"; 64 }; 65 } 66 67 function makeCurrent(aID, aIsCurrent, aValue) { 68 this.DOMNode = getNode(aID); 69 70 this.eventSeq = [ 71 new stateChangeChecker(EXT_STATE_CURRENT, true, aIsCurrent, this.DOMNode), 72 ]; 73 74 this.invoke = function makeCurrent_invoke() { 75 this.DOMNode.setAttribute("aria-current", aValue); 76 }; 77 78 this.getID = function makeCurrent_getID() { 79 return prettyName(aID) + " aria-current changed to " + aValue; 80 }; 81 } 82 83 async function testToggleAttribute(aID, aAttribute, aIncludeMixed) { 84 let toggleState = aAttribute == "aria-pressed" ? STATE_PRESSED : STATE_CHECKED; 85 86 // bug 472142. Role changes here if aria-pressed is added, 87 // accessible should be recreated? 88 let stateChange = PromEvents.waitForStateChange(aID, toggleState, true); 89 getNode(aID).setAttribute(aAttribute, "true"); 90 await stateChange; 91 92 stateChange = PromEvents.waitForStateChange(aID, toggleState, false); 93 getNode(aID).setAttribute(aAttribute, "false"); 94 await stateChange; 95 96 if (aIncludeMixed) { 97 stateChange = PromEvents.waitForStateChange(aID, STATE_MIXED, true); 98 getNode(aID).setAttribute(aAttribute, "mixed"); 99 await stateChange; 100 101 stateChange = PromEvents.waitForStateChange(aID, STATE_MIXED, false); 102 getNode(aID).setAttribute(aAttribute, ""); 103 await stateChange; 104 } 105 106 stateChange = PromEvents.waitForStateChange(aID, toggleState, true); 107 getNode(aID).setAttribute(aAttribute, "true"); 108 await stateChange; 109 110 if (aIncludeMixed) { 111 stateChange = Promise.all([ 112 PromEvents.waitForStateChange(aID, STATE_MIXED, true), 113 PromEvents.waitForStateChange(aID, toggleState, false)]); 114 getNode(aID).setAttribute(aAttribute, "mixed"); 115 await stateChange; 116 117 stateChange = Promise.all([ 118 PromEvents.waitForStateChange(aID, STATE_MIXED, false), 119 PromEvents.waitForStateChange(aID, toggleState, true)]); 120 getNode(aID).setAttribute(aAttribute, "true"); 121 await stateChange; 122 } 123 124 // bug 472142. Role changes here too if aria-pressed is removed, 125 // accessible should be recreated? 126 stateChange = PromEvents.waitForStateChange(aID, toggleState, false); 127 getNode(aID).removeAttribute(aAttribute); 128 await stateChange; 129 } 130 131 async function doTests() { 132 gQueue = new eventQueue(); 133 134 let queueFinished = new Promise(resolve => { 135 gQueue.onFinish = function() { 136 resolve(); 137 return DO_NOT_FINISH_TEST; 138 }; 139 }); 140 141 gQueue.push(new expandNode("section", true)); 142 gQueue.push(new expandNode("section", false)); 143 gQueue.push(new expandNode("div", true)); 144 gQueue.push(new expandNode("div", false)); 145 146 gQueue.push(new busyify("aria_doc", true)); 147 gQueue.push(new busyify("aria_doc", false)); 148 149 gQueue.push(new makeCurrent("current_page_1", false, "false")); 150 gQueue.push(new makeCurrent("current_page_2", true, "page")); 151 gQueue.push(new makeCurrent("current_page_2", false, "false")); 152 gQueue.push(new makeCurrent("current_page_3", true, "true")); 153 gQueue.push(new makeCurrent("current_page_3", false, "")); 154 155 gQueue.invoke(); 156 await queueFinished; 157 // Tests beyond this point use await rather than eventQueue. 158 159 await testToggleAttribute("pressable", "aria-pressed", true); 160 await testToggleAttribute("pressable_native", "aria-pressed", true); 161 await testToggleAttribute("checkable", "aria-checked", true); 162 await testToggleAttribute("checkableBool", "aria-checked", false); 163 164 SimpleTest.finish(); 165 } 166 167 SimpleTest.waitForExplicitFinish(); 168 addA11yLoadEvent(doTests); 169 </script> 170 </head> 171 172 <body> 173 174 <a target="_blank" 175 href="https://bugzilla.mozilla.org/show_bug.cgi?id=551684" 176 title="No statechange event for aria-expanded on native HTML elements, is fired on ARIA widgets"> 177 Mozilla Bug 551684 178 </a><br> 179 <a target="_blank" 180 href="https://bugzilla.mozilla.org/show_bug.cgi?id=648133" 181 title="fire state change event for aria-busy"> 182 Mozilla Bug 648133 183 </a><br> 184 <a target="_blank" 185 href="https://bugzilla.mozilla.org/show_bug.cgi?id=467143" 186 title="mixed state change event is fired for focused accessible only"> 187 Mozilla Bug 467143 188 </a> 189 <a target="_blank" 190 href="https://bugzilla.mozilla.org/show_bug.cgi?id=989958" 191 title="Pressed state is not exposed on a button element with aria-pressed attribute"> 192 Mozilla Bug 989958 193 </a> 194 <a target="_blank" 195 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1136563" 196 title="Support ARIA 1.1 switch role"> 197 Mozilla Bug 1136563 198 </a> 199 <a target="_blank" 200 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355921" 201 title="Elements with a defined, non-false value for aria-current should expose ATK_STATE_ACTIVE"> 202 Mozilla Bug 1355921 203 </a> 204 205 <p id="display"></p> 206 <div id="content" style="display: none"></div> 207 <pre id="test"> 208 </pre> 209 <div id="eventdump"></div> 210 211 <!-- aria-expanded --> 212 <div id="section" role="section" aria-expanded="false">expandable section</div> 213 <div id="div" aria-expanded="false">expandable native div</div> 214 215 <!-- aria-busy --> 216 <div id="aria_doc" role="document" tabindex="0">A document</div> 217 218 <!-- aria-pressed --> 219 <div id="pressable" role="button"></div> 220 <button id="pressable_native"></button> 221 222 <!-- aria-checked --> 223 <div id="checkable" role="checkbox"></div> 224 <div id="checkableBool" role="switch"></div> 225 226 <!-- aria-current --> 227 <div id="current_page_1" role="link" aria-current="page">1</div> 228 <div id="current_page_2" role="link" aria-current="false">2</div> 229 <div id="current_page_3" role="link">3</div> 230 </body> 231 </html>