Skip to content
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

Jump to bottom

fix(multiselect): replace checkbox with visually identical element #5039

Merged
merged 10 commits into from
Jan 24, 2020
Merged

fix(multiselect): replace checkbox with visually identical element #5039

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0971a85
fix(multiselect): add role to resolve DAP issues
tw15egan Jan 14, 2020
90d436a
fix(multiselect): replace checkbox with visually identical element
tw15egan Jan 15, 2020
cd8cff1
fix(multiselect): add aria-label to parent element
tw15egan Jan 17, 2020
ba9c1cf
fix(multiselect): remove added properties
tw15egan Jan 20, 2020
806d162
fix(listbox): add aria-multiselectable attribute
tw15egan Jan 21, 2020
5691507
fix(multiselect): remove aria-label
tw15egan Jan 21, 2020
01cf7ee
Merge branch 'master' into multiselect-a11y
tw15egan Jan 21, 2020
5cf9e54
Merge branch 'master' into multiselect-a11y
tw15egan Jan 22, 2020
9117c00
Merge branch 'master' into multiselect-a11y
tw15egan Jan 24, 2020
e429737
Merge branch 'master' into multiselect-a11y
tw15egan Jan 24, 2020
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
28 changes: 16 additions & 12 deletions packages/react/src/components/MultiSelect/MultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import isEqual from 'lodash.isequal';
import { settings } from 'carbon-components';
import { WarningFilled16 } from '@carbon/icons-react';
import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
import Checkbox from '../Checkbox';
import Selection from '../../internal/Selection';
import { sortingPropTypes } from './MultiSelectPropTypes';
import { defaultItemToString } from './tools/itemToString';
Expand Down Expand Up @@ -357,7 +356,10 @@ export default class MultiSelect extends React.Component {
/>
</ListBox.Field>
{isOpen && (
<ListBox.Menu aria-labelledby={`${labelId}`} id={id}>
<ListBox.Menu
aria-multiselectable="true"
aria-labelledby={`${labelId}`}
id={id}>
{sortItems(items, {
selectedItems: {
top: selectedItems,
Expand All @@ -378,19 +380,21 @@ export default class MultiSelect extends React.Component {
<ListBox.MenuItem
key={itemProps.id}
isActive={isChecked}
role="option"
aria-selected={isChecked}
tabIndex={-1}
isHighlighted={highlightedIndex === index}
title={itemText}
{...itemProps}>
<Checkbox
id={`${itemProps.id}__checkbox`}
title={useTitleInItem ? itemText : null}
name={itemText}
checked={isChecked}
disabled={disabled}
readOnly={true}
tabIndex="-1"
labelText={itemText}
/>
<div className={`${prefix}--checkbox-wrapper`}>
<span
title={useTitleInItem ? itemText : null}
className={`${prefix}--checkbox-label`}
data-contained-checkbox-state={isChecked}
id={`${itemProps.id}__checkbox`}>
{itemText}
</span>
</div>
</ListBox.MenuItem>
);
})}
Expand Down