invalid-roles.html (11314B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Invalid 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 <meta charset="utf-8"> 12 </head> 13 <body> 14 15 <p>Tests invalid ARIA roles from <a href="https://w3c.github.io/aria/#document-handling_author-errors_roles">9.1 Roles - handling author errors</a>.</p> 16 17 <!-- Tests fallback for <nav> when 1/2/3 invalid roles are supplied --> 18 <nav role="foo" data-testname="nav with invalid role name foo" data-expectedrole="navigation" class="ex">x</nav> 19 <nav role="foo bar" data-testname="nav with two invalid role names" data-expectedrole="navigation" class="ex">x</nav> 20 <nav role="foo bar baz" data-testname="nav with three invalid role names" data-expectedrole="navigation" class="ex">x</nav> 21 22 <!-- Tests fallback for <button> when 1/2/3 invalid roles are supplied --> 23 <button role="foo" data-testname="button with invalid role name foo" data-expectedrole="button" class="ex">x</button> 24 <button role="foo bar" data-testname="button with two invalid role names" data-expectedrole="button" class="ex">x</button> 25 <button role="foo bar baz" data-testname="button with three invalid role names" data-expectedrole="button" class="ex">x</button> 26 27 <!-- Tests fallback for semantically neutral elements when 1/2/3 invalid roles are supplied --> 28 <span role="foo" data-testname="span with invalid role name foo" class="ex-generic">x</span> 29 <span role="foo bar" data-testname="span with two invalid role names" class="ex-generic">x</span> 30 <span role="foo bar baz" data-testname="span with three invalid role names" class="ex-generic">x</span> 31 <div role="foo" data-testname="div with invalid role name foo" class="ex-generic">x</div> 32 <div role="foo bar" data-testname="div with two invalid role names" class="ex-generic">x</div> 33 <div role="foo bar baz" data-testname="div with three invalid role names"class="ex-generic">x</div> 34 35 <!-- Whitespace tests with <nav> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) --> 36 <nav role=" " data-testname="nav with empty character as role" data-expectedrole="navigation" class="ex">x</nav> 37 <nav role="
" data-testname="nav with line break (
) character as role" data-expectedrole="navigation" class="ex">x</nav> 38 <nav role="	" data-testname="nav with tab (	) as role (should be treated as whitespace)" data-expectedrole="navigation" class="ex">x</nav> 39 <nav role="​" data-testname="nav with zero-width space as role (should be treated as whitespace)" data-expectedrole="navigation" class="ex">x</nav> 40 <nav role="⠀" data-testname="nav with braille space (10240) as role" data-expectedrole="navigation" class="ex">x</nav> 41 <nav role="⠀" data-testname="nav with braille space (x2800) as role" data-expectedrole="navigation" class="ex">x</nav> 42 <nav role=" " data-testname="nav with non-breaking space (nbsp) as role" data-expectedrole="navigation" class="ex">x</nav> 43 <nav role="" data-testname="nav with standard space (nbsp) as role" data-expectedrole="navigation" class="ex">x</nav> 44 45 <!-- Escaped whitespace tests with <span> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) --> 46 <span role=" " data-testname="span with escaped empty character as role" class="ex-generic">x</span> 47 <span role="
" data-testname="span with escaped line break (
) character as role" class="ex-generic">x</span> 48 <span role="	" data-testname="span with escaped tab (	) as role (should be treated as whitespace)" class="ex-generic">x</span> 49 <span role="​" data-testname="span with escaped zero-width space as role (should be treated as whitespace)" class="ex-generic">x</span> 50 <span role="⠀" data-testname="span with escaped braille space (10240) as role" class="ex-generic">x</span> 51 <span role="⠀" data-testname="span with escaped braille space (x2800) as role" class="ex-generic">x</span> 52 <span role=" " data-testname="span with escaped non-breaking space (nbsp) as role" class="ex-generic">x</span> 53 <span role="" data-testname="span with escaped standard space (nbsp) as role" class="ex-generic">x</span> 54 55 <!-- Unescaped whitespace tests with <span> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) --> 56 <span role=" " data-testname="span with empty character as role" class="ex-generic">x</span> 57 <span role=" 58 " data-testname="span with line break (
) character as role" class="ex-generic">x</span> 59 <span role=" " data-testname="span with tab (	) as role (should be treated as whitespace)" class="ex-generic">x</span> 60 <span role="" data-testname="span with zero-width space as role (should be treated as whitespace)" class="ex-generic">x</span> 61 <span role="⠀" data-testname="span with braille space (10240) as role" class="ex-generic">x</span> 62 <span role=" " data-testname="span with non-breaking space (nbsp) as role" class="ex-generic">x</span> 63 <span role=" " data-testname="span with standard space as role" class="ex-generic">x</span> 64 65 <!-- Diacritics with <a> --> 66 <a href="#" role="̃" data-testname="link with role set to tilde diacritic" data-expectedrole="link" class="ex">x</a> 67 <a href="#" role="foõ" data-testname="link with role foo that has tilde diacritic" data-expectedrole="link" class="ex">x</a> 68 <a href="#" role="̅" data-testname="link with role set to overline diacritic" data-expectedrole="link" class="ex">x</a> 69 <a href="#" role="foo̅" data-testname="link with role foo that has overline diacritic" data-expectedrole="link" class="ex">x</a> 70 <a href="#" role="̭" data-testname="link with role set to circumflex diacritic below" data-expectedrole="link" class="ex">x</a> 71 <a href="#" role="foo̭" data-testname="link with role foo that has circumflex diacritic below" data-expectedrole="link" class="ex">x</a> 72 <a href="#" role="buttoñ" data-testname="link with role set to button with tilde diacritic" data-expectedrole="link" class="ex">x</a> 73 74 <!-- Diacritics with <div> --> 75 <div role="̃" data-testname="div with role set to tilde diacritic" class="ex-generic">x</div> 76 <div role="foõ" data-testname="div with role foo that has tilde diacritic" class="ex-generic">x</div> 77 <div role="buttoñ" data-testname="div with role set to button with tilde diacritic" class="ex-generic">x</div> 78 <div role="button´" data-testname="div with role set to button with unescaped tilde diacritic" class="ex-generic">x</div> 79 80 <!-- Zero-width joiners (e.g., ZWJ like emoji variants use) with <button> --> 81 <!-- [sic] role="" should include an invisible ZWJ], and role="link" ends with an invisible ZWJ. Use caution when editing. --> 82 <button role="" data-testname="button with role set to zero-width joiner" data-expectedrole="button" class="ex">x</button> 83 <button role="link" data-testname="button with role set to foo with zero-width joiner" data-expectedrole="button" class="ex">x</button> 84 85 <!-- Non-western chars with <nav> --> 86 <nav role="Θ" data-testname="nav with role set to theta (Θ)" data-expectedrole="navigation" class="ex">x</nav> 87 <nav role="ژ" data-testname="nav with role set to Persian character (ژ)" data-expectedrole="navigation" class="ex">x</nav> 88 <nav role="ژ ♮" data-testname="nav with multiple non-latin character roles, Persian character (ژ) and ♮" data-expectedrole="navigation" class="ex">x</nav> 89 <nav role="漢字" data-testname="nav with role set to Japanese kanji" data-expectedrole="navigation" class="ex">x</nav> 90 91 <!-- Non-western chars with <span> --> 92 <span role="Θ" data-testname="span with role set to theta (Θ)" class="ex-generic">x</span> 93 <span role="ژ" data-testname="span with role set to Persian character (ژ)" class="ex-generic">x</span> 94 <span role="ژ ♮" data-testname="span with multiple non-latin character roles, Persian character (ژ) and ♮" class="ex-generic">x</span> 95 <span role="漢字" data-testname="span with role set to Japanese kanji" class="ex-generic">x</span> 96 97 <!-- RTL strings (Hebrew & Arabic) with <nav> --> 98 <nav role="سلام" data-testname="nav with role set to Arabic text" data-expectedrole="navigation" class="ex">x</nav> 99 <nav role="سلام حبيب" data-testname="nav with multiple role assignments set to Arabic text" data-expectedrole="navigation" class="ex">x</nav> 100 <nav role="שלום" data-testname="nav with role set to Hebrew text" data-expectedrole="navigation" class="ex">x</nav> 101 <nav role="שלום חבר" data-testname="nav with multiple role assignments set to Hebrew text" data-expectedrole="navigation" class="ex">x</nav> 102 103 <!-- RTL strings (Hebrew & Arabic) with <div> --> 104 <div role="سلام" data-testname="div with role set to Arabic text" class="ex-generic">x</div> 105 <div role="سلام حبيب" data-testname="div with multiple role assignments set to Arabic text" class="ex-generic">x</div> 106 <div role="שלום" data-testname="div with role set to Hebrew text" class="ex-generic">x</div> 107 <div role="שלום חבר" data-testname="div with multiple role assignments set to Hebrew text" class="ex-generic">x</div> 108 109 <!-- Escaped chars, URL-encoded chars with <a> --> 110 <a href="https://www.apple.com/" role="&" data-testname="link with role set to ampersand character" data-expectedrole="link" class="ex">x</a> 111 <a href="https://www.apple.com/" role="<" data-testname="link with role set to less than angle bracket character" data-expectedrole="link" class="ex">x</a> 112 113 <!-- Escaped chars, URL-encoded chars with <span> --> 114 <span role="&" data-testname="span with role set to ampersand character" class="ex-generic">x</span> 115 <span role="<" data-testname="span with role set to less than angle bracket character" class="ex-generic">x</span> 116 <span role="&" data-testname="span with role set to unescaped ampersand character" class="ex-generic">x</span> 117 <span role="<" data-testname="span with role set to unescaped less than angle bracket character" class="ex-generic">x</span> 118 119 <!-- Backslash closing quote and other malformed roles with characters with <nav> --> 120 <nav role="region\" data-testname="nav with role set to region followed by backslash" data-expectedrole="navigation" class="ex">x</nav> 121 <nav role="\region" data-testname="nav with role set to backslash followed by region" data-expectedrole="navigation" class="ex">x</nav> 122 <nav role="re/gion" data-testname="nav with role set to region with backslash after e character" data-expectedrole="navigation" class="ex">x</nav> 123 124 <!-- Backslash closing quote and other malformed roles with characters with <span> --> 125 <span role="region\" data-testname="span with role set to region followed by backslash" class="ex-generic">x</span> 126 <span role="\region" data-testname="span with role set to backslash followed by region" class="ex-generic">x</span> 127 <span role="re/gion" data-testname="span with role set to region with forward slash after e character" class="ex-generic">x</span> 128 129 <script> 130 AriaUtils.verifyRolesBySelector(".ex"); 131 AriaUtils.verifyGenericRolesBySelector(".ex-generic"); 132 </script> 133 134 </body> 135 </html>