test_aria_presentation.html (5023B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test accessible tree when ARIA role presentation is used</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 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 10 11 <script type="application/javascript" 12 src="../common.js"></script> 13 <script type="application/javascript" 14 src="../role.js"></script> 15 16 <script type="application/javascript"> 17 function doTest() { 18 // Presentation role don't allow accessible. 19 var tree = 20 { SECTION: [ // container 21 { TEXT_LEAF: [ ] }, // child text of 'presentation' node 22 { TEXT_LEAF: [ ] }, // child text of 'none' node 23 ] }; 24 testAccessibleTree("div_cnt", tree); 25 26 // Focusable element, 'presentation' and 'none' roles are ignored. 27 tree = 28 { SECTION: [ // container 29 { PUSHBUTTON: [ // button having 'presentation' role 30 { TEXT_LEAF: [ ] }, 31 ] }, 32 { PUSHBUTTON: [ // button having 'none' role 33 { TEXT_LEAF: [ ] }, 34 ] }, 35 ] }; 36 testAccessibleTree("btn_cnt", tree); 37 38 // Presentation table, no table structure is exposed. 39 tree = 40 { SECTION: [ // container 41 { TEXT_CONTAINER: [ // td generic accessible inside 'presentation' table 42 { TEXT_LEAF: [ ] }, // cell text 43 ] }, 44 { TEXT_CONTAINER: [ // td generic accessible inside 'none' table 45 { TEXT_LEAF: [ ] }, // cell text 46 ] }, 47 ] }; 48 testAccessibleTree("tbl_cnt", tree); 49 50 // Focusable table, 'presentation' and 'none' roles are ignored. 51 tree = 52 { SECTION: [ // container 53 { TABLE: [ // table having 'presentation' role 54 { ROW: [ // tr 55 { CELL: [ // td 56 { TEXT_LEAF: [ ] }, 57 ] }, 58 ] }, 59 ] }, 60 { TABLE: [ // table having 'none' role 61 { ROW: [ // tr 62 { CELL: [ // td 63 { TEXT_LEAF: [ ] }, 64 ] }, 65 ] }, 66 ] }, 67 ] }; 68 testAccessibleTree("tblfocusable_cnt", tree); 69 70 // Presentation list, expose generic accesisble for list items. 71 tree = 72 { SECTION: [ // container 73 { TEXT_CONTAINER: [ // li generic accessible inside 'presentation' role 74 { TEXT_LEAF: [ ] }, // li text 75 ] }, 76 { TEXT_CONTAINER: [ // li generic accessible inside 'none' role 77 { TEXT_LEAF: [ ] }, // li text 78 ] }, 79 ] }; 80 testAccessibleTree("list_cnt", tree); 81 82 // Has ARIA globals or referred by ARIA relationship, role='presentation' 83 // and role='none' are ignored. 84 tree = 85 { SECTION: [ // container 86 { LABEL: [ // label, has aria-owns 87 { TEXT_LEAF: [ ] }, 88 { LABEL: [ // label, referenced by aria-owns 89 { TEXT_LEAF: [ ] }, 90 ] }, 91 ] }, 92 { LABEL: [ // label, has aria-owns 93 { TEXT_LEAF: [ ] }, 94 { LABEL: [ // label, referenced by aria-owns 95 { TEXT_LEAF: [ ] }, 96 ] }, 97 ] }, 98 ] }; 99 testAccessibleTree("airaglobalprop_cnt", tree); 100 101 SimpleTest.finish(); 102 } 103 104 SimpleTest.waitForExplicitFinish(); 105 addA11yLoadEvent(doTest); 106 </script> 107 </head> 108 <body> 109 110 <a target="_blank" 111 href="https://bugzilla.mozilla.org/show_bug.cgi?id=548291" 112 title="Accessible tree of ARIA image maps"> 113 Bug 548291 114 </a> 115 <a target="_blank" 116 href="https://bugzilla.mozilla.org/show_bug.cgi?id=666504" 117 title="Ignore role presentation on focusable elements"> 118 Bug 666504 119 </a> 120 <a target="_blank" 121 href="https://bugzilla.mozilla.org/show_bug.cgi?id=971212" 122 title="Implement ARIA role=none"> 123 Bug 971212 124 </a> 125 <p id="display"></p> 126 <div id="content" style="display: none"></div> 127 <pre id="test"> 128 </pre> 129 130 <div id="div_cnt"><div role="presentation">t</div><div role="none">t</div></div> 131 132 <div id="btn_cnt"><button role="presentation">btn</button><button role="none">btn</button></div> 133 134 <div id="tbl_cnt"> 135 <table role="presentation"> 136 <tr> 137 <td>cell</td> 138 </tr> 139 </table> 140 <table role="none"> 141 <tr> 142 <td>cell</td> 143 </tr> 144 </table> 145 </div> 146 147 <div id="tblfocusable_cnt"> 148 <table role="presentation" tabindex="0"> 149 <tr> 150 <td>cell</td> 151 </tr> 152 </table> 153 <table role="none" tabindex="0"> 154 <tr> 155 <td>cell</td> 156 </tr> 157 </table> 158 </div> 159 160 <div id="list_cnt"> 161 <ul role="presentation"> 162 <li>item</li> 163 </ul> 164 <ul role="none"> 165 <li>item</li> 166 </ul> 167 </div> 168 169 <div id="airaglobalprop_cnt"><label 170 role="presentation" aria-owns="ariaowned">has aria-owns</label><label 171 role="presentation" id="ariaowned">referred by aria-owns</label><label 172 role="none" aria-owns="ariaowned2">has aria-owns</label><label 173 role="none" id="ariaowned2">referred by aria-owns</label></div> 174 175 </body> 176 </html>