Skip to content

Commit 83e52cc

Browse files
scottaoharascottaohara
authored
Create label-element.html test case
create test case for label element updated rules
1 parent 5aa1657 commit 83e52cc

File tree

1 file changed

+93
-0
lines changed

1 file changed

+93
-0
lines changed

‎tests/label-element.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head>
3+
<meta charset="UTF-8">
4+
<title>ARIA in HTML - Test Cases</title>
5+
<link rel="stylesheet" href="../results/styles.css">
6+
<style>
7+
body{
8+
font-size: 1em;
9+
}
10+
.roleTest {
11+
border: 2px solid black;
12+
width: 1em;
13+
height: 1em;
14+
margin: 5px;
15+
}
16+
.flex {
17+
display: flex;
18+
flex-wrap: wrap;
19+
align-items: stretch;
20+
}
21+
.widgetDemo {
22+
border: 1px solid #EEE;
23+
margin: .5em;
24+
padding: 5px;
25+
flex: 1 0 0;
26+
min-width: calc(300px - 1em);
27+
}
28+
.widgetDemo p {
29+
color: #696969;
30+
font-size: 1.125em;
31+
padding: 0;
32+
margin: .75em 0;
33+
}
34+
.testcase {
35+
margin: 2em 0;
36+
}
37+
h3{
38+
margin: .5em 0;
39+
border: 0;
40+
padding: 0;
41+
}
42+
h2 {font-size:2em}
43+
</style>
44+
</head>
45+
<body>
46+
47+
<header>
48+
<h1>ARIA in HTML - test cases for <code>label</code> element</h1>
49+
<p>last updated 23 July 2025</p>
50+
</header>
51+
<main>
52+
<h2>Tests:</h2>
53+
54+
<div class="flex">
55+
<div class="widgetDemo">
56+
<h3>Test 1</h3>
57+
<p>
58+
Authors MUST NOT use any <code>role</code> or <code>aria-*</code> attribute on the <code>label</code> element when it
59+
associted with a labelable element.</p>
60+
61+
<div class="testcase">
62+
<p>
63+
<label for=x role=button aria-label=foo>Test 1a</label>
64+
<input id=x>
65+
</p>
66+
<p>
67+
<label role=article aria-label=foo>Test 1b
68+
<input>
69+
</label>
70+
</p>
71+
</div>
72+
73+
<p><strong>Expected result:</strong>
74+
<br> error or warn for inappropriate use of the <code>role</code> and any <code>aria-*</code> attribute when the
75+
<code>label</code> element is used to label a labelable element.</p>
76+
</div>
77+
78+
<div class="widgetDemo">
79+
<h3>Test 2</h3>
80+
<p>
81+
Authors MAY use any allowed role or aria-* attribute on the <code>label</code> element if it is not labeling a labelable element.</p>
82+
<div class="testcase">
83+
<label tabindex=0 role=button aria-expanded=false>test</label>
84+
</div>
85+
86+
<p><strong>Expected result:</strong>
87+
<br>this <code>label</code> element is not associated with a labelable element and thus authors MAY use any allowed roles and aria-* attributes to it.
88+
</p>
89+
</div>
90+
</div>
91+
</main>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)