Skip to content

Commit b951f41

Browse files
interactivellamainteractivellama
authored
Merge pull request #2322 from kevinparkerson/button-group-checkbox-a11y-update
ButtonGroup: Checkbox not reading "this field is required
2 parents f33e09c + ec0609c commit b951f41

File tree

23 files changed

+119
-41
lines changed

23 files changed

+119
-41
lines changed

‎components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,7 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = `
268268
>
269269
<div
270270
className="slds-button-group"
271+
id="button-group-canvas-actions"
271272
role="group"
272273
>
273274
<button
@@ -318,6 +319,7 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = `
318319
>
319320
<div
320321
className="slds-button-group"
322+
id="button-group-edit-actions"
321323
role="group"
322324
>
323325
<button
@@ -1386,6 +1388,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Toolbar 1`] = `
13861388
>
13871389
<div
13881390
className="slds-button-group"
1391+
id="button-group-canvas-actions"
13891392
role="group"
13901393
>
13911394
<button
@@ -1436,6 +1439,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Toolbar 1`] = `
14361439
>
14371440
<div
14381441
className="slds-button-group"
1442+
id="button-group-edit-actions"
14391443
role="group"
14401444
>
14411445
<button
@@ -1813,6 +1817,7 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = `
18131817
>
18141818
<div
18151819
className="slds-button-group"
1820+
id="button-group-canvas-actions"
18161821
role="group"
18171822
>
18181823
<button
@@ -1863,6 +1868,7 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = `
18631868
>
18641869
<div
18651870
className="slds-button-group"
1871+
id="button-group-edit-actions"
18661872
role="group"
18671873
>
18681874
<button
@@ -2293,6 +2299,7 @@ exports[`DOM snapshots SLDSBuilderHeader Successful Save 1`] = `
22932299
>
22942300
<div
22952301
className="slds-button-group"
2302+
id="button-group-canvas-actions"
22962303
role="group"
22972304
>
22982305
<button
@@ -2343,6 +2350,7 @@ exports[`DOM snapshots SLDSBuilderHeader Successful Save 1`] = `
23432350
>
23442351
<div
23452352
className="slds-button-group"
2353+
id="button-group-edit-actions"
23462354
role="group"
23472355
>
23482356
<button

‎components/builder-header/__examples__/after-successful-save.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const Example = (props) => (
7070
</div>
7171
)}
7272
>
73-
<ButtonGroup label="Canvas Actions">
73+
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
7474
<Button
7575
assistiveText={{ icon: 'Undo' }}
7676
iconCategory="utility"
@@ -86,7 +86,7 @@ const Example = (props) => (
8686
variant="icon"
8787
/>
8888
</ButtonGroup>
89-
<ButtonGroup label="Edit Actions">
89+
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
9090
<Button
9191
assistiveText={{ icon: 'Cut' }}
9292
iconCategory="utility"

‎components/builder-header/__examples__/base-with-toolbar.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const Example = (props) => (
6060
</div>
6161
)}
6262
>
63-
<ButtonGroup label="Canvas Actions">
63+
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
6464
<Button
6565
assistiveText={{ icon: 'Undo' }}
6666
iconCategory="utility"
@@ -76,7 +76,7 @@ const Example = (props) => (
7676
variant="icon"
7777
/>
7878
</ButtonGroup>
79-
<ButtonGroup label="Edit Actions">
79+
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
8080
<Button
8181
assistiveText={{ icon: 'Cut' }}
8282
iconCategory="utility"

‎components/builder-header/__examples__/failed-save.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const Example = (props) => (
102102
</div>
103103
)}
104104
>
105-
<ButtonGroup label="Canvas Actions">
105+
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
106106
<Button
107107
assistiveText={{ icon: 'Undo' }}
108108
iconCategory="utility"
@@ -118,7 +118,7 @@ const Example = (props) => (
118118
variant="icon"
119119
/>
120120
</ButtonGroup>
121-
<ButtonGroup label="Edit Actions">
121+
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
122122
<Button
123123
assistiveText={{ icon: 'Cut' }}
124124
iconCategory="utility"

‎components/builder-header/__examples__/successful-save.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const Example = (props) => (
7171
</div>
7272
)}
7373
>
74-
<ButtonGroup label="Canvas Actions">
74+
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
7575
<Button
7676
assistiveText={{ icon: 'Undo' }}
7777
iconCategory="utility"
@@ -87,7 +87,7 @@ const Example = (props) => (
8787
variant="icon"
8888
/>
8989
</ButtonGroup>
90-
<ButtonGroup label="Edit Actions">
90+
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
9191
<Button
9292
assistiveText={{ icon: 'Cut' }}
9393
iconCategory="utility"

‎components/button-group/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox 1`] = `
1717
>
1818
<div
1919
className="slds-checkbox_button-group"
20+
id="button-group-checkbox"
2021
>
2122
<span
2223
className="slds-button slds-checkbox_button"
@@ -136,11 +137,13 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
136137
>
137138
<div
138139
className="slds-checkbox_button-group"
140+
id="button-group-checkbox-error"
139141
>
140142
<span
141143
className="slds-button slds-checkbox_button"
142144
>
143145
<input
146+
aria-describedby="button-group-error-button-group-checkbox-error"
144147
id="ButtonGroupExampleMon"
145148
onChange={[Function]}
146149
type="checkbox"
@@ -160,6 +163,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
160163
className="slds-button slds-checkbox_button"
161164
>
162165
<input
166+
aria-describedby="button-group-error-button-group-checkbox-error"
163167
id="ButtonGroupExampleTue"
164168
onChange={[Function]}
165169
type="checkbox"
@@ -179,6 +183,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
179183
className="slds-button slds-checkbox_button"
180184
>
181185
<input
186+
aria-describedby="button-group-error-button-group-checkbox-error"
182187
id="ButtonGroupExampleWed"
183188
onChange={[Function]}
184189
type="checkbox"
@@ -198,6 +203,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
198203
className="slds-button slds-checkbox_button"
199204
>
200205
<input
206+
aria-describedby="button-group-error-button-group-checkbox-error"
201207
id="ButtonGroupExampleThu"
202208
onChange={[Function]}
203209
type="checkbox"
@@ -217,6 +223,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
217223
className="slds-button slds-checkbox_button"
218224
>
219225
<input
226+
aria-describedby="button-group-error-button-group-checkbox-error"
220227
id="ButtonGroupExampleFri"
221228
onChange={[Function]}
222229
type="checkbox"
@@ -235,6 +242,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
235242
</div>
236243
<div
237244
className="slds-form-element__help"
245+
id="button-group-error-button-group-checkbox-error"
238246
>
239247
This field is required
240248
</div>
@@ -249,6 +257,7 @@ exports[`DOM snapshots SLDSButtonGroup Icon Group 1`] = `
249257
>
250258
<div
251259
className="slds-button-group"
260+
id="button-group-icon-group-1"
252261
role="group"
253262
>
254263
<button
@@ -354,6 +363,7 @@ exports[`DOM snapshots SLDSButtonGroup Icon Group 1`] = `
354363
>
355364
<div
356365
className="slds-button-group"
366+
id="button-group-icon-group-2"
357367
role="group"
358368
>
359369
<button
@@ -455,6 +465,7 @@ exports[`DOM snapshots SLDSButtonGroup List Variant 1`] = `
455465
>
456466
<ul
457467
className="slds-button-group-list"
468+
id="button-group-list-1"
458469
>
459470
<li>
460471
<button
@@ -529,6 +540,7 @@ exports[`DOM snapshots SLDSButtonGroup List Variant 1`] = `
529540
>
530541
<ul
531542
className="slds-button-group-list"
543+
id="button-group-list-2"
532544
>
533545
<li>
534546
<button
@@ -599,6 +611,7 @@ exports[`DOM snapshots SLDSButtonGroup More Icon 1`] = `
599611
>
600612
<div
601613
className="slds-button-group"
614+
id="button-group-more-icon"
602615
role="group"
603616
>
604617
<button

‎components/button-group/__examples__/checkbox-error.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ class Example extends React.Component {
1313
error: 'This field is required',
1414
label: 'Scheduled Day(s)',
1515
}}
16+
id="button-group-checkbox-error"
1617
variant="checkbox"
1718
>
18-
<Checkbox id="ButtonGroupExampleMon" label="Mon" />
19-
<Checkbox id="ButtonGroupExampleTue" label="Tue" />
20-
<Checkbox id="ButtonGroupExampleWed" label="Wed" />
21-
<Checkbox id="ButtonGroupExampleThu" label="Thu" />
22-
<Checkbox id="ButtonGroupExampleFri" label="Fri" />
19+
<Checkbox id="ButtonGroupExampleMon" labels={{ label: 'Mon' }} />
20+
<Checkbox id="ButtonGroupExampleTue" labels={{ label: 'Tue' }} />
21+
<Checkbox id="ButtonGroupExampleWed" labels={{ label: 'Wed' }} />
22+
<Checkbox id="ButtonGroupExampleThu" labels={{ label: 'Thu' }} />
23+
<Checkbox id="ButtonGroupExampleFri" labels={{ label: 'Fri' }} />
2324
</ButtonGroup>
2425
);
2526
}

‎components/button-group/__examples__/checkbox.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ class Example extends React.Component {
1212
labels={{
1313
label: 'Scheduled Day(s)',
1414
}}
15+
id="button-group-checkbox"
1516
variant="checkbox"
1617
>
17-
<Checkbox id="ButtonGroupExampleMon" label="Mon" />
18-
<Checkbox id="ButtonGroupExampleTue" label="Tue" />
19-
<Checkbox id="ButtonGroupExampleWed" label="Wed" />
20-
<Checkbox id="ButtonGroupExampleThu" label="Thu" />
21-
<Checkbox id="ButtonGroupExampleFri" label="Fri" />
18+
<Checkbox id="ButtonGroupExampleMon" labels={{ label: 'Mon' }} />
19+
<Checkbox id="ButtonGroupExampleTue" labels={{ label: 'Tue' }} />
20+
<Checkbox id="ButtonGroupExampleWed" labels={{ label: 'Wed' }} />
21+
<Checkbox id="ButtonGroupExampleThu" labels={{ label: 'Thu' }} />
22+
<Checkbox id="ButtonGroupExampleFri" labels={{ label: 'Fri' }} />
2223
</ButtonGroup>
2324
);
2425
}

‎components/button-group/__examples__/icon-group.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Example extends React.Component {
1111
render() {
1212
return (
1313
<IconSettings iconPath="/assets/icons">
14-
<ButtonGroup>
14+
<ButtonGroup id="button-group-icon-group-1">
1515
<ButtonStateful
1616
assistiveText={{ icon: 'Show Chart' }}
1717
buttonVariant="icon"
@@ -46,7 +46,10 @@ class Example extends React.Component {
4646
</ButtonGroup>
4747
<br />
4848
<br />
49-
<ButtonGroup labels={{ label: 'Actions' }}>
49+
<ButtonGroup
50+
id="button-group-icon-group-2"
51+
labels={{ label: 'Actions' }}
52+
>
5053
<ButtonStateful
5154
assistiveText={{ icon: 'Show Chart' }}
5255
buttonVariant="icon"

‎components/button-group/__examples__/list-variant.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Example extends React.Component {
1111
render() {
1212
return (
1313
<IconSettings iconPath="/assets/icons">
14-
<ButtonGroup variant="list">
14+
<ButtonGroup id="button-group-list-1" variant="list">
1515
<Button id="refresh-button-1" label="Refresh" />
1616
<Button label="Edit" id="edit-button-1" />
1717
<Dropdown
@@ -33,6 +33,7 @@ class Example extends React.Component {
3333
<br />
3434
<ButtonGroup
3535
classNameContainer="custom-container-class"
36+
id="button-group-list-2"
3637
labels={{ label: 'Actions' }}
3738
variant="list"
3839
>

‎components/button-group/__examples__/more-icon.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Example extends React.Component {
1111
render() {
1212
return (
1313
<IconSettings iconPath="/assets/icons">
14-
<ButtonGroup>
14+
<ButtonGroup id="button-group-more-icon">
1515
<Button label="Refresh" />
1616
<Button label="Edit" />
1717
<Button label="Save" />

0 commit comments

Comments
 (0)