| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| <style> |
| .testcase { display: contents }; |
| </style> |
| </head> |
| <body> |
| |
| <div id="content"> |
| <a href="https://apple.com" id="link" class="testcase">apple.com</a> |
| |
| <article class="testcase" id="article">Article content</article> |
| |
| <aside class="testcase" id="aside">Aside content</aside> |
| |
| <blockquote class="testcase" id="blockquote">To be or not to be, that is the question</blockquote> |
| |
| <button class="testcase" id="button">Click me</button> |
| |
| <code class="testcase" id="code">Hello world</code> |
| |
| <del class="testcase" id="del">Hello world</del> |
| |
| <details class="testcase" id="details"> |
| <summary class="testcase" id="summary">Summary text</summary> |
| </details> |
| |
| <dfn class="testcase" id="dfn">Some definition</dfn> |
| |
| <div class="testcase" id="div">Some text</div> |
| |
| <dl class="testcase" id="dl"> |
| <dt class="testcase" id="dt">dt element</dt> |
| <dd class="testcase" id="dd">dd element</dd> |
| </dl> |
| |
| <fieldset> |
| <legend class="testcase" id="legend">Choose your favorite monster</legend> |
| |
| <input type="radio" id="radio-button" name="monster"> |
| <label for="radio-button">Kraken</label><br/> |
| |
| <input type="radio" id="sasquatch" name="monster"> |
| <label for="sasquatch">Sasquatch</label><br/> |
| </fieldset> |
| |
| <figure class="testcase" id="figure"></figure> |
| |
| <form class="testcase" id="form"></form> |
| |
| <h2 class="testcase" id="h2">Hello world</h2> |
| |
| <hr class="testcase" id="hr"></hr> |
| |
| <ins class="testcase" id="ins">Hello world</ins> |
| |
| <label class="testcase" id="label">Label</label> |
| |
| <main class="testcase" id="main">Main content</main> |
| |
| <mark class="testcase" id="mark">Marked text</mark> |
| |
| <menu class="testcase" type="toolbar" id="menu-toolbar"></menu> |
| |
| <nav class="testcase" id="nav">Nav</nav> |
| |
| <ol class="testcase" id="ol"> |
| <li class="testcase" id="ol-li-element">Hello world</li> |
| </ol> |
| |
| <output class="testcase" id="output">Output</output> |
| |
| <p class="testcase" id="p">Paragraph</p> |
| |
| <pre class="testcase" id="pre">Pre-text</pre> |
| |
| <section class="testcase" id="section-with-name" aria-label="Section name">Section</section> |
| |
| <section class="testcase" id="section-without-name">Section</section> |
| |
| <sub class="testcase" id="sub">Hello world</sub> |
| |
| <sup class="testcase" id="sup">Hello world</sup> |
| |
| <time class="testcase" id="time"></time> |
| |
| <ul class="testcase" id="ul"> |
| <li class="testcase" id="ul-li-element">Hello world</li> |
| </ul> |
| </div> |
| |
| <script> |
| // Buffer test output and dump it at the end to make the test run faster vs. individual `debug` calls. |
| var testOutput = "This test ensures elements with CSS display: contents have the correct role.\n\n"; |
| |
| var axElement; |
| function verifyRoles() { |
| const testcases = document.getElementsByClassName("testcase"); |
| for (const domElement of testcases) { |
| const outerHTML = escapeHTML(domElement.cloneNode().outerHTML); |
| axElement = accessibilityController.accessibleElementById(domElement.id); |
| if (!axElement) { |
| testOutput += `FAIL. Couldn't get AX element for #${domElement.id}: ${outerHTML}\n`; |
| return; |
| } |
| testOutput += `${outerHTML}\n`; |
| testOutput += ` ${axElement.role}`; |
| |
| let computedRoleString = axElement.computedRoleString; |
| if (computedRoleString) |
| testOutput += `\n computedRoleString: ${computedRoleString}`; |
| |
| let subrole = axElement.subrole; |
| if (subrole.replace("AXSubrole: ", "")) |
| testOutput += `\n ${subrole}`; |
| testOutput += `\n\n`; |
| } |
| } |
| |
| if (window.accessibilityController) { |
| verifyRoles(); |
| document.getElementById("content").style.visibility = "hidden"; |
| debug(testOutput); |
| } |
| </script> |
| </body> |
