Skip to content

Commit 23b38e4

Browse files
author
Michael Jordan
committed
fix(steplist): #215 [Accessibility] include interactive example w/ links
Fixes: - StepList only shows static examples. - Does not have example where current step receives keyboard focus :focus-within or .is-focused on a descendant link. - Tooltip will not display on focus.
1 parent 5803ea2 commit 23b38e4

4 files changed

Lines changed: 195 additions & 28 deletions

File tree

‎components/steplist/index.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,9 @@ governing permissions and limitations under the License.
129129
/* Selected state */
130130
&.is-selected {
131131
/* Focus */
132-
&:focus {
132+
&:focus,
133+
&.is-focused,
134+
*:focus {
133135
outline: none;
134136
}
135137
.spectrum-Steplist-marker {

‎components/steplist/metadata.yml‎

Lines changed: 169 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,73 +4,156 @@ examples:
44
name: Standard
55
description: A basic steplist.
66
markup: |
7-
<div class="spectrum-Steplist spectrum-Steplist--small">
8-
<div class="spectrum-Steplist-item is-complete">
7+
<h3 class="spectrum-Heading spectrum-Heading--subtitle2">Static variant</h3>
8+
<div class="spectrum-Steplist spectrum-Steplist--small" role="list">
9+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4" aria-label="Step 1">
910
<span class="spectrum-Steplist-markerContainer">
1011
<span class="spectrum-Steplist-marker"></span>
1112
</span>
1213
<span class="spectrum-Steplist-segment">
1314
</span>
1415
</div>
15-
<div class="spectrum-Steplist-item is-complete">
16+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4" aria-label="Step 2">
1617
<span class="spectrum-Steplist-markerContainer">
1718
<span class="spectrum-Steplist-marker"></span>
1819
</span>
1920
<span class="spectrum-Steplist-segment"></span>
2021
</div>
21-
<div class="spectrum-Steplist-item is-selected">
22+
<div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4" aria-current="step" aria-label="Step 3">
2223
<span class="spectrum-Steplist-markerContainer">
2324
<span class="spectrum-Steplist-marker"></span>
2425
</span>
2526
<span class="spectrum-Steplist-segment"></span>
2627
</div>
27-
<div class="spectrum-Steplist-item">
28+
<div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4" aria-label="Step 4">
2829
<span class="spectrum-Steplist-markerContainer">
2930
<span class="spectrum-Steplist-marker"></span>
3031
</span>
3132
<span class="spectrum-Steplist-segment"></span>
3233
</div>
3334
</div>
35+
36+
<h3 class="spectrum-Heading spectrum-Heading--subtitle2">Interactive variant</h3>
37+
<div class="spectrum-Steplist spectrum-Steplist--small spectrum-Steplist--interactive" role="list">
38+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
39+
<a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1" aria-label="Step 1">
40+
<span class="spectrum-Steplist-markerContainer">
41+
<span class="spectrum-Steplist-marker"></span>
42+
</span>
43+
</a>
44+
<span class="spectrum-Steplist-segment">
45+
</span>
46+
</div>
47+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
48+
<a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1" aria-label="Step 2">
49+
<span class="spectrum-Steplist-markerContainer">
50+
<span class="spectrum-Steplist-marker"></span>
51+
</span>
52+
</a>
53+
<span class="spectrum-Steplist-segment"></span>
54+
</div>
55+
<div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4">
56+
<a class="spectrum-Steplist-link is-selected" role="link" tabindex="0" aria-current="step" aria-label="Step 3">
57+
<span class="spectrum-Steplist-markerContainer">
58+
<span class="spectrum-Steplist-marker"></span>
59+
</span>
60+
</a>
61+
<span class="spectrum-Steplist-segment"></span>
62+
</div>
63+
<div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4">
64+
<a class="spectrum-Steplist-link" role="link" tabindex="-1" aria-label="Step 4">
65+
<span class="spectrum-Steplist-markerContainer">
66+
<span class="spectrum-Steplist-marker"></span>
67+
</span>
68+
</a>
69+
<span class="spectrum-Steplist-segment"></span>
70+
</div>
71+
</div>
3472
- id: steplist-current
3573
name: With label
3674
description: A steplist with labels.
3775
markup: |
38-
<div class="spectrum-Steplist">
39-
<div class="spectrum-Steplist-item is-complete">
76+
<h3 class="spectrum-Heading spectrum-Heading--subtitle2">Static variant</h3>
77+
78+
<div class="spectrum-Steplist" role="list">
79+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
4080
<span class="spectrum-Steplist-label">Step 1</span>
4181
<span class="spectrum-Steplist-markerContainer">
4282
<span class="spectrum-Steplist-marker"></span>
4383
</span>
4484
<span class="spectrum-Steplist-segment"></span>
4585
</div>
46-
<div class="spectrum-Steplist-item is-complete">
86+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
4787
<span class="spectrum-Steplist-label">Step 2</span>
4888
<span class="spectrum-Steplist-markerContainer">
4989
<span class="spectrum-Steplist-marker"></span>
5090
</span>
5191
<span class="spectrum-Steplist-segment"></span>
5292
</div>
53-
<div class="spectrum-Steplist-item is-selected">
93+
<div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4" aria-current="step">
5494
<span class="spectrum-Steplist-label">Step 3</span>
5595
<span class="spectrum-Steplist-markerContainer">
5696
<span class="spectrum-Steplist-marker"></span>
5797
</span>
5898
<span class="spectrum-Steplist-segment"></span>
5999
</div>
60-
<div class="spectrum-Steplist-item">
100+
<div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4">
61101
<span class="spectrum-Steplist-label">Step 4</span>
62102
<span class="spectrum-Steplist-markerContainer">
63103
<span class="spectrum-Steplist-marker"></span>
64104
</span>
65105
<span class="spectrum-Steplist-segment"></span>
66106
</div>
67107
</div>
108+
109+
<h3 class="spectrum-Heading spectrum-Heading--subtitle2">Interactive variant</h3>
110+
111+
<div class="spectrum-Steplist spectrum-Steplist--interactive" role="list">
112+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
113+
<a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
114+
<span class="spectrum-Steplist-label">Step 1</span>
115+
<span class="spectrum-Steplist-markerContainer">
116+
<span class="spectrum-Steplist-marker"></span>
117+
</span>
118+
</a>
119+
<span class="spectrum-Steplist-segment"></span>
120+
</div>
121+
<div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
122+
<a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
123+
<span class="spectrum-Steplist-label">Step 2</span>
124+
<span class="spectrum-Steplist-markerContainer">
125+
<span class="spectrum-Steplist-marker"></span>
126+
</span>
127+
</a>
128+
<span class="spectrum-Steplist-segment"></span>
129+
</div>
130+
<div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4">
131+
<a class="spectrum-Steplist-link is-selected" role="link" tabindex="0" aria-current="step">
132+
<span class="spectrum-Steplist-label">Step 3</span>
133+
<span class="spectrum-Steplist-markerContainer">
134+
<span class="spectrum-Steplist-marker"></span>
135+
</span>
136+
</a>
137+
<span class="spectrum-Steplist-segment"></span>
138+
</div>
139+
<div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4">
140+
<a class="spectrum-Steplist-link" role="link" tabindex="-1">
141+
<span class="spectrum-Steplist-label">Step 4</span>
142+
<span class="spectrum-Steplist-markerContainer">
143+
<span class="spectrum-Steplist-marker"></span>
144+
</span>
145+
</a>
146+
<span class="spectrum-Steplist-segment"></span>
147+
</div>
148+
</div>
68149
- id: steplist-current
69150
name: With tooltip
70151
description: A steplist with tooltips.
71152
markup: |
72-
<div class="spectrum-Steplist">
73-
<div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete">
153+
<h3 class="spectrum-Heading spectrum-Heading--subtitle2">Static variant</h3>
154+
155+
<div class="spectrum-Steplist" role="list">
156+
<div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
74157
<div class="spectrum-Steplist-markerContainer">
75158
<div class="spectrum-Tooltip spectrum-Tooltip--top">
76159
<span class="spectrum-Tooltip-label">Step 1</span>
@@ -83,7 +166,7 @@ examples:
83166
<span class="spectrum-Steplist-segment">
84167
</span>
85168
</div>
86-
<div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete">
169+
<div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
87170
<div class="spectrum-Steplist-markerContainer">
88171
<div class="spectrum-Tooltip spectrum-Tooltip--top">
89172
<span class="spectrum-Tooltip-label">Step 2</span>
@@ -96,7 +179,7 @@ examples:
96179
<span class="spectrum-Steplist-segment">
97180
</span>
98181
</div>
99-
<div class="spectrum-Steplist-item u-tooltip-showOnHover">
182+
<div class="spectrum-Steplist-item is-selected u-tooltip-showOnHover" role="listitem" aria-posinset="3" aria-setsize="4" aria-current="step">
100183
<div class="spectrum-Steplist-markerContainer">
101184
<div class="spectrum-Tooltip spectrum-Tooltip--top">
102185
<span class="spectrum-Tooltip-label">Step 3</span>
@@ -109,15 +192,80 @@ examples:
109192
<span class="spectrum-Steplist-segment">
110193
</span>
111194
</div>
112-
<div class="spectrum-Steplist-item u-tooltip-showOnHover">
113-
<div class="spectrum-Steplist-markerContainer">
114-
<div class="spectrum-Tooltip spectrum-Tooltip--top">
195+
<div class="spectrum-Steplist-item u-tooltip-showOnHover" role="listitem" aria-posinset="4" aria-setsize="4">
196+
<span class="spectrum-Steplist-markerContainer">
197+
<span class="spectrum-Tooltip spectrum-Tooltip--top">
115198
<span class="spectrum-Tooltip-label">Step 4</span>
116199
<span class="spectrum-Tooltip-tip"></span>
117-
</div>
118-
<div class="spectrum-Steplist-marker">
119-
</div>
120-
</div>
200+
</span>
201+
<span class="spectrum-Steplist-marker">
202+
</span>
203+
</span>
204+
205+
<span class="spectrum-Steplist-segment">
206+
</span>
207+
</div>
208+
</div>
209+
210+
<h3 class="spectrum-Heading spectrum-Heading--subtitle2">Interactive variant</h3>
211+
212+
<div class="spectrum-Steplist spectrum-Steplist--interactive" role="list">
213+
<div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
214+
<a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
215+
<span class="spectrum-Steplist-markerContainer">
216+
<span class="spectrum-Tooltip spectrum-Tooltip--top">
217+
<span class="spectrum-Tooltip-label">Step 1</span>
218+
<span class="spectrum-Tooltip-tip"></span>
219+
</span>
220+
<span class="spectrum-Steplist-marker">
221+
</span>
222+
</span>
223+
</a>
224+
225+
<span class="spectrum-Steplist-segment">
226+
</span>
227+
</div>
228+
<div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
229+
<a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
230+
<span class="spectrum-Steplist-markerContainer">
231+
<span class="spectrum-Tooltip spectrum-Tooltip--top">
232+
<span class="spectrum-Tooltip-label">Step 2</span>
233+
<span class="spectrum-Tooltip-tip"></span>
234+
</span>
235+
<span class="spectrum-Steplist-marker">
236+
</span>
237+
</span>
238+
</a>
239+
240+
<span class="spectrum-Steplist-segment">
241+
</span>
242+
</div>
243+
<div class="spectrum-Steplist-item is-selected u-tooltip-showOnHover" role="listitem" aria-posinset="3" aria-setsize="4">
244+
<a class="spectrum-Steplist-link is-selected" role="link" tabindex="0" aria-current="step">
245+
<span class="spectrum-Steplist-markerContainer">
246+
<span class="spectrum-Tooltip spectrum-Tooltip--top">
247+
<span class="spectrum-Tooltip-label">Step 3</span>
248+
<span class="spectrum-Tooltip-tip"></span>
249+
</span>
250+
<span class="spectrum-Steplist-marker">
251+
</span>
252+
</span>
253+
</a>
254+
255+
<span class="spectrum-Steplist-segment">
256+
</span>
257+
</div>
258+
<div class="spectrum-Steplist-item u-tooltip-showOnHover" role="listitem" aria-posinset="4" aria-setsize="4">
259+
<a class="spectrum-Steplist-link" role="link" tabindex="-1">
260+
<span class="spectrum-Steplist-markerContainer">
261+
<span class="spectrum-Tooltip spectrum-Tooltip--top">
262+
<span class="spectrum-Tooltip-label">Step 4</span>
263+
<span class="spectrum-Tooltip-tip"></span>
264+
</span>
265+
<span class="spectrum-Steplist-marker">
266+
</span>
267+
</span>
268+
</a>
121269
122270
<span class="spectrum-Steplist-segment">
123271
</span>

‎components/steplist/skin.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ governing permissions and limitations under the License.
5959
&.spectrum-Steplist--interactive {
6060
.spectrum-Steplist-item {
6161
/* Step Focused */
62-
&:focus {
62+
&:focus,
63+
&.is-focused,
64+
*:focus {
6365
.spectrum-Steplist-marker {
6466
background-color: var(--spectrum-steplist-current-marker-color-key-focus)
6567
}

‎components/tooltip/index.css‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -206,23 +206,38 @@ governing permissions and limitations under the License.
206206
transform: translate(-50%, var(--spectrum-tooltip-tip-margin));
207207
}
208208

209-
&:hover .spectrum-Tooltip {
209+
&:hover .spectrum-Tooltip,
210+
&:focus .spectrum-Tooltip,
211+
&.is-focused .spectrum-Tooltip,
212+
*:focus .spectrum-Tooltip {
210213
opacity: 1;
211214
}
212215

213-
&:hover .spectrum-Tooltip.spectrum-Tooltip--bottom {
216+
&:hover .spectrum-Tooltip.spectrum-Tooltip--bottom,
217+
&:focus .spectrum-Tooltip.spectrum-Tooltip--bottom,
218+
&.is-focused .spectrum-Tooltip.spectrum-Tooltip--bottom,
219+
*:focus .spectrum-Tooltip.spectrum-Tooltip--bottom {
214220
transform: translate(-50%, 0);
215221
}
216222

217-
&:hover .spectrum-Tooltip.spectrum-Tooltip--top {
223+
&:hover .spectrum-Tooltip.spectrum-Tooltip--top,
224+
&:focus .spectrum-Tooltip.spectrum-Tooltip--top,
225+
&.is-focused .spectrum-Tooltip.spectrum-Tooltip--top,
226+
*:focus .spectrum-Tooltip.spectrum-Tooltip--top {
218227
transform: translate(-50%, calc(-1 * var(--spectrum-tooltip-tip-margin)));
219228
}
220229

221-
&:hover .spectrum-Tooltip.spectrum-Tooltip--left {
230+
&:hover .spectrum-Tooltip.spectrum-Tooltip--left,
231+
&:focus .spectrum-Tooltip.spectrum-Tooltip--left,
232+
&.is-focused .spectrum-Tooltip.spectrum-Tooltip--left,
233+
*:focus .spectrum-Tooltip.spectrum-Tooltip--left {
222234
transform: translate(calc(-100% - var(--spectrum-tooltip-tip-margin)), -50%);
223235
}
224236

225-
&:hover .spectrum-Tooltip.spectrum-Tooltip--right {
237+
&:hover .spectrum-Tooltip.spectrum-Tooltip--right,
238+
&:focus .spectrum-Tooltip.spectrum-Tooltip--right,
239+
&.is-focused .spectrum-Tooltip.spectrum-Tooltip--right,
240+
*:focus .spectrum-Tooltip.spectrum-Tooltip--right {
226241
transform: translate(var(--spectrum-tooltip-tip-margin), -50%);
227242
}
228243
}

0 commit comments

Comments
 (0)