Skip to content

Commit 06aa4b9

Browse files
kevinparkersonkevinparkerson
committed
a11y audit fixes for:
- Combobox - Data Table - Expression - Map - Menu Dropdown
1 parent b951f41 commit 06aa4b9

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
@@ -3053,9 +3053,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
30533053
role="presentation"
30543054
>
30553055
<div
3056-
aria-selected="false"
3056+
aria-selected={false}
30573057
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
3058-
id="options-search-id-1"
3058+
id="combobox-unique-id-listbox-option-options-search-id-1"
30593059
onClick={[Function]}
30603060
role="option"
30613061
>
@@ -3074,7 +3074,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
30743074
<span
30753075
className="slds-assistive-text"
30763076
>
3077-
add
3077+
Search
30783078
</span>
30793079
</span>
30803080
</span>
@@ -3090,9 +3090,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
30903090
role="presentation"
30913091
>
30923092
<div
3093-
aria-selected="false"
3093+
aria-selected={false}
30943094
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
3095-
id="search-in-account-id"
3095+
id="combobox-unique-id-listbox-option-search-in-account-id"
30963096
onClick={[Function]}
30973097
role="option"
30983098
>
@@ -3111,7 +3111,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
31113111
<span
31123112
className="slds-assistive-text"
31133113
>
3114-
add in Accounts
3114+
Search in Accounts
31153115
</span>
31163116
</span>
31173117
</span>
@@ -3320,9 +3320,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
33203320
role="presentation"
33213321
>
33223322
<div
3323-
aria-selected="false"
3323+
aria-selected={false}
33243324
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
3325-
id="options-add-id-1"
3325+
id="combobox-unique-id-listbox-option-options-add-id-1"
33263326
onClick={[Function]}
33273327
role="option"
33283328
>
@@ -3341,7 +3341,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
33413341
<span
33423342
className="slds-assistive-text"
33433343
>
3344-
add
3344+
Add
33453345
</span>
33463346
</span>
33473347
</span>
@@ -6149,9 +6149,9 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
61496149
role="presentation"
61506150
>
61516151
<div
6152-
aria-selected="false"
6152+
aria-selected={false}
61536153
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
6154-
id="my-new-id"
6154+
id="combobox-unique-id-listbox-option-my-new-id"
61556155
onClick={[Function]}
61566156
role="option"
61576157
>
@@ -6170,7 +6170,7 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
61706170
<span
61716171
className="slds-assistive-text"
61726172
>
6173-
add
6173+
Search
61746174
</span>
61756175
</span>
61766176
</span>
@@ -6330,9 +6330,9 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
63306330
role="presentation"
63316331
>
63326332
<div
6333-
aria-selected="false"
6333+
aria-selected={false}
63346334
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
6335-
id="my-new-id"
6335+
id="combobox-unique-id-listbox-option-my-new-id"
63366336
onClick={[Function]}
63376337
role="option"
63386338
>
@@ -6351,7 +6351,7 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
63516351
<span
63526352
className="slds-assistive-text"
63536353
>
6354-
add
6354+
Add
63556355
</span>
63566356
</span>
63576357
</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)