Skip to content

Commit fdf02e2

Browse files
patrickhlaukepatrickhlauke
authored
Merge branch 'gh-pages' into update-label-elm-allowances
2 parents d70b37f + a497ae5 commit fdf02e2

File tree

3 files changed

+127
-2
lines changed

3 files changed

+127
-2
lines changed

‎index.html‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@
6464
the following substantive additions and/or corrections have been proposed:
6565
</p>
6666
<ul>
67+
<li>
68+
<a href="https://github.com/w3c/html-aria/pull/528">23 July 2025 - Addition:</a>
69+
Add the <a href="#el-selectedcontent">`selectedcontent`</a> element and provide updated
70+
allowances for the <a href="#el-button">`button`</a> element when it is used in the context
71+
of a customized `select` element.
72+
</li>
6773
<li>
6874
<a href="https://github.com/w3c/html-aria/pull/550">23 July 2025 - Correction:</a>
6975
Clarify that the <a href="#el-html">`html`</a> element is a `generic` element, and that
@@ -893,7 +899,8 @@ <h2 id="docconformance">
893899
[^button^]
894900
</th>
895901
<td>
896-
<code>role=<a href="#index-aria-button">button</a></code>
902+
<p><code>role=<a href="#index-aria-button">button</a></code></p>
903+
<p>If the `button` is the first child of a `select` element, the element is `inert`.</p>
897904
</td>
898905
<td>
899906
<p>
@@ -919,6 +926,9 @@ <h2 id="docconformance">
919926
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
920927
and any `aria-*` attributes applicable to the allowed roles.
921928
</p>
929+
<hr>
930+
<p>If the `button` is the first child of a `select` element:
931+
<strong class="nosupport"><a>No `role`</a> or `aria-*` attributes</strong></p>
922932
</td>
923933
</tr>
924934
<tr>
@@ -2960,6 +2970,28 @@ <h2 id="docconformance">
29602970
</p>
29612971
</td>
29622972
</tr>
2973+
<tr>
2974+
<th id="el-selectedcontent" tabindex="-1">
2975+
[^selectedcontent^]
2976+
</th>
2977+
<td>
2978+
<code>role=<a href="#index-aria-generic">generic</a></code>
2979+
</td>
2980+
<td>
2981+
<p>
2982+
If used as a valid descendant of a `select` element: <strong class="nosupport"><a>no `role`</a> or `aria-*` attributes</strong>
2983+
</p>
2984+
<p>
2985+
Otherwise, <a><strong>any `role`</strong></a> if the element is used outside of its intended context as a child of the `button` part of a customizable `select` element,
2986+
though <code><a href="#index-aria-generic">generic</a></code> is NOT RECOMMENDED.
2987+
</p>
2988+
<p><a>Naming Prohibited</a></p>
2989+
<p>
2990+
Otherwise, <a data-cite="wai-aria-1.2#global_states">global `aria-*` attributes</a>
2991+
and any `aria-*` attributes applicable to the allowed roles.
2992+
</p>
2993+
</td>
2994+
</tr>
29632995
<tr>
29642996
<th id="el-slot" tabindex="-1">
29652997
[^slot^]

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

‎tests/selectedcontent.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ <h2>Tests:</h2>
6363
<div class="widgetDemo">
6464
<h3>Test 1</h3>
6565
<p>
66-
Authors MUST NOT use any <code>role</code> or <code>aria-*</code> attribute on the <code>selectedcontent</code> attribute when it
66+
Authors MUST NOT use any <code>role</code> or <code>aria-*</code> attribute on the <code>selectedcontent</code> element when it
6767
is a valid child of the <code>button</code> part of a customized <code>select</code> element. Additionally authors MUST NOT use ARIA
6868
attributes on the <code>button</code> part of a customized <code>select</code> element.</p>
6969

0 commit comments

Comments
 (0)