fallback-roles.html (6044B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Fallback 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 <p>Tests <a href="https://w3c.github.io/aria/#host_general_role">8.1 Role Attribute</a> role token list selection and <a href="https://w3c.github.io/aria/#document-handling_author-errors_roles">9.1 Roles - handling author errors</a>.</p> 15 16 <!-- known el and two known ARIA 1.0 roles --> 17 <nav role="region group" data-testname="fallback role w/ region with no label" data-expectedrole="group" class="ex">x</nav> 18 <nav role="region group" data-testname="fallback role w/ region with label" aria-label="x" data-expectedrole="region" class="ex">x</nav> 19 20 <!-- known el and known ARIA 1.1 with 1.0 role backup --> 21 <div role="switch checkbox" aria-checked="true" data-testname="aria 1.1 switch role w/ fallback to aria 1.0 checkbox role" aria-label="x" data-expectedrole="switch" class="ex">x</div> 22 23 <!-- known el and invalid role token with valid backup --> 24 <div role="foo button" data-testname="div[role=button] ignoring invalid foo role token" aria-label="x" data-expectedrole="button" class="ex">x</div> 25 26 <!-- unknown el and invalid role token with valid backup --> 27 <unknown role="foo button" data-testname="unknown[role=button] ignoring invalid foo role token" aria-label="x" data-expectedrole="button" class="ex">x</unknown> 28 29 <!-- known el and invalid role(s) --> 30 <button role="foo" data-testname="button ignoring single invalid role token" aria-label="x" data-expectedrole="button" class="ex">x</unknown> 31 <button role="foo bar" data-testname="button ignoring multiple invalid role tokens" aria-label="x" data-expectedrole="button" class="ex">x</unknown> 32 33 <!-- known el with invalid punctuation --> 34 <div role="invalid, punctuation, tests, link, button" data-testname="div[role=button] ignoring invalid foo role token including punctuation-contaminated known link role" aria-label="x" data-expectedrole="button" class="ex">x</div> 35 36 37 38 <!-- extra line breaks here to account for rendering of unicode diacritic etc char glitch tests --> 39 40 41 42 <div role="l̷̨̢̡̖̻̗̤̺̟̱͚͔͇͍͇̫̫̜͔̗̟̘̫̟̰̼̘͗̌̃͐̔̈́̚͝į̵̡̲̯̠̮͈͖̥̮̲͓̦̗̗̱̞͍̗̪͙͇͚͂̍͐̔̍͌̐̇̏̎͘͝ǹ̶̨̧̢̜̲̫͇̮͉̬͎͎͕̝̱͔̙̱̦̰̦̠̰̣̝͂̓̋̊͜ķ̷̧̧̨̨̨̘̳͕̰͎̮̠̘̪͇͕̥̭̼̼̜̤̫̥̼̤̰̦͖̪̀͒̆͑̒̅͑̓̒͂̽̈́̽̉̀̕͘͜͝ ̷̡̮̦̘͓̫̜͕͖̰̙̘͓̼͎̳̹͇̮͐͂́͛̃́̊̈͌̄̓̌̂̈̇̀̌̈́́̀̈́̍̈́̇̄̊̔͒̾̾̇́͒̽͂̾̕̚͜͜͝͠ͅͅg̸̨̧̧̧̧̛̺̦̣͇͈͙͇͎͕̠̞̳̹̣͋͑̑̓͛̓̉̔̉͑̇́̈́̉̃́̑̍̂̒͐͛͗̑̏̓̾͌̈̅́̇̕̕̚̚͝͝ͅr̶̛̤̲̘̮̟̭̲̋̾̀́́̒̀̀͑̎̀̌̈̀̍̂̏̊̎͐͒͗͗̀͘͘͘͠͠ȍ̴̧̡̢̡̢̞̝̠̙̬̗͍͍͉̺͔͙̫̝̰̮̜̩̙̳͉̻̻̼͍̊͋͐̐͆̈̿̒̊̄͑̈́̔͋̔̃͐̓̓͛́͊̉͑̊̔͆͘͘͜͠ͅu̴̱̯̞̞̞̺̼̳̳͚̞̇̈͒͠p̶̛͉̮̙̯̮̱͉̖͚͉̩̱̺̩̦̺͈̫͍͔̲̣̗̟̜̂̐̌̏͌̈́͗̾͌̿̓͒̋̆͆̾͛̐̈́̓͋̀͘̚͝͝͝ ̶͔͚̩̬͈̍̈́͗͐̀̊̏͛̃̈́͋̅͝ button" data-testname="div[role=button] ignoring invalid unicode diacritics etc on link and group role tokens" aria-label="x" data-expectedrole="button" class="ex">x</div> 43 44 45 <!-- known el and known role with whitespace edge cases --> 46 <div role=" button" data-testname="div[role=button] ignoring tab char" aria-label="x" data-expectedrole="button" class="ex">x</div> 47 <div role=" 48 button" data-testname="div[role=button] ignoring line break" aria-label="x" data-expectedrole="button" class="ex">x</div> 49 <div role="⠀ button" data-testname="div[role=button] ignoring braille whitespace char" aria-label="x" data-expectedrole="button" class="ex">x</div> 50 51 <!-- various role capitalization styles and their fallbacks --> 52 <div role="foo Link" data-testname="div[role='foo Link'][tabindex=0], illegal role and capitalized fallback role, has link role" aria-label="x" tabindex="0" data-expectedrole="link" class="ex">x</div> 53 <button role="foo Link" data-testname="button[role='foo Link'] with illegal role and capitalized fallback role, has link role" data-expectedrole="link" class="ex"></button> 54 <nav role="foo GROUP" data-testname="nav[role='foo GROUP'] with illegal role and all upper case fallback role, has group role" aria-label="x" data-expectedrole="group" class="ex">x</nav> 55 <div role="foo ReGiOn" data-testname="div[role='foo ReGiOn'][aria-label] with illegal role and alternating case fallback role, has region role" aria-label="x" data-expectedrole="region" class="ex">x</div> 56 <div role="ReGiOn foo" data-testname="div[role='ReGiOn foo'] with alternating case role and illegal fallback role without accname, has generic role" class="ex-generic">x</div> 57 <div role="ReGiOn foo" data-testname="div[role='ReGiOn foo'][aria-label] with alternating case role and illegal fallback role, has region role" aria-label="x" data-expectedrole="region" class="ex">x</div> 58 59 <div role="BUTTON LINK" data-testname="div[role='BUTTON LINK'] with tabindex=0, has button role" aria-label="x" tabindex="0" data-expectedrole="button" class="ex">x</div> 60 <div role="ReGiOn group" data-testname="div[role='ReGiOn group'] without accname, has group role" data-expectedrole="group" class="ex">x</div> 61 <div role="ReGiOn group" data-testname="div[role='ReGiOn group'][aria-label], has region role" aria-label="x" data-expectedrole="region" class="ex">x</div> 62 63 <div role=" 64 buTtOn" data-testname="div[role=buTtOn] ignoring line break, has button role" tabindex="0" aria-label="x" data-expectedrole="button" class="ex">x</div> 65 66 <script> 67 AriaUtils.verifyRolesBySelector(".ex"); 68 AriaUtils.verifyGenericRolesBySelector(".ex-generic"); 69 </script> 70 71 </body> 72 </html>