testing/web-platform/tests/wai-aria/role/invalid-roles.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

<!doctype html>
<html>
<head>
  <title>Invalid Role Verification Tests</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/wai-aria/scripts/aria-utils.js"></script>
  <meta charset="utf-8">
</head>
<body>

<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>

<!-- Tests fallback for <nav> when 1/2/3 invalid roles are supplied -->
<nav role="foo" data-testname="nav with invalid role name foo" data-expectedrole="navigation" class="ex">x</nav>
<nav role="foo bar" data-testname="nav with two invalid role names" data-expectedrole="navigation" class="ex">x</nav>
<nav role="foo bar baz" data-testname="nav with three invalid role names" data-expectedrole="navigation" class="ex">x</nav>

<!-- Tests fallback for <button> when 1/2/3 invalid roles are supplied -->
<button role="foo" data-testname="button with invalid role name foo" data-expectedrole="button" class="ex">x</button>
<button role="foo bar" data-testname="button with two invalid role names" data-expectedrole="button" class="ex">x</button>
<button role="foo bar baz" data-testname="button with three invalid role names" data-expectedrole="button" class="ex">x</button>

<!-- Tests fallback for semantically neutral elements when 1/2/3 invalid roles are supplied -->
<span role="foo" data-testname="span with invalid role name foo" class="ex-generic">x</span>
<span role="foo bar" data-testname="span with two invalid role names" class="ex-generic">x</span>
<span role="foo bar baz" data-testname="span with three invalid role names" class="ex-generic">x</span>
<div role="foo" data-testname="div with invalid role name foo" class="ex-generic">x</div>
<div role="foo bar" data-testname="div with two invalid role names" class="ex-generic">x</div>
<div role="foo bar baz" data-testname="div with three invalid role names"class="ex-generic">x</div>

<!-- Whitespace tests with <nav> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) -->
<nav role=" " data-testname="nav with empty character as role" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&#13" data-testname="nav with line break (&#13) character as role" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&#9" data-testname="nav with tab (&#9) as role (should be treated as whitespace)" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&#8203" data-testname="nav with zero-width space as role (should be treated as whitespace)" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&#10240" data-testname="nav with braille space (10240) as role" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&#x2800" data-testname="nav with braille space (x2800) as role" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&nbsp;" data-testname="nav with non-breaking space (nbsp) as role" data-expectedrole="navigation" class="ex">x</nav>
<nav role="&#20" data-testname="nav with standard space (nbsp) as role" data-expectedrole="navigation" class="ex">x</nav>

<!-- Escaped whitespace tests with <span> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) -->
<span role=" " data-testname="span with escaped empty character as role" class="ex-generic">x</span>
<span role="&#13" data-testname="span with escaped line break (&#13) character as role" class="ex-generic">x</span>
<span role="&#9" data-testname="span with escaped tab (&#9) as role (should be treated as whitespace)" class="ex-generic">x</span>
<span role="&#8203" data-testname="span with escaped zero-width space as role (should be treated as whitespace)" class="ex-generic">x</span>
<span role="&#10240" data-testname="span with escaped braille space (10240) as role" class="ex-generic">x</span>
<span role="&#x2800" data-testname="span with escaped braille space (x2800) as role" class="ex-generic">x</span>
<span role="&nbsp;" data-testname="span with escaped non-breaking space (nbsp) as role" class="ex-generic">x</span>
<span role="&#20" data-testname="span with escaped standard space (nbsp) as role" class="ex-generic">x</span>

<!-- Unescaped whitespace tests with <span> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) -->
  <span role=" " data-testname="span with empty character as role" class="ex-generic">x</span>
  <span role="
  " data-testname="span with line break (&#13) character as role" class="ex-generic">x</span>
  <span role="  " data-testname="span with tab (&#9) as role (should be treated as whitespace)" class="ex-generic">x</span>
  <span role="‍" data-testname="span with zero-width space as role (should be treated as whitespace)" class="ex-generic">x</span>
  <span role="⠀" data-testname="span with braille space (10240) as role" class="ex-generic">x</span>
  <span role=" " data-testname="span with non-breaking space (nbsp) as role" class="ex-generic">x</span>
  <span role=" " data-testname="span with standard space as role" class="ex-generic">x</span>

<!-- Diacritics with <a> -->
<a href="#" role="&#771" data-testname="link with role set to tilde diacritic" data-expectedrole="link" class="ex">x</a>
<a href="#" role="foo&#771" data-testname="link with role foo that has tilde diacritic" data-expectedrole="link" class="ex">x</a>
<a href="#" role="&#773" data-testname="link with role set to overline diacritic" data-expectedrole="link" class="ex">x</a>
<a href="#" role="foo&#773" data-testname="link with role foo that has overline diacritic" data-expectedrole="link" class="ex">x</a>
<a href="#" role="&#813" data-testname="link with role set to circumflex diacritic below" data-expectedrole="link" class="ex">x</a>
<a href="#" role="foo&#813" data-testname="link with role foo that has circumflex diacritic below" data-expectedrole="link" class="ex">x</a>
<a href="#" role="button&#771" data-testname="link with role set to button with tilde diacritic" data-expectedrole="link" class="ex">x</a>

<!-- Diacritics with <div> -->
<div role="&#771" data-testname="div with role set to tilde diacritic" class="ex-generic">x</div>
<div role="foo&#771" data-testname="div with role foo that has tilde diacritic" class="ex-generic">x</div>
<div role="button&#771" data-testname="div with role set to button with tilde diacritic" class="ex-generic">x</div>
<div role="button´" data-testname="div with role set to button with unescaped tilde diacritic" class="ex-generic">x</div>

<!-- Zero-width joiners (e.g., ZWJ like emoji variants use) with <button> -->
<!-- [sic] role="‍" should include an invisible ZWJ], and role="link‍" ends with an invisible ZWJ. Use caution when editing. -->
<button role="‍" data-testname="button with role set to zero-width joiner" data-expectedrole="button" class="ex">x</button>
<button role="link‍" data-testname="button with role set to foo with zero-width joiner" data-expectedrole="button" class="ex">x</button>

<!-- Non-western chars with <nav> -->
<nav role="Θ" data-testname="nav with role set to theta (Θ)" data-expectedrole="navigation" class="ex">x</nav>
<nav role="ژ" data-testname="nav with role set to Persian character (ژ)" data-expectedrole="navigation" class="ex">x</nav>
<nav role="ژ ♮" data-testname="nav with multiple non-latin character roles, Persian character (ژ) and ♮" data-expectedrole="navigation" class="ex">x</nav>
<nav role="漢字" data-testname="nav with role set to Japanese kanji" data-expectedrole="navigation" class="ex">x</nav>

<!-- Non-western chars with <span> -->
<span role="Θ" data-testname="span with role set to theta (Θ)" class="ex-generic">x</span>
<span role="ژ" data-testname="span with role set to Persian character (ژ)" class="ex-generic">x</span>
<span role="ژ ♮" data-testname="span with multiple non-latin character roles, Persian character (ژ) and ♮" class="ex-generic">x</span>
<span role="漢字" data-testname="span with role set to Japanese kanji" class="ex-generic">x</span>

<!-- RTL strings (Hebrew & Arabic) with <nav> -->
<nav role="سلام" data-testname="nav with role set to Arabic text" data-expectedrole="navigation" class="ex">x</nav>
<nav role="سلام حبيب" data-testname="nav with multiple role assignments set to Arabic text" data-expectedrole="navigation" class="ex">x</nav>
<nav role="שלום" data-testname="nav with role set to Hebrew text" data-expectedrole="navigation" class="ex">x</nav>
<nav role="שלום חבר" data-testname="nav with multiple role assignments set to Hebrew text" data-expectedrole="navigation" class="ex">x</nav>

<!-- RTL strings (Hebrew & Arabic) with <div> -->
<div role="سلام" data-testname="div with role set to Arabic text" class="ex-generic">x</div>
<div role="سلام حبيب" data-testname="div with multiple role assignments set to Arabic text" class="ex-generic">x</div>
<div role="שלום" data-testname="div with role set to Hebrew text" class="ex-generic">x</div>
<div role="שלום חבר" data-testname="div with multiple role assignments set to Hebrew text" class="ex-generic">x</div>

<!-- Escaped chars, URL-encoded chars with <a> -->
<a href="https://www.apple.com/" role="&amp" data-testname="link with role set to ampersand character" data-expectedrole="link" class="ex">x</a>
<a href="https://www.apple.com/" role="&lt" data-testname="link with role set to less than angle bracket character" data-expectedrole="link" class="ex">x</a>

<!-- Escaped chars, URL-encoded chars with <span> -->
<span role="&amp" data-testname="span with role set to ampersand character" class="ex-generic">x</span>
<span role="&lt" data-testname="span with role set to less than angle bracket character" class="ex-generic">x</span>
<span role="&" data-testname="span with role set to unescaped ampersand character" class="ex-generic">x</span>
<span role="<" data-testname="span with role set to unescaped less than angle bracket character" class="ex-generic">x</span>

<!-- Backslash closing quote and other malformed roles with characters with <nav> -->
<nav role="region\" data-testname="nav with role set to region followed by backslash" data-expectedrole="navigation" class="ex">x</nav>
<nav role="\region" data-testname="nav with role set to backslash followed by region" data-expectedrole="navigation" class="ex">x</nav>
<nav role="re/gion" data-testname="nav with role set to region with backslash after e character" data-expectedrole="navigation" class="ex">x</nav>

<!-- Backslash closing quote and other malformed roles with characters with <span> -->
<span role="region\" data-testname="span with role set to region followed by backslash" class="ex-generic">x</span>
<span role="\region" data-testname="span with role set to backslash followed by region" class="ex-generic">x</span>
<span role="re/gion" data-testname="span with role set to region with forward slash after e character" class="ex-generic">x</span>

<script>
AriaUtils.verifyRolesBySelector(".ex");
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
</script>

</body>
</html>