| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/accessibility-helper.js"></script> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <div id="examples"> |
| <a class="ex" id="ex1" href="#" data-expected="">foo</a> |
| <a class="ex" id="ex2" href="#" title="bar" data-expected="bar">foo</a> |
| <a class="ex" id="ex3" href="#" title="bar" aria-help="baz" data-expected="baz">foo</a> |
| <a class="ex" id="ex4" href="#" title="foo" data-expected=""><!-- no contents, so @title used as label, not help --></a> |
| |
| <h1 class="ex" id="ex5" title="bar" data-expected="bar"><a class="ex" id="ex6" href="#" data-expected="">foo</a></h1> |
| |
| <button class="ex" id="ex7" data-expected="">foo</button> |
| <button class="ex" id="ex8" title="bar" data-expected="bar">foo</button> |
| <button class="ex" id="ex9" title="bar" aria-help="baz" data-expected="baz">foo</button> |
| <button class="ex" id="ex10" title="foo" data-expected=""><!-- no contents, so @title used as label, not help --></button> |
| |
| <table class="ex" id="ex11" summary="table summary" data-expected="table summary"> |
| <caption class="ex" id="ex12" data-expected="">caption</caption> |
| <tr> |
| <td> |
| <input class="ex" id="ex13" type="checkbox" data-expected=""> |
| <div class="ex" id="ex14" role="text" data-expected="">text</div> |
| </td> |
| </tr> |
| </table> |
| |
| <main class="ex" id="ex15" aria-help="bar" data-expected="bar"> |
| <button class="ex" id="ex16" data-expected="">foo</button> |
| </main> |
| |
| <main class="ex" id="ex17" role="group" title="bar" data-expected=""> |
| <div class="ex" id="ex18" role="group" data-expected="">foo</div> |
| </main> |
| |
| <a href="" class="ex" id="ex19" title="bar" data-expected="bar"> |
| <div class="ex" id="ex20" data-expected="">foo</div> |
| </a> |
| </div> |
| |
| <script> |
| var output = "Tests accessibility help text in a variety of examples.\n\n"; |
| |
| if (window.accessibilityController) { |
| document.querySelectorAll("#examples .ex").forEach(element => { |
| const ax = accessibilityController.accessibleElementById(element.id); |
| if (!ax) |
| return; |
| |
| const tag = element.tagName.toLowerCase(); |
| const expectation = element.getAttribute("data-expected"); |
| const description = platformValueForW3CDescription(ax); |
| if (description === expectation) |
| output += escapeHTML(`PASS: Help text for <${tag}> is ${description}\n`); |
| else |
| output += escapeHTML(`FAIL: Help text for <${tag}> is ${description} but expected ${expectation}\n`); |
| }); |
| |
| // Once tests are complete, hide all the example markup. |
| document.getElementById("examples").style.display = "none"; |
| debug(output); |
| } |
| </script> |
| </body> |
| </html> |
| |
