roles-contextual.html (6389B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML-AAM Contextual-Specific Role Verification Tests</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 15 <p>Tests contextual computed role mappings defined in <a href="https://w3c.github.io/html-aam/">HTML-AAM</a>, where the returned computed role is expected to change based on the context. Most test names correspond to a unique ID defined in the spec.<p> 16 17 <p>These should remain in alphabetical order.</code></p> 18 19 20 <!-- el-a --> 21 <a href="#" data-testname="el-a" data-expectedrole="link" class="ex">x</a> 22 <a data-testname="el-a-no-href" class="ex-generic">x</a> 23 24 <!-- el-aside --> 25 <aside data-testname="el-aside" data-expectedrole="complementary" class="ex">x</aside> 26 <main> 27 <aside data-testname="el-aside-in-main" data-expectedrole="complementary" class="ex">x</aside> 28 <article> 29 <aside data-testname="el-aside-in-article-in-main" class="ex-generic">x</aside> 30 <aside data-testname="el-aside-in-article-in-main-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> 31 </article> 32 </main> 33 <article> 34 <aside data-testname="el-aside-in-article" class="ex-generic">x</aside> 35 <aside data-testname="el-aside-in-article-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> 36 </article> 37 <aside> 38 <aside data-testname="el-aside-in-aside" class="ex-generic">x</aside> 39 <aside data-testname="el-aside-in-aside-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> 40 </aside> 41 <nav> 42 <aside data-testname="el-aside-in-nav" class="ex-generic">x</aside> 43 <aside data-testname="el-aside-in-nav-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> 44 <aside data-testname="el-aside-in-nav-with-role" data-expectedrole="complementary" class="ex" role="complementary">x</aside> 45 </nav> 46 <!-- Spec says that the conditional aside mapping happens when nested in a sectioning content element. 47 However, this doesn't make sense if the parent <section> isn't a landmark in the first place. 48 Let's force the section to always be a landmark for now, but we should probably expand on this test 49 case pending discussions in https://github.com/w3c/html-aam/pull/484 --> 50 <section aria-label="x"> 51 <aside data-testname="el-aside-in-section" class="ex-generic">x</aside> 52 <aside data-testname="el-aside-in-section-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> 53 <aside data-testname="el-aside-in-section-aria-label-empty" class="ex-generic" aria-label="">x</aside> 54 <aside data-testname="el-aside-in-section-aria-label-whitespace" class="ex-generic" aria-label=" ">x</aside> 55 <aside data-testname="el-aside-in-section-aria-labelledby" data-expectedrole="complementary" class="ex" aria-labelledby="labelledby">x</aside> 56 <aside data-testname="el-aside-in-section-aria-labelledby-non-existing" class="ex-generic" aria-labelledby="non-existing">x</aside> 57 <aside data-testname="el-aside-in-section-title" data-expectedrole="complementary" title="x" class="ex">x</aside> 58 <aside data-testname="el-aside-in-section-title-empty" class="ex-generic" title="">x</aside> 59 </section> 60 61 <!-- el-footer --> 62 <!-- nav>footer -> ./roles-contextual.tentative.html --> 63 <footer data-testname="el-footer-ancestorbody" data-expectedrole="contentinfo" class="ex">x</footer> 64 <!-- main>footer -> ./roles-contextual.tentative.html --> 65 66 <!-- el-header --> 67 <!-- nav>header -> ./roles-contextual.tentative.html --> 68 <header data-testname="el-header-ancestorbody" data-expectedrole="banner" class="ex">x</header> 69 <!-- main>header -> ./roles-contextual.tentative.html --> 70 71 <!-- el-img-empty-alt --> 72 <img data-testname="el-img-no-name" data-expectedrole="image" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 73 <!-- img empty alt -> ./roles.html --> 74 <img data-testname="el-img-empty-alt-aria-label" data-expectedrole="image" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt aria-label="x"> 75 <img data-testname="el-img-empty-alt-aria-label-empty" class="ex-generic" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt aria-label=""> 76 <img data-testname="el-img-empty-alt-aria-label-whitespace" class="ex-generic" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt aria-label=" "> 77 <img data-testname="el-img-empty-alt-aria-labelledby" data-expectedrole="image" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt aria-labelledby="labelledby"> 78 <img data-testname="el-img-empty-alt-title" class="ex-generic" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt title="x"> 79 <img data-testname="el-img-empty-alt-title-empty" class="ex-generic" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt title=""> 80 81 <!-- el-section --> 82 <section data-testname="el-section" aria-label="x" data-expectedrole="region" class="ex">x</section> 83 <section data-testname="el-section-no-name" class="ex-generic">x</section> 84 <section data-testname="el-section-aria-label-empty" class="ex-generic" aria-label="">x</section> 85 <section data-testname="el-section-aria-label-whitespace" class="ex-generic" aria-label=" ">x</section> 86 <section data-testname="el-section-aria-labelledby" data-expectedrole="region" class="ex" aria-labelledby="labelledby">x</section> 87 <section data-testname="el-section-aria-labelledby-non-existing" class="ex-generic" aria-labelledby="non-existing">x</section> 88 <section data-testname="el-section-title" data-expectedrole="region" title="x" class="ex">x</section> 89 <section data-testname="el-section-title-empty" class="ex-generic" title="">x</section> 90 91 <!-- element to reference for aria-labelledby tests --> 92 <div id="labelledby">labelledby</div> 93 <div id="empty"></div> 94 <div id="space"> </div> 95 96 <script> 97 AriaUtils.verifyRolesBySelector(".ex"); 98 AriaUtils.verifyGenericRolesBySelector(".ex-generic"); 99 </script> 100 101 </body> 102 </html>