Skip to content

Commit 9a81a0a

Browse files
scottaoharascottaohara
authored
Create input-image-reset-submit.html
1 parent cd1a919 commit 9a81a0a

File tree

1 file changed

+222
-0
lines changed

1 file changed

+222
-0
lines changed

‎tests/input-image-reset-submit.html

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title >ARIA in HTML - Test Cases</title>
6+
<link rel="stylesheet" href="../results/styles.css">
7+
<style>
8+
body{
9+
font-size: 1em;
10+
}
11+
.flex {
12+
display: flex;
13+
flex-wrap: wrap;
14+
align-items: stretch;
15+
}
16+
.widgetDemo {
17+
border: 1px solid #EEE;
18+
margin: .5em;
19+
padding: 5px;
20+
flex: 1 0 0;
21+
min-width: calc(300px - 1em);
22+
}
23+
.widgetDemo p {
24+
color: #696969;
25+
font-size: 1.125em;
26+
padding: 0;
27+
margin: .75em 0;
28+
}
29+
.testcase {
30+
margin: 2em 0;
31+
}
32+
h3{
33+
margin: .5em 0;
34+
border: 0;
35+
padding: 0;
36+
}
37+
h2 {font-size:2em}
38+
.testcase > * {
39+
border: 1px dotted;
40+
padding: .25em;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
46+
<header>
47+
<h1>ARIA in HTML - test case for additional role allowances for <code>button</code> and <code>input type=button</code> elements</h1>
48+
<p>last updated 15 February 2023</p>
49+
</header>
50+
<main>
51+
<h2>Tests:</h2>
52+
53+
<h3>
54+
Allowances for <code>input type=reset</code>, <code>input type=image</code> and <code>type=submit</code>
55+
</h3>
56+
<p>
57+
Authors are allowed to use the roles
58+
<code>button</code>, <code>checkbox</code>, <code>combobox</code>, <code>gridcell</code>, <code>link</code>, <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>option</code>, <code>radio</code>, <code>slider</code>, <code>switch</code>, <code>tab</code> or <code>treeitem</code> on a <code>input type=reset</code>, <code>input type=image</code> or <code>input type=submit</code> element, but their use is NOT RECOMMENDED.
59+
</p>
60+
<p>
61+
All allowed roles on the button element are now allowed on these elements as well. While there are far better elements to use as a base for these roles, and thus why it is 'not recommended' to specify these updated role allowances on these elements, if an author has no other choice and they end up using these elements to make an otherwise accessible custom widget, there is no reason to preclude their use as other automated and manual checks can call out potential accessibility gaps.
62+
</p>
63+
<div class="flex">
64+
<div class="widgetDemo">
65+
<div class="testcase">
66+
<p>input type=reset</p>
67+
<input type=reset role=button value="role=button">
68+
<input type=reset role=checkbox value="role=checkbox">
69+
<input type=reset role=combobox value="role=combobox">
70+
<input type=reset role=gridcell value="role=gridcell">
71+
<input type=reset role=link value="role=link">
72+
<input type=reset role=menuitem value="role=menuitem">
73+
<input type=reset role=menuitemcheckbox value="role=menuitemcheckbox">
74+
<input type=reset role=menuitemradio value="role=menuitemradio">
75+
<input type=reset role=option value="role=option">
76+
<input type=reset role=radio value="role=radio">
77+
<input type=reset role=slider value="role=slider">
78+
<input type=reset role=switch value="role=switch">
79+
<input type=reset role=tab value="role=tab">
80+
<input type=reset role=treeitem value="role=treeitem">
81+
82+
<p>input type=submit</p>
83+
<input type=submit role=button value="role=button">
84+
<input type=submit role=checkbox value="role=checkbox">
85+
<input type=submit role=combobox value="role=combobox">
86+
<input type=submit role=gridcell value="role=gridcell">
87+
<input type=submit role=link value="role=link">
88+
<input type=submit role=menuitem value="role=menuitem">
89+
<input type=submit role=menuitemcheckbox value="role=menuitemcheckbox">
90+
<input type=submit role=menuitemradio value="role=menuitemradio">
91+
<input type=submit role=option value="role=option">
92+
<input type=submit role=radio value="role=radio">
93+
<input type=submit role=slider value="role=slider">
94+
<input type=submit role=switch value="role=switch">
95+
<input type=submit role=tab value="role=tab">
96+
<input type=submit role=treeitem value="role=treeitem">
97+
98+
<p>input type=image</p>
99+
<input type=image role=button alt="role=button">
100+
<input type=image role=checkbox alt="role=checkbox">
101+
<input type=image role=combobox alt="role=combobox">
102+
<input type=image role=gridcell alt="role=gridcell">
103+
<input type=image role=link alt="role=link">
104+
<input type=image role=menuitem alt="role=menuitem">
105+
<input type=image role=menuitemcheckbox alt="role=menuitemcheckbox">
106+
<input type=image role=menuitemradio alt="role=menuitemradio">
107+
<input type=image role=option alt="role=option">
108+
<input type=image role=radio alt="role=radio">
109+
<input type=image role=slider alt="role=slider">
110+
<input type=image role=switch alt="role=switch">
111+
<input type=image role=tab alt="role=tab">
112+
<input type=image role=treeitem alt="role=treeitem">
113+
</div>
114+
115+
<p><strong>Expected result:</strong>
116+
These test cases would pass checks for an allowed role, but other failures would be expected for the instances where the elements are not contained or owned by their expected accessibility parents, or where they lack other expected properties required by authors. Note: there is no need to use a role=button on one of these elements, so while it's use is not recommended due to unnecessary redundncy, it is also not likely to cause issues.
117+
</p>
118+
</div>
119+
120+
<div class="widgetDemo">
121+
<div class="testcase">
122+
<p>input type=reset</p>
123+
<input type=reset role=button value="role=button">
124+
<input type=reset role=checkbox value="role=checkbox" aria-checked=true aria-label=test>
125+
<input type=reset role=combobox value="role=combobox" aria-expanded=true aria-controls=d>
126+
<div role=grid>
127+
<div role=row>
128+
<input type=reset role=gridcell value="role=gridcell">
129+
</div>
130+
</div>
131+
<input type=reset role=link value="role=link">
132+
<div role=menubar>
133+
<input type=reset role=menuitem value="role=menuitem">
134+
</div>
135+
<div role=menu>
136+
<input type=reset role=menuitemcheckbox value="role=menuitemcheckbox" aria-checked=false>
137+
<input type=reset role=menuitemradio value="role=menuitemradio" aria-checked=false>
138+
</div>
139+
<div role=listbox aria-label=test id=d>
140+
<input type=reset role=option value="role=option">
141+
</div>
142+
<input type=reset role=radio value="role=radio" aria-checked=false>
143+
<input type=reset role=slider value="role=slider" aria-label=test aria-valuenow=0>
144+
<input type=reset role=switch value="role=switch" aria-checked=false>
145+
<div role=tablist>
146+
<input type=reset role=tab value="role=tab" aria-selected=false>
147+
</div>
148+
<div role=tree>
149+
<input type=reset role=treeitem value="role=treeitem">
150+
</div>
151+
152+
<p>input type=submit</p>
153+
<input type=submit role=button value="role=button">
154+
<input type=submit role=checkbox value="role=checkbox" aria-checked=true aria-label=test>
155+
<input type=submit role=combobox value="role=combobox" aria-expanded=true aria-controls=d2>
156+
<div role=grid>
157+
<div role=row>
158+
<input type=submit role=gridcell value="role=gridcell">
159+
</div>
160+
</div>
161+
<input type=submit role=link value="role=link">
162+
<div role=menubar>
163+
<input type=submit role=menuitem value="role=menuitem">
164+
</div>
165+
<div role=menu>
166+
<input type=submit role=menuitemcheckbox value="role=menuitemcheckbox" aria-checked=false>
167+
<input type=submit role=menuitemradio value="role=menuitemradio" aria-checked=false>
168+
</div>
169+
<div role=listbox aria-label=test id=d2>
170+
<input type=submit role=option value="role=option">
171+
</div>
172+
<input type=submit role=radio value="role=radio" aria-checked=false>
173+
<input type=submit role=slider value="role=slider" aria-label=test aria-valuenow=0>
174+
<input type=submit role=switch value="role=switch" aria-checked=false>
175+
<div role=tablist>
176+
<input type=submit role=tab value="role=tab" aria-selected=false>
177+
</div>
178+
<div role=tree>
179+
<input type=submit role=treeitem value="role=treeitem">
180+
</div>
181+
182+
183+
<p>input type=image</p>
184+
<input type=image role=button alt="role=button">
185+
<input type=image role=checkbox alt="role=checkbox" aria-checked=true aria-label=test>
186+
<input type=image role=combobox alt="role=combobox" aria-expanded=true aria-controls=d2>
187+
<div role=grid>
188+
<div role=row>
189+
<input type=image role=gridcell alt="role=gridcell">
190+
</div>
191+
</div>
192+
<input type=image role=link alt="role=link">
193+
<div role=menubar>
194+
<input type=image role=menuitem alt="role=menuitem">
195+
</div>
196+
<div role=menu>
197+
<input type=image role=menuitemcheckbox alt="role=menuitemcheckbox" aria-checked=false>
198+
<input type=image role=menuitemradio alt="role=menuitemradio" aria-checked=false>
199+
</div>
200+
<div role=listbox aria-label=test id=d2>
201+
<input type=image role=option alt="role=option">
202+
</div>
203+
<input type=image role=radio alt="role=radio" aria-checked=false>
204+
<input type=image role=slider alt="role=slider" aria-label=test aria-valuenow=0>
205+
<input type=image role=switch alt="role=switch" aria-checked=false>
206+
<div role=tablist>
207+
<input type=image role=tab alt="role=tab" aria-selected=false>
208+
</div>
209+
<div role=tree>
210+
<input type=image role=treeitem alt="role=treeitem">
211+
</div>
212+
</div>
213+
214+
<p>
215+
<strong>Expected result:</strong>
216+
No errors would be expected for these test cases, as they meet all the necessary requirements for use of these roles (necessary nesting and required attributes). Conformance checkers could provide a warning or guidance to use a different HTML element as a base for these roles, if they so choose.
217+
</p>
218+
</div>
219+
</div>
220+
</main>
221+
</body>
222+
</html>

0 commit comments

Comments
 (0)