Skip to content

Commit cd413f4

Browse files
interactivellamainteractivellama
authored
Merge pull request #2359 from kevinparkerson/even-moar-a11y-audit-fixes
Accessibility audit fixes for Combobox, DataTable, Expression, Map, and Dropdown
2 parents 3ded130 + 06aa4b9 commit cd413f4

22 files changed

+201
-114
lines changed

‎components/combobox/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3057,9 +3057,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
30573057
role="presentation"
30583058
>
30593059
<div
3060-
aria-selected="false"
3060+
aria-selected={false}
30613061
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
3062-
id="options-search-id-1"
3062+
id="combobox-unique-id-listbox-option-options-search-id-1"
30633063
onClick={[Function]}
30643064
role="option"
30653065
>
@@ -3078,7 +3078,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
30783078
<span
30793079
className="slds-assistive-text"
30803080
>
3081-
add
3081+
Search
30823082
</span>
30833083
</span>
30843084
</span>
@@ -3094,9 +3094,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
30943094
role="presentation"
30953095
>
30963096
<div
3097-
aria-selected="false"
3097+
aria-selected={false}
30983098
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
3099-
id="search-in-account-id"
3099+
id="combobox-unique-id-listbox-option-search-in-account-id"
31003100
onClick={[Function]}
31013101
role="option"
31023102
>
@@ -3115,7 +3115,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
31153115
<span
31163116
className="slds-assistive-text"
31173117
>
3118-
add in Accounts
3118+
Search in Accounts
31193119
</span>
31203120
</span>
31213121
</span>
@@ -3324,9 +3324,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
33243324
role="presentation"
33253325
>
33263326
<div
3327-
aria-selected="false"
3327+
aria-selected={false}
33283328
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
3329-
id="options-add-id-1"
3329+
id="combobox-unique-id-listbox-option-options-add-id-1"
33303330
onClick={[Function]}
33313331
role="option"
33323332
>
@@ -3345,7 +3345,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
33453345
<span
33463346
className="slds-assistive-text"
33473347
>
3348-
add
3348+
Add
33493349
</span>
33503350
</span>
33513351
</span>
@@ -6157,9 +6157,9 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
61576157
role="presentation"
61586158
>
61596159
<div
6160-
aria-selected="false"
6160+
aria-selected={false}
61616161
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
6162-
id="my-new-id"
6162+
id="combobox-unique-id-listbox-option-my-new-id"
61636163
onClick={[Function]}
61646164
role="option"
61656165
>
@@ -6178,7 +6178,7 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
61786178
<span
61796179
className="slds-assistive-text"
61806180
>
6181-
add
6181+
Search
61826182
</span>
61836183
</span>
61846184
</span>
@@ -6338,9 +6338,9 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
63386338
role="presentation"
63396339
>
63406340
<div
6341-
aria-selected="false"
6341+
aria-selected={false}
63426342
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
6343-
id="my-new-id"
6343+
id="combobox-unique-id-listbox-option-my-new-id"
63446344
onClick={[Function]}
63456345
role="option"
63466346
>
@@ -6359,7 +6359,7 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
63596359
<span
63606360
className="slds-assistive-text"
63616361
>
6362-
add
6362+
Add
63636363
</span>
63646364
</span>
63656365
</span>

‎components/combobox/__examples__/inline-single-search-add-entities.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ class Example extends React.Component {
7474
id: 'options-search-id-1',
7575
icon: (
7676
<Icon
77-
assistiveText={{ label: 'add' }}
77+
assistiveText={{ label: 'Search' }}
7878
size="x-small"
7979
category="utility"
8080
name="search"
@@ -86,7 +86,7 @@ class Example extends React.Component {
8686
id: 'search-in-account-id',
8787
icon: (
8888
<Icon
89-
assistiveText={{ label: 'add in Accounts' }}
89+
assistiveText={{ label: 'Search in Accounts' }}
9090
size="x-small"
9191
category="utility"
9292
name="search"
@@ -107,7 +107,7 @@ class Example extends React.Component {
107107
id: 'options-add-id-1',
108108
icon: (
109109
<Icon
110-
assistiveText={{ label: 'add' }}
110+
assistiveText={{ label: 'Add' }}
111111
category="utility"
112112
size="x-small"
113113
name="add"

‎components/combobox/__examples__/snapshot/inline-single-search-add-entities-open.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class Example extends React.Component {
6060
id: 'my-new-id',
6161
icon: (
6262
<Icon
63-
assistiveText={{ label: 'add' }}
63+
assistiveText={{ label: 'Search' }}
6464
size="x-small"
6565
category="utility"
6666
name="search"
@@ -75,7 +75,7 @@ class Example extends React.Component {
7575
id: 'my-new-id',
7676
icon: (
7777
<Icon
78-
assistiveText={{ label: 'add' }}
78+
assistiveText={{ label: 'Add' }}
7979
category="utility"
8080
size="x-small"
8181
name="add"

‎components/combobox/combobox.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -472,6 +472,22 @@ class Combobox extends React.Component {
472472
activeSelectedOptionIndex: 0,
473473
});
474474
}
475+
476+
// changes pill focus to last item in the list if the selection length has changed
477+
if (nextProps.selection.length > this.props.selection.length) {
478+
if (nextProps.selection.length < 1) {
479+
this.setState({
480+
activeSelectedOption: undefined,
481+
activeSelectedOptionIndex: 0,
482+
});
483+
} else {
484+
this.setState({
485+
activeSelectedOption:
486+
nextProps.selection[nextProps.selection.length - 1],
487+
activeSelectedOptionIndex: nextProps.selection.length - 1,
488+
});
489+
}
490+
}
475491
}
476492

477493
componentWillUnmount() {

‎components/combobox/private/menu.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -253,8 +253,8 @@ const Menu = (props) => {
253253
props.onSelect(event, { option: optionData });
254254
}
255255
}
256-
aria-selected="false"
257-
id={optionData.id}
256+
aria-selected={active}
257+
id={`${props.inputId}-listbox-option-${optionData.id}`}
258258
className={classNames(
259259
'slds-media slds-listbox__option',
260260
'slds-listbox__option_entity slds-listbox__option_term',
@@ -280,15 +280,15 @@ const Menu = (props) => {
280280
className="slds-listbox__item"
281281
>
282282
<div
283-
aria-selected="false"
283+
aria-selected={active}
284284
onClick={
285285
optionData.disabled
286286
? null
287287
: (event) => {
288288
props.onSelect(event, { option: optionData });
289289
}
290290
}
291-
id={optionData.id}
291+
id={`${props.inputId}-listbox-option-${optionData.id}`}
292292
className={classNames(
293293
'slds-media slds-listbox__option',
294294
'slds-listbox__option_entity slds-listbox__option_term',

‎components/component-docs.json

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1616,7 +1616,15 @@
16161616
},
16171617
"button-group": {
16181618
"description": "The ButtonGroup component wraps other components (ie. Button, MenuDropdown, PopoverTooltip, Checkboxes, etc).",
1619-
"methods": [],
1619+
"methods": [
1620+
{
1621+
"name": "getId",
1622+
"docblock": null,
1623+
"modifiers": [],
1624+
"params": [],
1625+
"returns": null
1626+
}
1627+
],
16201628
"props": {
16211629
"children": {
16221630
"type": {
@@ -1661,6 +1669,13 @@
16611669
"required": false,
16621670
"description": "If the `labels.label` prop is set, a `.slds-form-element` classed fieldset element is added as a container. This prop applies classes to that element"
16631671
},
1672+
"id": {
1673+
"type": {
1674+
"name": "string"
1675+
},
1676+
"required": false,
1677+
"description": "HTML id for component."
1678+
},
16641679
"labels": {
16651680
"type": {
16661681
"name": "shape",
@@ -6785,6 +6800,13 @@
67856800
"required": true,
67866801
"description": "Callbacks for various expression condition events such as value change, delete etc"
67876802
},
6803+
"focusOnMount": {
6804+
"type": {
6805+
"name": "bool"
6806+
},
6807+
"required": false,
6808+
"description": "If set to true, the component will focus on the first focusable input upon mounting. This is useful for accessibility when adding new conditions."
6809+
},
67886810
"labels": {
67896811
"type": {
67906812
"name": "shape",
@@ -7147,6 +7169,13 @@
71477169
"required": false,
71487170
"description": "Callbacks for various expression group events such as trigger change, add condition etc"
71497171
},
7172+
"focusOnMount": {
7173+
"type": {
7174+
"name": "bool"
7175+
},
7176+
"required": false,
7177+
"description": "If set to true, the component will focus on the first focusable input upon mounting. This is useful for accessibility when adding new groups."
7178+
},
71507179
"labels": {
71517180
"type": {
71527181
"name": "shape",

0 commit comments

Comments
 (0)