comp_labelledby_hidden_nodes.html (10634B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Name Comp: Labelledby & Hidden Nodes</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 <p>Tests hidden node name computation as part of the <a href="https://w3c.github.io/accname/#comp_labelledby">#comp_labelledby</a> portion of the AccName <em>Name Computation</em> algorithm.</p> 15 16 <!-- 17 18 These tests verify browser conformance with the following note as part of accName computation Step 2B: 19 20 "The result of LabelledBy Recursion in combination with Hidden Not Referenced means 21 that user agents MUST include all nodes in the subtree as part of 22 the accessible name or accessible description, when the node referenced 23 by aria-labelledby or aria-describedby is hidden." 24 25 --> 26 27 <h2>Testing with <code>display:none</code></h2> 28 29 <button aria-labelledby="a11" data-expectedlabel="foo bar" data-testname="button with aria-labelledby using display:none hidden span (with nested span)" class="ex">x</button> 30 <span id="a11" style="display: none;"> 31 foo 32 <span id="a12">bar</span> 33 </span> 34 35 <button aria-labelledby="a21" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using display:none hidden span (with nested spans, depth 2)" class="ex">x</button> 36 <span id="a21" style="display: none;"> 37 foo 38 <span id="a22"> 39 bar 40 <span id="a23">baz</span> 41 </span> 42 </span> 43 44 <button aria-labelledby="a31" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without display:none (with nested display:none spans, depth 2)" class="ex">x</button> 45 <span id="a31"> 46 foo 47 <span id="a32" style="display: none;"> 48 bar 49 <span id="a33">baz</span> 50 </span> 51 </span> 52 53 <button aria-labelledby="a41" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using display:none hidden span (with nested sibling spans)" class="ex">x</button> 54 <span id="a41" style="display: none;"> 55 foo 56 <span id="a42">bar</span> 57 <span id="a43">baz</span> 58 </span> 59 60 <button aria-labelledby="a51" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without display:none (with nested display:none sibling spans)" class="ex">x</button> 61 <span id="a51"> 62 foo 63 <span id="a52" style="display: none;">bar</span> 64 <span id="a53" style="display: none;">baz</span> 65 </span> 66 67 <button aria-labelledby="a61" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using span with display:none (with nested display:inline sibling spans)" class="ex">x</button> 68 <span id="a61" style="display: none;"> 69 foo 70 <span id="a62" style="display: inline;">bar</span> 71 <span id="a63" style="display: inline;">baz</span> 72 </span> 73 74 <h2>Testing with <code>visibility:hidden</code></h2> 75 76 <button aria-labelledby="b11" data-expectedlabel="foo bar" data-testname="button with aria-labelledby using visibility:hidden span (with nested span)" class="ex">x</button> 77 <span id="b11" style="visibility: hidden;"> 78 foo 79 <span id="b12">bar</span> 80 </span> 81 82 <button aria-labelledby="b21" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using visibility:hidden span (with nested spans, depth 2)" class="ex">x</button> 83 <span id="b21" style="visibility: hidden;"> 84 foo 85 <span id="b22"> 86 bar 87 <span id="b23">baz</span> 88 </span> 89 </span> 90 91 <button aria-labelledby="b31" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without visibility:hidden (with nested visibility:hidden spans, depth 2)" class="ex">x</button> 92 <span id="b31"> 93 foo 94 <span id="b32" style="visibility: hidden;"> 95 bar 96 <span id="b33">baz</span> 97 </span> 98 </span> 99 100 <button aria-labelledby="b41" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using visibility:hidden hidden span (with nested sibling spans)" class="ex">x</button> 101 <span id="b41" style="visibility: hidden;"> 102 foo 103 <span id="b42">bar</span> 104 <span id="b43">baz</span> 105 </span> 106 107 <button aria-labelledby="b51" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without visibility:hidden (with nested visibility:hidden sibling spans)" class="ex">x</button> 108 <span id="b51"> 109 foo 110 <span id="b52" style="visibility: hidden;">bar</span> 111 <span id="b53" style="visibility: hidden;">baz</span> 112 </span> 113 114 <button aria-labelledby="b61" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using span with visibility:hidden (with nested visibility:visible sibling spans)" class="ex">x</button> 115 <span id="b61" style="visibility: hidden;"> 116 foo 117 <span id="b62" style="visibility: visible;">bar</span> 118 <span id="b63" style="visibility: visible;">baz</span> 119 </span> 120 121 <h2>Testing with <code>visibility:collapse</code></h2> 122 123 <button aria-labelledby="c11" data-expectedlabel="foo bar" data-testname="button with aria-labelledby using visibility:collapse span (with nested span)" class="ex">x</button> 124 <span id="c11" style="visibility: collapse;"> 125 foo 126 <span id="c12">bar</span> 127 </span> 128 129 <button aria-labelledby="c21" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using visibility:collapse span (with nested spans, depth 2)" class="ex">x</button> 130 <span id="c21" style="visibility: collapse;"> 131 foo 132 <span id="c22"> 133 bar 134 <span id="c23">baz</span> 135 </span> 136 </span> 137 138 <button aria-labelledby="c31" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using span without visibility:collapse (with nested visibility:visible spans, depth 2)" class="ex">x</button> 139 <span id="c31"> 140 foo 141 <span id="c32" style="visibility: visible;"> 142 bar 143 <span id="c33" style="visibility: visible;">baz</span> 144 </span> 145 </span> 146 147 <button aria-labelledby="c41" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using visibility:collapse span (with nested sibling spans)" class="ex">x</button> 148 <span id="c41" style="visibility: collapse;"> 149 foo 150 <span id="c42">bar</span> 151 <span id="c43">baz</span> 152 </span> 153 154 <button aria-labelledby="c51" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without visibility:collapse (with nested visibility:collapse sibling spans)" class="ex">x</button> 155 <span id="c51"> 156 foo 157 <span id="c52" style="visibility: collapse;">bar</span> 158 <span id="c53" style="visibility: collapse;">baz</span> 159 </span> 160 161 <button aria-labelledby="c61" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using span with visibility:collapse (with nested visible sibling spans)" class="ex">x</button> 162 <span id="c61" style="visibility: collapse;"> 163 foo 164 <span id="c62" style="visibility: visible;">bar</span> 165 <span id="c63" style="visibility: visible;">baz</span> 166 </span> 167 168 <h2>Testing with <code>aria-hidden</code></h2> 169 170 <button aria-labelledby="d11" data-expectedlabel="foo bar" data-testname="button with aria-labelledby using aria-hidden span (with nested span)" class="ex">x</button> 171 <span id="d11" aria-hidden="true"> 172 foo 173 <span id="d12">bar</span> 174 </span> 175 176 <button aria-labelledby="d21" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using aria-hidden span (with nested spans, depth 2)" class="ex">x</button> 177 <span id="d21" aria-hidden="true"> 178 foo 179 <span id="d22"> 180 bar 181 <span id="d23">baz</span> 182 </span> 183 </span> 184 185 <button aria-labelledby="d31" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without aria-hidden (with nested aria-hidden spans, depth 2)" class="ex">x</button> 186 <span id="d31"> 187 foo 188 <span id="d32" aria-hidden="true"> 189 bar 190 <span id="d33">baz</span> 191 </span> 192 </span> 193 194 <button aria-labelledby="d41" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using aria-hidden hidden span (with nested sibling spans)" class="ex">x</button> 195 <span id="d41" aria-hidden="true"> 196 foo 197 <span id="d42">bar</span> 198 <span id="d43">baz</span> 199 </span> 200 201 <h2>Testing with <code>hidden</code> attribute</h2> 202 203 <button aria-labelledby="e11" data-expectedlabel="foo bar" data-testname="button with aria-labelledby using HTML5 hidden span (with nested span)" class="ex">x</button> 204 <span id="e11" hidden> 205 foo 206 <span id="e12">bar</span> 207 </span> 208 209 <button aria-labelledby="e21" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using HTML5 hidden span (with nested spans, depth 2)" class="ex">x</button> 210 <span id="e21" hidden> 211 foo 212 <span id="e22"> 213 bar 214 <span id="e23">baz</span> 215 </span> 216 </span> 217 218 <button aria-labelledby="e31" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without HTML5 hidden (with nested HTML5 hidden spans, depth 2)" class="ex">x</button> 219 <span id="e31"> 220 foo 221 <span id="e32" hidden> 222 bar 223 <span id="e33">baz</span> 224 </span> 225 </span> 226 227 <button aria-labelledby="e41" data-expectedlabel="foo bar baz" data-testname="button with aria-labelledby using HTML5 hidden span (with nested hidden sibling spans)" class="ex">x</button> 228 <span id="e41" hidden> 229 foo 230 <span id="e42">bar</span> 231 <span id="e43">baz</span> 232 </span> 233 234 <button aria-labelledby="e51" data-expectedlabel="foo" data-testname="button with aria-labelledby using span without HTML5 hidden (with nested hidden sibling spans)" class="ex">x</button> 235 <span id="e51"> 236 foo 237 <span id="e52" hidden>bar</span> 238 <span id="e53" hidden>baz</span> 239 </span> 240 241 <script> 242 AriaUtils.verifyLabelsBySelector(".ex"); 243 </script> 244 </body> 245 </html>