Skip to content

Commit f36bf0e

Browse files
scottaoharascottaohara
authored
Create button-input-button.html
1 parent 86a96ce commit f36bf0e

File tree

1 file changed

+134
-0
lines changed

1 file changed

+134
-0
lines changed

‎tests/button-input-button.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
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+
<p>
53+
Authors MAY use <code>role=gridcell</code>, <code>slider</code> or <code>treeitem</code> on a <code>button</code> element.
54+
</p>
55+
56+
<div class="flex">
57+
<div class="widgetDemo">
58+
<div class="testcase">
59+
<button role=gridcell>role=gridcell</button>
60+
<button role=treeitem>role=treeitem</button>
61+
<button role=slider>role=slider</button>
62+
</div>
63+
64+
<p><strong>Expected result:</strong>
65+
These test cases would pass checks for an allowed role, but other failures would be expected as the elements are not contained or owned by their expected accessibility parents (gridcell or treeitem), or lack other expected properties required by authors (slider).
66+
</p>
67+
</div>
68+
69+
<div class="widgetDemo">
70+
<div class="testcase">
71+
<div role=grid>
72+
<div role=row>
73+
<button role=gridcell>role=gridcell</button>
74+
</div>
75+
</div>
76+
77+
<div role=tree>
78+
<button role=treeitem>role=treeitem</button>
79+
</div>
80+
81+
<button role=slider aria-valuenow=0 aria-label=role=slider>role=slider</button>
82+
</div>
83+
84+
<p>
85+
<strong>Expected result:</strong>
86+
No errors or warnings would be expected for these test cases, as they meet all the necessary requirements for use of these roles (necessary nesting and required attributes).
87+
</p>
88+
</div>
89+
</div>
90+
91+
<p>
92+
Authors MAY use <code>role=gridcell</code>, <code>slider</code> or <code>treeitem</code> on a <code>input type=button</code> element.
93+
</p>
94+
<p>
95+
Note that while these roles are allowed, web authors will generally have a much easier time building these components using another HTML
96+
element as their base (e.g., a button or even a div).
97+
</p>
98+
<div class="flex">
99+
<div class="widgetDemo">
100+
<div class="testcase">
101+
<input type=button role=gridcell value=role=gridcell>
102+
<input type=button role=treeitem value=role=treeitem>
103+
<input type=button role=slider value=role=slider>
104+
</div>
105+
106+
<p><strong>Expected result:</strong>
107+
These test cases would pass checks for an allowed role, but other failures would be expected as the elements are not contained or owned by their expected accessibility parents (gridcell or treeitem), or lack other expected properties required by authors (slider).
108+
</p>
109+
</div>
110+
111+
<div class="widgetDemo">
112+
<div class="testcase">
113+
<div role=grid>
114+
<div role=row>
115+
<input type=button role=gridcell value=role=gridcell>
116+
</div>
117+
</div>
118+
119+
<div role=tree>
120+
<input type=button role=treeitem value=role=treeitem>
121+
</div>
122+
123+
<input type=button role=slider value=role=slider aria-label=role=slider aria-valuenow=0>
124+
</div>
125+
126+
<p>
127+
<strong>Expected result:</strong>
128+
No errors or warnings would be expected for these test cases, as they meet all the necessary requirements for use of these roles (necessary nesting and required attributes).
129+
</p>
130+
</div>
131+
</div>
132+
</main>
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)