Merge branch 'master' into table-toolbar-search-value-fix

carbon-design-system · Jan 24, 2020 · abb08ec · abb08ec
2 parents 5af8158 + 88fd0af
commit abb08ec
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -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';
@@ -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,
@@ -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>
                         );
                       })}