Skip to content

Commit 0e19fad

Browse files
scottaoharascottaohara
authored
Create popover-and-command.html
test case related to #514
1 parent 2493015 commit 0e19fad

File tree

1 file changed

+138
-0
lines changed

1 file changed

+138
-0
lines changed

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

0 commit comments

Comments
 (0)