Skip to content

Accessibility audit fixes for Combobox, DataTable, Expression, Map, and Dropdown #2359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 10, 2019
Merged

Accessibility audit fixes for Combobox, DataTable, Expression, Map, and Dropdown #2359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions components/combobox/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3053,9 +3053,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
role="presentation"
>
<div
aria-selected="false"
aria-selected={false}
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
id="options-search-id-1"
id="combobox-unique-id-listbox-option-options-search-id-1"
onClick={[Function]}
role="option"
>
Expand All @@ -3074,7 +3074,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
<span
className="slds-assistive-text"
>
add
Search
</span>
</span>
</span>
Expand All @@ -3090,9 +3090,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
role="presentation"
>
<div
aria-selected="false"
aria-selected={false}
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
id="search-in-account-id"
id="combobox-unique-id-listbox-option-search-in-account-id"
onClick={[Function]}
role="option"
>
Expand All @@ -3111,7 +3111,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
<span
className="slds-assistive-text"
>
add in Accounts
Search in Accounts
</span>
</span>
</span>
Expand Down Expand Up @@ -3320,9 +3320,9 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
role="presentation"
>
<div
aria-selected="false"
aria-selected={false}
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
id="options-add-id-1"
id="combobox-unique-id-listbox-option-options-add-id-1"
onClick={[Function]}
role="option"
>
Expand All @@ -3341,7 +3341,7 @@ exports[`DOM snapshots SLDSCombobox Inline Single Search/Add Entities - Open 1`]
<span
className="slds-assistive-text"
>
add
Add
</span>
</span>
</span>
Expand Down Expand Up @@ -6149,9 +6149,9 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
role="presentation"
>
<div
aria-selected="false"
aria-selected={false}
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
id="my-new-id"
id="combobox-unique-id-listbox-option-my-new-id"
onClick={[Function]}
role="option"
>
Expand All @@ -6170,7 +6170,7 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
<span
className="slds-assistive-text"
>
add
Search
</span>
</span>
</span>
Expand Down Expand Up @@ -6330,9 +6330,9 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
role="presentation"
>
<div
aria-selected="false"
aria-selected={false}
className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term"
id="my-new-id"
id="combobox-unique-id-listbox-option-my-new-id"
onClick={[Function]}
role="option"
>
Expand All @@ -6351,7 +6351,7 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Search/Add Entities O
<span
className="slds-assistive-text"
>
add
Add
</span>
</span>
</span>
Expand Down
6 changes: 3 additions & 3 deletions components/combobox/__examples__/inline-single-search-add-entities.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ class Example extends React.Component {
id: 'options-search-id-1',
icon: (
<Icon
assistiveText={{ label: 'add' }}
assistiveText={{ label: 'Search' }}
size="x-small"
category="utility"
name="search"
Expand All @@ -86,7 +86,7 @@ class Example extends React.Component {
id: 'search-in-account-id',
icon: (
<Icon
assistiveText={{ label: 'add in Accounts' }}
assistiveText={{ label: 'Search in Accounts' }}
size="x-small"
category="utility"
name="search"
Expand All @@ -107,7 +107,7 @@ class Example extends React.Component {
id: 'options-add-id-1',
icon: (
<Icon
assistiveText={{ label: 'add' }}
assistiveText={{ label: 'Add' }}
category="utility"
size="x-small"
name="add"
Expand Down
4 changes: 2 additions & 2 deletions components/combobox/__examples__/snapshot/inline-single-search-add-entities-open.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class Example extends React.Component {
id: 'my-new-id',
icon: (
<Icon
assistiveText={{ label: 'add' }}
assistiveText={{ label: 'Search' }}
size="x-small"
category="utility"
name="search"
Expand All @@ -75,7 +75,7 @@ class Example extends React.Component {
id: 'my-new-id',
icon: (
<Icon
assistiveText={{ label: 'add' }}
assistiveText={{ label: 'Add' }}
category="utility"
size="x-small"
name="add"
Expand Down
16 changes: 16 additions & 0 deletions components/combobox/combobox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,22 @@ class Combobox extends React.Component {
activeSelectedOptionIndex: 0,
});
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great solution!

// changes pill focus to last item in the list if the selection length has changed
if (nextProps.selection.length > this.props.selection.length) {
if (nextProps.selection.length < 1) {
this.setState({
activeSelectedOption: undefined,
activeSelectedOptionIndex: 0,
});
} else {
this.setState({
activeSelectedOption:
nextProps.selection[nextProps.selection.length - 1],
activeSelectedOptionIndex: nextProps.selection.length - 1,
});
}
}
}

componentWillUnmount() {
Expand Down
8 changes: 4 additions & 4 deletions components/combobox/private/menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,8 +253,8 @@ const Menu = (props) => {
props.onSelect(event, { option: optionData });
}
}
aria-selected="false"
id={optionData.id}
aria-selected={active}
id={`${props.inputId}-listbox-option-${optionData.id}`}
className={classNames(
'slds-media slds-listbox__option',
'slds-listbox__option_entity slds-listbox__option_term',
Expand All @@ -280,15 +280,15 @@ const Menu = (props) => {
className="slds-listbox__item"
>
<div
aria-selected="false"
aria-selected={active}
onClick={
optionData.disabled
? null
: (event) => {
props.onSelect(event, { option: optionData });
}
}
id={optionData.id}
id={`${props.inputId}-listbox-option-${optionData.id}`}
className={classNames(
'slds-media slds-listbox__option',
'slds-listbox__option_entity slds-listbox__option_term',
Expand Down
31 changes: 30 additions & 1 deletion components/component-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1616,7 +1616,15 @@
},
"button-group": {
"description": "The ButtonGroup component wraps other components (ie. Button, MenuDropdown, PopoverTooltip, Checkboxes, etc).",
"methods": [],
"methods": [
{
"name": "getId",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
}
],
"props": {
"children": {
"type": {
Expand Down Expand Up @@ -1661,6 +1669,13 @@
"required": false,
"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"
},
"id": {
"type": {
"name": "string"
},
"required": false,
"description": "HTML id for component."
},
"labels": {
"type": {
"name": "shape",
Expand Down Expand Up @@ -6785,6 +6800,13 @@
"required": true,
"description": "Callbacks for various expression condition events such as value change, delete etc"
},
"focusOnMount": {
"type": {
"name": "bool"
},
"required": false,
"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."
},
"labels": {
"type": {
"name": "shape",
Expand Down Expand Up @@ -7147,6 +7169,13 @@
"required": false,
"description": "Callbacks for various expression group events such as trigger change, add condition etc"
},
"focusOnMount": {
"type": {
"name": "bool"
},
"required": false,
"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."
},
"labels": {
"type": {
"name": "shape",
Expand Down
Loading