Skip to content

Commit 59a61f7

Browse files
scottaoharascottaohara
authored
Merge branch 'gh-pages' into scottaohara-patch-1
2 parents c311b90 + a4ba0a6 commit 59a61f7

File tree

4 files changed

+247
-4
lines changed

4 files changed

+247
-4
lines changed

‎index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -500,9 +500,10 @@ <h2 id="docconformance">
500500
is NOT RECOMMENDED, in some situations explicitly setting these attributes can be helpful – for instance,
501501
for user agents that do not expose implicit ARIA semantics for certain elements.
502502
</p>
503-
<p class="note" id="dpub-usage-note">
504-
While it is conforming to use [[[dpub-aria-1.0]]] `role` values as outlined in the following table, the current support for
505-
exposing the semantics of these values to users of assistive technology is close to non-existent.
503+
<p class="note" id="dpub-usage-note">
504+
While it is conforming to use [[[dpub-aria-1.0]]] `role` values as outlined in the following table, the use of these roles
505+
is not intended for implementation of websites. If using these role for purposes beyond the scope of the digital publishing
506+
industry, further manual testing will be necessary to ensure the intended experience is provided to users.
506507
</p>
507508
<table class="data">
508509
<caption>

‎results/styles.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,10 @@ select:-moz-focusring {
140140
padding: 0;
141141
}
142142

143+
select > button {
144+
color: #000;
145+
}
146+
143147
:focus:not([tabindex="-1"]) {
144148
outline: .25rem solid #aade87;
145149
}
@@ -398,4 +402,4 @@ code p {
398402
padding: 0px;
399403
}
400404

401-
strong.question { font-family: "Roboto Slab", Cambria, Georgia, serif; color:#900;font-size:larger;font weight:bold}
405+
strong.question { font-family: "Roboto Slab", Cambria, Georgia, serif; color:#900;font-size:larger;font weight:bold}

‎tests/popover-and-command.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
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>popovertarget</code> and <code>command</code> with unnecessary use of <code>aria-expanded</code></h1>
49+
<p>last updated 23 July 2025</p>
50+
<p>
51+
<a href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-target-attributes"><code>popovertarget</code></a> attribute is allowed on
52+
<a href="https://html.spec.whatwg.org/multipage/forms.html#concept-button"><code>button</code> elements</a>.
53+
</p>
54+
<p>
55+
<a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-command"><code>command</code></a> attribute is allowed on
56+
<a href="https://html.spec.whatwg.org/multipage/forms.html#concept-button"><code>button</code> elements</a>.
57+
</p>
58+
</header>
59+
<main>
60+
<h2>Tests:</h2>
61+
62+
<div class="flex">
63+
<div class="widgetDemo">
64+
<h3>Test 1</h3>
65+
<p>
66+
Authors MUST NOT use the <code>aria-expanded</code> attribute on any element which also has a <code>popovertarget</code> attribute.</p>
67+
68+
<div class="testcase">
69+
<button popovertarget=f aria-expanded="false">test 1</button>
70+
<div id=f popover>test 1 popover</div>
71+
</div>
72+
73+
<p><strong>Expected result:</strong>
74+
<br> error for inappropriate use of <code>aria-expanded</code> when element has <code>popovertarget</code>
75+
attribute which implicitly handles <code>aria-expanded</code> states.</p>
76+
</div>
77+
78+
<div class="widgetDemo">
79+
<h3>Test 2</h3>
80+
<p>
81+
Authors MUST NOT use the <code>aria-expanded</code> attribute on any element which will have a <code>popovertarget</code> attribute
82+
set due to adding it via the <code>popoverTargetElement</code> IDL attribute.</p>
83+
<div class="testcase">
84+
<button aria-expanded=false id=t2>test 2</button>
85+
<div id=g popover>test 2 popover <button popovertarget=g aria-label=close>x</button></div>
86+
<script>
87+
const b = document.getElementById('t2');
88+
const p = document.getElementById('g');
89+
b.popoverTargetElement = p;
90+
</script>
91+
</div>
92+
93+
<p><strong>Expected result:</strong>
94+
<br> error for inappropriate use of <code>aria-expanded</code> when element has <code>popovertarget</code>
95+
attribute which implicitly handles <code>aria-expanded</code> states.</p>
96+
</div>
97+
</div>
98+
99+
<div class="flex">
100+
<div class="widgetDemo">
101+
<h3>Test 3</h3>
102+
<p>
103+
Authors MUST NOT use the <code>aria-expanded</code> attribute on any element which also has a <code>command</code> attribute.</p>
104+
105+
<div class="testcase">
106+
<button popovertarget=f2 aria-expanded="false">test 3</button>
107+
<div id=f2 popover>test 3 popover</div>
108+
</div>
109+
110+
<p><strong>Expected result:</strong>
111+
<br> error for inappropriate use of <code>aria-expanded</code> when element has <code>popovertarget</code>
112+
attribute which implicitly handles <code>aria-expanded</code> states.</p>
113+
</div>
114+
115+
<div class="widgetDemo">
116+
<h3>Test 4</h3>
117+
<p>
118+
Authors MUST NOT use the <code>aria-expanded</code> attribute on any element which will have a <code>command</code> attribute
119+
set due to adding it via the <code>popoverTargetElement</code> IDL attribute.</p>
120+
<div class="testcase">
121+
<button aria-expanded=false id=t4>test 4</button>
122+
<div id=g4 popover>test 4 popover <button commandForElement=g4 command="close" aria-label=close>x</button></div>
123+
<script>
124+
const b4 = document.getElementById('t4');
125+
const p4 = document.getElementById('g4');
126+
b4.commandForElement = p4;
127+
b4.command = 'toggle-popover'
128+
</script>
129+
</div>
130+
131+
<p><strong>Expected result:</strong>
132+
<br> error for inappropriate use of <code>aria-expanded</code> when element has <code>popovertarget</code>
133+
attribute which implicitly handles <code>aria-expanded</code> states.</p>
134+
</div>
135+
</div>
136+
</main>
137+
</body>
138+
</html>

‎tests/selectedcontent.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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+
<style>
45+
select, ::picker(select) {
46+
appearance: base-select;
47+
}
48+
select button {
49+
color: black;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
55+
<header>
56+
<h1>ARIA in HTML - test cases for <code>selectedcontent</code> and <code>select</code>'s <code>button</code> part elements</h1>
57+
<p>last updated 23 July 2025</p>
58+
</header>
59+
<main>
60+
<h2>Tests:</h2>
61+
62+
<div class="flex">
63+
<div class="widgetDemo">
64+
<h3>Test 1</h3>
65+
<p>
66+
Authors MUST NOT use any <code>role</code> or <code>aria-*</code> attribute on the <code>selectedcontent</code> attribute when it
67+
is a valid child of the <code>button</code> part of a customized <code>select</code> element. Additionally authors MUST NOT use ARIA
68+
attributes on the <code>button</code> part of a customized <code>select</code> element.</p>
69+
70+
<div class="testcase">
71+
<label for=s>Test 1</label>
72+
<select id=s>
73+
<button aria-label=bar aria-expanded=false><selectedcontent role=link aria-label=foo></selectedcontent></button>
74+
<option>option 1</option>
75+
<option>option 2</option>
76+
</select>
77+
</div>
78+
79+
<p><strong>Expected result:</strong>
80+
<br> error or warn for inappropriate use of the <code>role</code> and any <code>aria-*</code> attribute when element is a
81+
child of the button part of a customized <code>select</code> element. </p>
82+
</div>
83+
84+
<div class="widgetDemo">
85+
<h3>Test 2</h3>
86+
<p>
87+
The use of the <code>selectedcontent</code> element outside of the context of the button part of a customizable <code>select</code>
88+
element is invalid. But, to allow for a11y remediation of author misuse, ARIA attributes MAY be used on the element in this context.</p>
89+
<div class="testcase">
90+
<selectedcontent style="color: blue; text-decoration: underline;" role=link aria-label=foo tabindex=0>xxx</selectedcontent>
91+
</div>
92+
93+
<p><strong>Expected result:</strong>
94+
<br> while the use of the <code>seletedcontent</code> element is incorrectly used in this example, the use of ARIA is allowed
95+
so authors may correct for misuse of the element, thus no errors related to the use of ARIA attributes should be flagged in this case.</p>
96+
</div>
97+
</div>
98+
</main>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)