From 88fd0afbe6e20d13c390171037ec1adf09094d43 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 24 Jan 2020 13:29:18 -0800
Subject: [PATCH] fix(multiselect): replace checkbox with visually identical
 element (#5039)

* fix(multiselect): add role to resolve DAP issues

* fix(multiselect): replace checkbox with visually identical element

* fix(multiselect): add aria-label to parent element

* fix(multiselect): remove added properties

* fix(listbox): add aria-multiselectable attribute

* fix(multiselect): remove aria-label
---
 .../src/components/MultiSelect/MultiSelect.js | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 4ffe0103e390..37727c6005e9 100644
--- 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>
                         );
                       })}