test_aria_globals.html (4490B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test Global ARIA States and Accessible Creation</title> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 15 <script type="application/javascript"> 16 function doTest() { 17 var globalIds = [ 18 "atomic", 19 "busy", 20 "controls", 21 "describedby", 22 "description", 23 "disabled", 24 "dropeffect", 25 "flowto", 26 "grabbed", 27 "haspopup", 28 "invalid", 29 "label", 30 "labelledby", 31 "live", 32 "owns", 33 "relevant", 34 ]; 35 36 // Elements having ARIA global state or properties or referred by another 37 // element must be accessible. 38 ok(isAccessible("pawn"), 39 "Must be accessible because referred by another element."); 40 41 for (let idx = 0; idx < globalIds.length; idx++) { 42 ok(isAccessible(globalIds[idx]), 43 "Must be accessible becuase of aria-" + globalIds[idx] + 44 " presence"); 45 } 46 47 // Unfocusable elements, having ARIA global state or property with a valid 48 // IDREF value, and an inherited presentation role. A generic accessible 49 // is created (to prevent table cells text jamming). 50 ok(!isAccessible("td_nothing", nsIAccessibleTableCell), 51 "inherited presentation role takes a place"); 52 53 for (let idx = 0; idx < globalIds.length; idx++) { 54 ok(isAccessible("td_" + globalIds[idx]), 55 "Inherited presentation role must be ignored becuase of " + 56 "aria-" + globalIds[idx] + " presence"); 57 } 58 59 SimpleTest.finish(); 60 } 61 62 SimpleTest.waitForExplicitFinish(); 63 addA11yLoadEvent(doTest); 64 </script> 65 </head> 66 <body> 67 68 <a target="_blank" 69 title="Update universal ARIA attribute support to latest spec" 70 href="https://bugzilla.mozilla.org/show_bug.cgi?id=551978"> 71 Mozilla Bug 551978 72 </a> 73 <a target="_blank" 74 title="Presentational table related elements referred or having global ARIA attributes must be accessible" 75 href="https://bugzilla.mozilla.org/show_bug.cgi?id=809751"> 76 Mozilla Bug 809751 77 </a> 78 <p id="display"></p> 79 <div id="content" style="display: none"></div> 80 <pre id="test"> 81 </pre> 82 83 <!-- Test that global aria states and properties are enough to cause the 84 creation of accessible objects --> 85 <div id="global_aria_states_and_props" role="group"> 86 <span id="pawn"></span> 87 <span id="atomic" aria-atomic="true"></span> 88 <span id="busy" aria-busy="false"></span> 89 <span id="controls" aria-controls="pawn"></span> 90 <span id="describedby" aria-describedby="pawn"></span> 91 <span id="description" aria-description="hi"></span> 92 <span id="disabled" aria-disabled="true"></span> 93 <span id="dropeffect" aria-dropeffect="move"></span> 94 <span id="flowto" aria-flowto="pawn"></span> 95 <span id="grabbed" aria-grabbed="false"></span> 96 <span id="haspopup" aria-haspopup="false"></span> 97 <span id="invalid" aria-invalid="false"></span> 98 <span id="label" aria-label="hi"></span> 99 <span id="labelledby" aria-labelledby="label"></span> 100 <span id="live" aria-live="polite"></span> 101 <span id="owns" aria-owns="pawn"></span> 102 <span id="relevant" aria-relevant="additions"></span> 103 </div> 104 105 <table role="presentation"> 106 <tr> 107 <td id="td_nothing"></td> 108 <td id="td_atomic" aria-atomic="true"></td> 109 <td id="td_busy" aria-busy="false"></td> 110 <td id="td_controls" aria-controls="pawn"></td> 111 <td id="td_describedby" aria-describedby="pawn"></td> 112 <td id="td_description" aria-description="hi"></td> 113 <td id="td_disabled" aria-disabled="true"></td> 114 <td id="td_dropeffect" aria-dropeffect="move"></td> 115 <td id="td_flowto" aria-flowto="pawn"></td> 116 <td id="td_grabbed" aria-grabbed="false"></td> 117 <td id="td_haspopup" aria-haspopup="false"></td> 118 <td id="td_invalid" aria-invalid="false"></td> 119 <td id="td_label" aria-label="hi"></td> 120 <td id="td_labelledby" aria-labelledby="label"></td> 121 <td id="td_live" aria-live="polite"></td> 122 <td id="td_owns" aria-owns="pawn"></td> 123 <td id="td_relevant" aria-relevant="additions"></td> 124 </tr> 125 </table> 126 </body> 127 </html>