Skip to content

Commit da84941

Browse files
IsaDCIsaDC
authored
Update Example for the vertical Temperature Slider Test Plan (#1272)
* Update APG example and reference in references.csv * Add direction links to example * Remove previous example * Decrease commands for navigating forwards to the slider for all screen readers * Remove invalid character from references.csv * Generate .html source files with scripts automatically
1 parent 5f58b72 commit da84941

26 files changed

+1563
-134
lines changed

‎tests/vertical-temperature-slider/data/jaws-commands.csv‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
testId,command,settings,assertionExceptions,presentationNumber
2-
navForwardsToSlider,down down down,virtualCursor,,1
2+
navForwardsToSlider,down down,virtualCursor,,1
33
navForwardsToSlider,f,virtualCursor,,1.1
44
navForwardsToSlider,tab,virtualCursor,2:interactionModeEnabled,1.2
55
navForwardsToSlider,tab,pcCursor,,1.3

‎tests/vertical-temperature-slider/data/nvda-commands.csv‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
testId,command,settings,assertionExceptions,presentationNumber
2-
navForwardsToSlider,down down down,browseMode,,1
2+
navForwardsToSlider,down down,browseMode,,1
33
navForwardsToSlider,f,browseMode,,1.1
44
navForwardsToSlider,tab,browseMode,2:interactionModeEnabled,1.2
55
navForwardsToSlider,tab,focusMode,,1.3

‎tests/vertical-temperature-slider/data/references.csv‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ refId,type,value,linkText
22
author,metadata,Isabel Del Castillo,
33
title,metadata,Vertical Temperature Slider,
44
authorEmail,metadata,isa.delcastillo5@gmail.com,
5-
reference,metadata,reference/2021-9-21_142211/slider-temperature.html,Test Case Page for Vertical Temperature Slider
5+
reference,metadata,reference/2025-7-15_112752/slider-temperature.html,Test Case Page for Vertical Temperature Slider
66
designPattern,metadata,https://www.w3.org/WAI/ARIA/apg/patterns/slider/,APG Pattern: Slider
77
example,metadata,https://www.w3.org/WAI/ARIA/apg/patterns/slider/examples/slider-temperature/,APG Example: Vertical Temperature Slider
88
slider,aria,slider,slider

‎tests/vertical-temperature-slider/data/voiceover_macos-commands.csv‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
testId,command,settings,assertionExceptions,presentationNumber
2-
navForwardsToSlider,ctrl+opt+right ctrl+opt+right ctrl+opt+right,,,5
2+
navForwardsToSlider,ctrl+opt+right ctrl+opt+right,,,5
33
navForwardsToSlider,tab,,,5.1
44
navForwardsToSlider,j,singleQuickKeyNavOn,,5.2
55
navBackToSlider,ctrl+opt+left,,,6

‎tests/vertical-temperature-slider/reference/2025-7-15_112752/css/slider-color-viewer.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* CSS Document */
2+
3+
.color-viewer-sliders label {
4+
display: block;
5+
}
6+
7+
.color-viewer-sliders .color-box {
8+
width: 200px;
9+
height: 200px;
10+
border: black solid medium;
11+
text-align: center;
12+
padding: 0.25em;
13+
forced-color-adjust: none;
14+
}
15+
16+
.color-viewer-sliders .color-info {
17+
padding-top: 5px;
18+
}
19+
20+
.color-viewer-sliders .color-info label {
21+
margin-top: 0.25em;
22+
display: block;
23+
}
24+
25+
.color-slider {
26+
margin: 0;
27+
margin-bottom: 1em;
28+
padding: 2px;
29+
touch-action: pan-y;
30+
width: 350px;
31+
outline: none;
32+
}
33+
34+
.color-slider div,
35+
.color-slider svg {
36+
display: block;
37+
width: 350px;
38+
}
39+
40+
.color-slider-label {
41+
margin: 0;
42+
padding: 0;
43+
font-weight: bold;
44+
}
45+
46+
.color-slider .value {
47+
color: currentcolor;
48+
fill: currentcolor;
49+
}
50+
51+
.color-slider .valueBackground {
52+
fill: white;
53+
stroke-width: 0;
54+
}
55+
56+
.color-slider .rail {
57+
fill: #bbb;
58+
stroke: currentcolor;
59+
stroke-width: 2px;
60+
opacity: 0.8;
61+
}
62+
63+
.color-slider .fill {
64+
stroke-width: 0;
65+
opacity: 0.5;
66+
pointer-events: none;
67+
}
68+
69+
.color-slider.red .fill {
70+
fill: red;
71+
}
72+
73+
.color-slider.green .fill {
74+
fill: green;
75+
}
76+
77+
.color-slider.blue .fill {
78+
fill: blue;
79+
}
80+
81+
.color-slider .thumb {
82+
fill: #666;
83+
stroke: currentcolor;
84+
stroke-width: 2px;
85+
}
86+
87+
.color-slider .focus {
88+
fill: transparent;
89+
stroke: transparent;
90+
stroke-width: 2px;
91+
}
92+
93+
.color-slider:focus .value,
94+
.color-slider:hover .value {
95+
font-weight: bold;
96+
}
97+
98+
.color-slider:focus .fill,
99+
.color-slider:hover .fill {
100+
opacity: 1;
101+
}
102+
103+
.color-slider:focus .rail,
104+
.color-slider:hover .rail {
105+
fill: transparent;
106+
stroke: currentcolor;
107+
opacity: 1;
108+
}
109+
110+
.color-slider:focus .thumb,
111+
.color-slider:hover .thumb {
112+
fill: #ddd;
113+
stroke: currentcolor;
114+
opacity: 1;
115+
}
116+
117+
.color-slider:focus .focus,
118+
.color-slider:hover .focus {
119+
stroke: currentcolor;
120+
}

‎tests/vertical-temperature-slider/reference/2025-7-15_112752/css/slider-rating.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/* CSS Document */
2+
3+
.rating-slider label {
4+
display: block;
5+
}
6+
7+
.rating-slider {
8+
color: #005a9c;
9+
user-select: none;
10+
}
11+
12+
.rating-slider svg {
13+
forced-color-adjust: auto;
14+
touch-action: pan-y;
15+
}
16+
17+
.rating-slider svg .focus-ring {
18+
fill: currentcolor;
19+
stroke-width: 0;
20+
fill-opacity: 0;
21+
}
22+
23+
.rating-slider svg .target {
24+
stroke-width: 2px;
25+
stroke: currentcolor;
26+
fill-opacity: 0;
27+
}
28+
29+
.rating-slider svg .label {
30+
font-size: 90%;
31+
font-family: sans-serif;
32+
fill: currentcolor;
33+
}
34+
35+
.rating-slider svg .description {
36+
font-size: 90%;
37+
fill: canvastext;
38+
}
39+
40+
.rating-slider svg .current .target {
41+
fill: currentcolor;
42+
fill-opacity: 1;
43+
}
44+
45+
.rating-slider svg .current .label {
46+
fill: white;
47+
font-weight: bold;
48+
}
49+
50+
/* focus styling */
51+
52+
.rating-slider:focus,
53+
.rating-slider:focus-visible {
54+
outline: none !important;
55+
}
56+
57+
.rating-slider svg .focus {
58+
stroke-width: 0;
59+
stroke: currentcolor;
60+
fill-opacity: 0;
61+
}
62+
63+
.rating-slider:focus svg .focus-ring {
64+
stroke-width: 2px;
65+
stroke: currentcolor;
66+
}
67+
68+
@media (forced-colors: active) {
69+
.rating-slider svg .focus-ring {
70+
fill: buttontext;
71+
}
72+
73+
.rating-slider svg .target {
74+
stroke: buttontext;
75+
}
76+
77+
.rating-slider svg .label {
78+
fill: buttontext;
79+
}
80+
81+
.rating-slider svg .description {
82+
fill: buttontext;
83+
}
84+
85+
.rating-slider svg .current .target {
86+
fill: buttontext;
87+
}
88+
89+
.rating-slider svg .current .label {
90+
fill: canvas;
91+
}
92+
93+
/* focus styling */
94+
95+
.rating-slider svg .focus {
96+
stroke: linktext;
97+
}
98+
99+
.rating-slider:focus svg .focus-ring {
100+
stroke: linktext;
101+
}
102+
}

‎tests/vertical-temperature-slider/reference/2025-7-15_112752/css/slider-seek.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* CSS Document */
2+
3+
.slider-seek .label {
4+
font-weight: bold;
5+
font-size: 125%;
6+
}
7+
8+
.slider-seek svg {
9+
forced-color-adjust: auto;
10+
}
11+
12+
.slider-seek text {
13+
font-weight: bold;
14+
fill: currentcolor;
15+
font-family: sans-serif;
16+
}
17+
18+
.slider-seek {
19+
margin-top: 1em;
20+
padding: 6px;
21+
color: black;
22+
}
23+
24+
.slider-slider .value {
25+
position: relative;
26+
top: 20px;
27+
height: 1.5em;
28+
font-size: 80%;
29+
}
30+
31+
.slider-seek .temp-value {
32+
padding-left: 24px;
33+
font-size: 200%;
34+
}
35+
36+
.slider-seek .rail {
37+
stroke: currentcolor;
38+
stroke-width: 2px;
39+
fill: currentcolor;
40+
fill-opacity: 0.25;
41+
}
42+
43+
.slider-seek .thumb {
44+
stroke-width: 0;
45+
fill: currentcolor;
46+
}
47+
48+
.slider-seek .focus-ring {
49+
stroke: currentcolor;
50+
stroke-opacity: 0;
51+
fill-opacity: 0;
52+
stroke-width: 3px;
53+
display: none;
54+
}
55+
56+
.slider-seek .slider-group {
57+
touch-action: pan-y;
58+
}
59+
60+
.slider-seek .slider-group .value {
61+
display: none;
62+
}
63+
64+
/* Focus and hover styling */
65+
66+
.slider-seek.focus [role="slider"] {
67+
color: #005a9c;
68+
}
69+
70+
.slider-seek [role="slider"]:focus {
71+
outline: none;
72+
}
73+
74+
.slider-seek [role="slider"]:focus .focus-ring {
75+
display: block;
76+
stroke-opacity: 1;
77+
}
78+
79+
.slider-seek [role="slider"]:focus .value {
80+
display: block;
81+
}

‎tests/vertical-temperature-slider/reference/2021-9-21_142211/css/slider-temperature.css‎ renamed to ‎tests/vertical-temperature-slider/reference/2025-7-15_112752/css/slider-temperature.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
.slider-temperature text,
2121
.slider-seek text {
2222
font-weight: bold;
23-
fill: currentColor;
23+
fill: currentcolor;
2424
font-family: sans-serif;
2525
}
2626

@@ -51,21 +51,21 @@
5151

5252
.slider-temperature .rail,
5353
.slider-seek .rail {
54-
stroke: currentColor;
54+
stroke: currentcolor;
5555
stroke-width: 2px;
56-
fill: currentColor;
57-
fill-opacity: 25%;
56+
fill: currentcolor;
57+
fill-opacity: 0.25;
5858
}
5959

6060
.slider-temperature .thumb,
6161
.slider-seek .thumb {
6262
stroke-width: 0;
63-
fill: currentColor;
63+
fill: currentcolor;
6464
}
6565

6666
.slider-temperature .focus-ring,
6767
.slider-seek .focus-ring {
68-
stroke: currentColor;
68+
stroke: currentcolor;
6969
stroke-opacity: 0;
7070
fill-opacity: 0;
7171
stroke-width: 3px;

‎tests/vertical-temperature-slider/reference/2025-7-15_112752/images/arrow-down-a.png‎

987 Bytes
Loading

‎tests/vertical-temperature-slider/reference/2025-7-15_112752/images/arrow-up-a.png‎

977 Bytes
Loading

0 commit comments

Comments
 (0)