Skip to content

Commit 9904e0e

Browse files
IsaDCIsaDC
authored
Create updated tests for APG design pattern example: Toggle Button (#684)
* Update timestamped example directory and references.csv * Remove previous APG example * Example: remove unneeded CSS/JS references and update page title * Example: remove 'Related Links' nav and similar example links, as well as 'Accessibility Features', 'Keyboard Support', 'Role, Property, State, and Tabindex Attributes' and source code sections and footer nav * Generate .html source files with scripts automatically Co-authored-by: IsaDC <IsaDC@users.noreply.github.com>
1 parent dd21617 commit 9904e0e

10 files changed

+113
-113
lines changed

‎tests/toggle-button/data/references.csv‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ refId,value
22
author,Isabel Del Castillo
33
authorEmail,isa.delcastillo5@gmail.com
44
title,Toggle Button
5-
reference,reference/2021-3-29_145942/button.html
5+
reference,reference/2022-4-8_135651/button.html
66
designPattern,https://w3c.github.io/aria-practices/#button
77
example,https://w3c.github.io/aria-practices/examples/button/button.html
88
button,https://w3c.github.io/aria/#button

‎tests/toggle-button/reference/2021-3-29_145942/button.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.html‎

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Toggle Button Example</title>
6-
7-
<!-- CSS and JS for this example. -->
8-
<link rel="stylesheet" href="css/button.css">
9-
<script src="js/button.js"></script>
10-
</head>
11-
<body>
12-
<main>
13-
<h1>Toggle Button Example</h1>
14-
15-
<p>
16-
The following toggle button example demonstrates the <a href="https://w3c.github.io/aria-practices/#button">button design pattern.</a>
17-
</p>
18-
19-
<section>
20-
<div class="example-header">
21-
<h2 id="ex_label">Example</h2>
22-
</div>
23-
24-
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
25-
26-
<div id="example">
27-
<p style="display: none;">This <q>Print</q> action button uses a <code>div</code> element.</p>
28-
<div style="display: none;" tabindex="-1" role="button" id="action">Print Page</div>
29-
30-
<p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
31-
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
32-
<a tabindex="0" role="button" id="toggle" aria-pressed="false">
33-
Mute
34-
<svg aria-hidden="true" focusable="false">
35-
<use xlink:href="#icon-sound"></use>
36-
</svg>
37-
</a>
38-
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
39-
40-
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">
41-
<defs>
42-
<symbol id="icon-mute" viewBox="0 0 75 75">
43-
<polygon
44-
id="polygon1"
45-
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
46-
style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;" />
47-
<path
48-
id="path3003"
49-
d="M 48.651772,50.269646 69.395223,25.971024"
50-
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
51-
<path
52-
id="path3003-1"
53-
d="M 69.395223,50.269646 48.651772,25.971024"
54-
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
55-
</symbol>
56-
<symbol id="icon-sound" viewBox="0 0 75 75">
57-
<polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
58-
style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"/>
59-
<path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577"
60-
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
61-
<path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076"
62-
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
63-
<path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
64-
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
65-
</symbol>
66-
</defs>
67-
</svg>
68-
69-
</div>
70-
71-
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
72-
</section>
73-
</main>
74-
</body>
75-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Toggle Button Example</title>
6+
7+
<!-- CSS and JS for this example. -->
8+
<link rel="stylesheet" href="css/button.css">
9+
<script src="js/button.js"></script>
10+
</head>
11+
<body>
12+
<main>
13+
<h1>Toggle Button Example</h1>
14+
15+
<p>
16+
The following toggle button example demonstrates the <a href="https://w3c.github.io/aria-practices/#button">button design pattern.</a>
17+
</p>
18+
19+
<section>
20+
<div class="example-header">
21+
<h2 id="ex_label">Example</h2>
22+
</div>
23+
24+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
25+
26+
<div id="example">
27+
<p style="display: none;">This <q>Print</q> action button uses a <code>div</code> element.</p>
28+
<div style="display: none;" tabindex="-1" role="button" id="action">Print Page</div>
29+
30+
<p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
31+
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
32+
<a tabindex="0" role="button" id="toggle" aria-pressed="false">
33+
Mute
34+
<svg aria-hidden="true" focusable="false">
35+
<use xlink:href="#icon-sound"></use>
36+
</svg>
37+
</a>
38+
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
39+
40+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">
41+
<defs>
42+
<symbol id="icon-mute" viewBox="0 0 75 75">
43+
<polygon
44+
id="polygon1"
45+
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
46+
style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;" />
47+
<path
48+
id="path3003"
49+
d="M 48.651772,50.269646 69.395223,25.971024"
50+
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
51+
<path
52+
id="path3003-1"
53+
d="M 69.395223,50.269646 48.651772,25.971024"
54+
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
55+
</symbol>
56+
<symbol id="icon-sound" viewBox="0 0 75 75">
57+
<polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
58+
style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"/>
59+
<path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577"
60+
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
61+
<path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076"
62+
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
63+
<path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
64+
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
65+
</symbol>
66+
</defs>
67+
</svg>
68+
69+
</div>
70+
71+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
72+
</section>
73+
</main>
74+
</body>
75+
</html>

‎tests/toggle-button/reference/2021-3-29_145942/button.setFocusAfterButton.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.setFocusAfterButton.html‎

File renamed without changes.

‎tests/toggle-button/reference/2021-3-29_145942/button.setFocusAfterButtonAndSetStateToPressed.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.setFocusAfterButtonAndSetStateToPressed.html‎

File renamed without changes.

‎tests/toggle-button/reference/2021-3-29_145942/button.setFocusBeforeButton.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.setFocusBeforeButton.html‎

File renamed without changes.

‎tests/toggle-button/reference/2021-3-29_145942/button.setFocusBeforeButtonAndSetStateToPressed.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.setFocusBeforeButtonAndSetStateToPressed.html‎

File renamed without changes.

‎tests/toggle-button/reference/2021-3-29_145942/button.setFocusOnButton.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.setFocusOnButton.html‎

File renamed without changes.

‎tests/toggle-button/reference/2021-3-29_145942/button.setFocusOnButtonAndSetStateToPressed.html‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/button.setFocusOnButtonAndSetStateToPressed.html‎

File renamed without changes.

‎tests/toggle-button/reference/2021-3-29_145942/css/button.css‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/css/button.css‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,26 @@
22
display: inline-block;
33
position: relative;
44
padding: 0.4em 0.7em;
5-
border: 1px solid hsl(213, 71%, 49%);
5+
border: 1px solid hsl(213deg 71% 49%);
66
border-radius: 5px;
7-
box-shadow: 0 1px 2px hsl(216, 27%, 55%);
7+
box-shadow: 0 1px 2px hsl(216deg 27% 55%);
88
color: #fff;
9-
text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
10-
background-color: hsl(216, 82%, 51%);
9+
text-shadow: 0 -1px 1px hsl(216deg 27% 25%);
10+
background-color: hsl(216deg 82% 51%);
1111
background-image: linear-gradient(
1212
to bottom,
13-
hsl(216, 82%, 53%),
14-
hsl(216, 82%, 47%)
13+
hsl(216deg 82% 53%),
14+
hsl(216deg 82% 47%)
1515
);
1616
}
1717

1818
[role="button"]:hover {
19-
border-color: hsl(213, 71%, 29%);
20-
background-color: hsl(216, 82%, 31%);
19+
border-color: hsl(213deg 71% 29%);
20+
background-color: hsl(216deg 82% 31%);
2121
background-image: linear-gradient(
2222
to bottom,
23-
hsl(216, 82%, 33%),
24-
hsl(216, 82%, 27%)
23+
hsl(216deg 82% 33%),
24+
hsl(216deg 82% 27%)
2525
);
2626
cursor: default;
2727
}
@@ -39,72 +39,72 @@
3939
right: calc(-1px - 3px - 3px);
4040
bottom: calc(-1px - 3px - 3px);
4141
left: calc(-1px - 3px - 3px);
42-
border: 3px solid hsl(213, 71%, 49%);
42+
border: 3px solid hsl(213deg 71% 49%);
4343

4444
/* button border radius + outline width + offset */
4545
border-radius: calc(5px + 3px + 3px);
4646
content: "";
4747
}
4848

4949
[role="button"]:active {
50-
border-color: hsl(213, 71%, 49%);
51-
background-color: hsl(216, 82%, 31%);
50+
border-color: hsl(213deg 71% 49%);
51+
background-color: hsl(216deg 82% 31%);
5252
background-image: linear-gradient(
5353
to bottom,
54-
hsl(216, 82%, 53%),
55-
hsl(216, 82%, 47%)
54+
hsl(216deg 82% 53%),
55+
hsl(216deg 82% 47%)
5656
);
57-
box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
57+
box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%);
5858
}
5959

6060
[role="button"][aria-pressed] {
61-
border-color: hsl(261, 71%, 49%);
62-
box-shadow: 0 1px 2px hsl(261, 27%, 55%);
63-
text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
64-
background-color: hsl(261, 82%, 51%);
61+
border-color: hsl(261deg 71% 49%);
62+
box-shadow: 0 1px 2px hsl(261deg 27% 55%);
63+
text-shadow: 0 -1px 1px hsl(261deg 27% 25%);
64+
background-color: hsl(261deg 82% 51%);
6565
background-image: linear-gradient(
6666
to bottom,
67-
hsl(261, 82%, 53%),
68-
hsl(261, 82%, 47%)
67+
hsl(261deg 82% 53%),
68+
hsl(261deg 82% 47%)
6969
);
7070
}
7171

7272
[role="button"][aria-pressed]:hover {
73-
border-color: hsl(261, 71%, 29%);
74-
background-color: hsl(261, 82%, 31%);
73+
border-color: hsl(261deg 71% 29%);
74+
background-color: hsl(261deg 82% 31%);
7575
background-image: linear-gradient(
7676
to bottom,
77-
hsl(261, 82%, 33%),
78-
hsl(261, 82%, 27%)
77+
hsl(261deg 82% 33%),
78+
hsl(261deg 82% 27%)
7979
);
8080
}
8181

8282
[role="button"][aria-pressed="true"] {
8383
padding-top: 0.5em;
8484
padding-bottom: 0.3em;
85-
border-color: hsl(261, 71%, 49%);
86-
background-color: hsl(261, 82%, 31%);
85+
border-color: hsl(261deg 71% 49%);
86+
background-color: hsl(261deg 82% 31%);
8787
background-image: linear-gradient(
8888
to bottom,
89-
hsl(261, 82%, 63%),
90-
hsl(261, 82%, 57%)
89+
hsl(261deg 82% 63%),
90+
hsl(261deg 82% 57%)
9191
);
92-
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
92+
box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 30%);
9393
}
9494

9595
[role="button"][aria-pressed="true"]:hover {
96-
border-color: hsl(261, 71%, 49%);
97-
background-color: hsl(261, 82%, 31%);
96+
border-color: hsl(261deg 71% 49%);
97+
background-color: hsl(261deg 82% 31%);
9898
background-image: linear-gradient(
9999
to bottom,
100-
hsl(261, 82%, 43%),
101-
hsl(261, 82%, 37%)
100+
hsl(261deg 82% 43%),
101+
hsl(261deg 82% 37%)
102102
);
103-
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
103+
box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 20%);
104104
}
105105

106106
[role="button"][aria-pressed]:focus::before {
107-
border-color: hsl(261, 71%, 49%);
107+
border-color: hsl(261deg 71% 49%);
108108
}
109109

110110
[role="button"] svg {

‎tests/toggle-button/reference/2021-3-29_145942/js/button.js‎ renamed to ‎tests/toggle-button/reference/2022-4-8_135651/js/button.js‎

File renamed without changes.

0 commit comments

Comments
 (0)