Skip to content

Commit 1ae1397

Browse files
interactivellamainteractivellama
authored
Merge pull request #2333 from kevinparkerson/progress-indicator-a11y-fixes
Progress Indicator now reads "Disabled" for disabled steps
2 parents bc73535 + ca3efe0 commit 1ae1397

File tree

3 files changed

+137
-45
lines changed

3 files changed

+137
-45
lines changed

‎components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 118 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
7373
<span
7474
className="slds-assistive-text"
7575
>
76-
Step 2: tooltip label #2
76+
Step 2:
77+
tooltip label #2
78+
7779
</span>
7880
</button>
7981
<span />
@@ -91,18 +93,28 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
9193
}
9294
>
9395
<a
94-
className="slds-button slds-progress__marker"
96+
aria-disabled={true}
97+
className="slds-button slds-progress__marker slds-is-disabled"
9598
onBlur={[Function]}
9699
onFocus={[Function]}
97100
onMouseEnter={[Function]}
98101
onMouseLeave={[Function]}
99102
role="button"
103+
style={
104+
Object {
105+
"cursor": "not-allowed",
106+
}
107+
}
100108
tabIndex={0}
101109
>
102110
<span
103111
className="slds-assistive-text"
104112
>
105-
Step 3: [object Object] - Disabled
113+
Step 3:
114+
<strong>
115+
tooltip label #3
116+
</strong>
117+
- Disabled
106118
</span>
107119
</a>
108120
<span />
@@ -120,18 +132,26 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
120132
}
121133
>
122134
<a
123-
className="slds-button slds-progress__marker"
135+
aria-disabled={true}
136+
className="slds-button slds-progress__marker slds-is-disabled"
124137
onBlur={[Function]}
125138
onFocus={[Function]}
126139
onMouseEnter={[Function]}
127140
onMouseLeave={[Function]}
128141
role="button"
142+
style={
143+
Object {
144+
"cursor": "not-allowed",
145+
}
146+
}
129147
tabIndex={0}
130148
>
131149
<span
132150
className="slds-assistive-text"
133151
>
134-
Step 4: tooltip label #4 - Disabled
152+
Step 4:
153+
tooltip label #4
154+
- Disabled
135155
</span>
136156
</a>
137157
<span />
@@ -149,18 +169,26 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
149169
}
150170
>
151171
<a
152-
className="slds-button slds-progress__marker"
172+
aria-disabled={true}
173+
className="slds-button slds-progress__marker slds-is-disabled"
153174
onBlur={[Function]}
154175
onFocus={[Function]}
155176
onMouseEnter={[Function]}
156177
onMouseLeave={[Function]}
157178
role="button"
179+
style={
180+
Object {
181+
"cursor": "not-allowed",
182+
}
183+
}
158184
tabIndex={0}
159185
>
160186
<span
161187
className="slds-assistive-text"
162188
>
163-
Step 5: tooltip label #5 - Disabled
189+
Step 5:
190+
tooltip label #5
191+
- Disabled
164192
</span>
165193
</a>
166194
<span />
@@ -282,7 +310,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
282310
<span
283311
className="slds-assistive-text"
284312
>
285-
Step 2: tooltip label #2 - Completed
313+
Step 2:
314+
tooltip label #2
315+
- Completed
286316
</span>
287317
</button>
288318
<span />
@@ -312,7 +342,11 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
312342
<span
313343
className="slds-assistive-text"
314344
>
315-
Step 3: [object Object]
345+
Step 3:
346+
<strong>
347+
tooltip label #3
348+
</strong>
349+
316350
</span>
317351
</button>
318352
<span />
@@ -330,18 +364,26 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
330364
}
331365
>
332366
<a
333-
className="slds-button slds-progress__marker"
367+
aria-disabled={true}
368+
className="slds-button slds-progress__marker slds-is-disabled"
334369
onBlur={[Function]}
335370
onFocus={[Function]}
336371
onMouseEnter={[Function]}
337372
onMouseLeave={[Function]}
338373
role="button"
374+
style={
375+
Object {
376+
"cursor": "not-allowed",
377+
}
378+
}
339379
tabIndex={0}
340380
>
341381
<span
342382
className="slds-assistive-text"
343383
>
344-
Step 4: tooltip label #4 - Disabled
384+
Step 4:
385+
tooltip label #4
386+
- Disabled
345387
</span>
346388
</a>
347389
<span />
@@ -359,18 +401,26 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
359401
}
360402
>
361403
<a
362-
className="slds-button slds-progress__marker"
404+
aria-disabled={true}
405+
className="slds-button slds-progress__marker slds-is-disabled"
363406
onBlur={[Function]}
364407
onFocus={[Function]}
365408
onMouseEnter={[Function]}
366409
onMouseLeave={[Function]}
367410
role="button"
411+
style={
412+
Object {
413+
"cursor": "not-allowed",
414+
}
415+
}
368416
tabIndex={0}
369417
>
370418
<span
371419
className="slds-assistive-text"
372420
>
373-
Step 5: tooltip label #5 - Disabled
421+
Step 5:
422+
tooltip label #5
423+
- Disabled
374424
</span>
375425
</a>
376426
<span />
@@ -454,7 +504,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
454504
<span
455505
className="slds-assistive-text"
456506
>
457-
Step 1: tooltip label #1 - Completed
507+
Step 1:
508+
tooltip label #1
509+
- Completed
458510
</span>
459511
</button>
460512
<span />
@@ -492,7 +544,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
492544
<span
493545
className="slds-assistive-text"
494546
>
495-
Step 2: tooltip label #2 - Completed
547+
Step 2:
548+
tooltip label #2
549+
- Completed
496550
</span>
497551
</button>
498552
<span />
@@ -530,7 +584,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
530584
<span
531585
className="slds-assistive-text"
532586
>
533-
Step 3: tooltip label #3 - Completed
587+
Step 3:
588+
tooltip label #3
589+
- Completed
534590
</span>
535591
</button>
536592
<span />
@@ -568,7 +624,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
568624
<span
569625
className="slds-assistive-text"
570626
>
571-
Step 4: tooltip label #4 - Completed
627+
Step 4:
628+
tooltip label #4
629+
- Completed
572630
</span>
573631
</button>
574632
<span />
@@ -598,7 +656,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
598656
<span
599657
className="slds-assistive-text"
600658
>
601-
Step 5: tooltip label #5
659+
Step 5:
660+
tooltip label #5
661+
602662
</span>
603663
</button>
604664
<span />
@@ -628,7 +688,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
628688
<span
629689
className="slds-assistive-text"
630690
>
631-
Step 6: tooltip label #6
691+
Step 6:
692+
tooltip label #6
693+
632694
</span>
633695
</button>
634696
<span />
@@ -658,7 +720,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
658720
<span
659721
className="slds-assistive-text"
660722
>
661-
Step 7: tooltip label #7
723+
Step 7:
724+
tooltip label #7
725+
662726
</span>
663727
</button>
664728
<span />
@@ -688,7 +752,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
688752
<span
689753
className="slds-assistive-text"
690754
>
691-
Step 8: tooltip label #8
755+
Step 8:
756+
tooltip label #8
757+
692758
</span>
693759
</button>
694760
<span />
@@ -718,7 +784,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
718784
<span
719785
className="slds-assistive-text"
720786
>
721-
Step 9: tooltip label #9
787+
Step 9:
788+
tooltip label #9
789+
722790
</span>
723791
</button>
724792
<span />
@@ -840,7 +908,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
840908
<span
841909
className="slds-assistive-text"
842910
>
843-
Step 2: tooltip label #2 - Finished this step.
911+
Step 2:
912+
tooltip label #2
913+
- Finished this step.
844914
</span>
845915
</button>
846916
<span />
@@ -878,7 +948,11 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
878948
<span
879949
className="slds-assistive-text"
880950
>
881-
Step 3: [object Object] - Finished this step.
951+
Step 3:
952+
<strong>
953+
tooltip label #3
954+
</strong>
955+
- Finished this step.
882956
</span>
883957
</button>
884958
<span />
@@ -908,7 +982,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
908982
<span
909983
className="slds-assistive-text"
910984
>
911-
Step 4: tooltip label #4
985+
Step 4:
986+
tooltip label #4
987+
912988
</span>
913989
</button>
914990
<span />
@@ -938,7 +1014,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
9381014
<span
9391015
className="slds-assistive-text"
9401016
>
941-
Step 5: tooltip label #5
1017+
Step 5:
1018+
tooltip label #5
1019+
9421020
</span>
9431021
</button>
9441022
<span />
@@ -1305,7 +1383,9 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
13051383
<span
13061384
className="slds-assistive-text"
13071385
>
1308-
Step 2: tooltip label #2 - Error
1386+
Step 2:
1387+
tooltip label #2
1388+
- Error
13091389
</span>
13101390
</button>
13111391
<span />
@@ -1335,7 +1415,11 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
13351415
<span
13361416
className="slds-assistive-text"
13371417
>
1338-
Step 3: [object Object]
1418+
Step 3:
1419+
<strong>
1420+
tooltip label #3
1421+
</strong>
1422+
13391423
</span>
13401424
</button>
13411425
<span />
@@ -1365,7 +1449,9 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
13651449
<span
13661450
className="slds-assistive-text"
13671451
>
1368-
Step 4: tooltip label #4
1452+
Step 4:
1453+
tooltip label #4
1454+
13691455
</span>
13701456
</button>
13711457
<span />
@@ -1395,7 +1481,9 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
13951481
<span
13961482
className="slds-assistive-text"
13971483
>
1398-
Step 5: tooltip label #5
1484+
Step 5:
1485+
tooltip label #5
1486+
13991487
</span>
14001488
</button>
14011489
<span />

‎components/progress-indicator/__docs__/storybook-stories.jsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,6 @@ const steps = [
2323
{ id: 4, label: 'tooltip label #5' },
2424
];
2525

26-
const stepsDisabled = [
27-
{ id: 3, label: 'tooltip label #4' },
28-
{ id: 4, label: 'tooltip label #5' },
29-
];
30-
3126
const manySteps = [
3227
{ id: 'a', label: 'tooltip label #1' },
3328
{ id: 'b', label: 'tooltip label #2' },
@@ -81,7 +76,7 @@ storiesOf(PROGRESS_INDICATOR, module)
8176
.add('Base With Disabled Steps', () => (
8277
<ExampleProgressIndicator
8378
steps={steps}
84-
disabledSteps={stepsDisabled}
79+
disabledSteps={[steps[3], steps[4]]}
8580
selectedStep={steps[2]}
8681
completedSteps={steps.slice(0, 2)}
8782
/>

0 commit comments

Comments
 (0)