From be3a7983f014dd0903aaa0d703014b72c67c1428 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <aledavila@ibm.com>
Date: Fri, 10 Jan 2020 11:08:08 -0600
Subject: [PATCH] fix(multi-select): fix DAP violations (#4991)

* fix(multi-select): add arialabeledby to menu

* fix(list-box): remove role from listbox

* chore: remove console log

* chore: update snapshots

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 .../components/Dropdown/__snapshots__/Dropdown-test.js.snap | 6 ------
 packages/react/src/components/ListBox/ListBox.js            | 2 --
 .../ListBox/__tests__/__snapshots__/ListBox-test.js.snap    | 4 ----
 packages/react/src/components/MultiSelect/MultiSelect.js    | 3 +--
 .../__snapshots__/FilterableMultiSelect-test.js.snap        | 2 --
 .../__tests__/__snapshots__/MultiSelect-test.js.snap        | 2 --
 6 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
index f7149c93ed39..abd8bb38cc44 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -78,8 +78,6 @@ exports[`Dropdown should render 1`] = `
           id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
-          role="listbox"
-          tabIndex="-1"
         >
           <ListBoxField
             aria-disabled={false}
@@ -253,8 +251,6 @@ exports[`Dropdown should render custom item components 1`] = `
           id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
-          role="listbox"
-          tabIndex="-1"
         >
           <ListBoxField
             aria-disabled={false}
@@ -587,8 +583,6 @@ exports[`Dropdown should render with strings as items 1`] = `
           id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
-          role="listbox"
-          tabIndex="-1"
         >
           <ListBoxField
             aria-disabled={false}
diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
index 361c08a02c62..89fde381e4a1 100644
--- a/packages/react/src/components/ListBox/ListBox.js
+++ b/packages/react/src/components/ListBox/ListBox.js
@@ -54,8 +54,6 @@ const ListBox = ({
     <>
       <div
         {...rest}
-        role="listbox"
-        tabIndex="-1"
         className={className}
         ref={innerRef}
         onKeyDown={handleOnKeyDown}
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
index c67c2767770d..784748099021 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
@@ -12,8 +12,6 @@ exports[`ListBox should render 1`] = `
           <div
             class="bx--list-box__container bx--list-box"
             id="test-listbox"
-            role="listbox"
-            tabindex="-1"
           >
             <div
               aria-label="Open menu"
@@ -39,8 +37,6 @@ exports[`ListBox should render 1`] = `
     id="test-listbox"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="listbox"
-    tabIndex="-1"
   >
     <ListBoxField
       id="test-listbox"
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index e5e965129f6c..40d3f85c5c18 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -218,7 +218,6 @@ export default class MultiSelect extends React.Component {
   render() {
     const { highlightedIndex, isOpen } = this.state;
     const {
-      ariaLabel,
       className: containerClassName,
       id,
       items,
@@ -341,7 +340,7 @@ export default class MultiSelect extends React.Component {
                     />
                   </ListBox.Field>
                   {isOpen && (
-                    <ListBox.Menu aria-label={ariaLabel} id={id}>
+                    <ListBox.Menu aria-labelledby={`${labelId}`} id={id}>
                       {sortItems(items, {
                         selectedItems: {
                           top: selectedItems,
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
index 6daa65520edd..1771196cfcb0 100644
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
@@ -90,8 +90,6 @@ exports[`MultiSelect.Filterable should render 1`] = `
             className="bx--multi-select bx--combo-box bx--multi-select--filterable bx--list-box"
             onClick={[Function]}
             onKeyDown={[Function]}
-            role="listbox"
-            tabIndex="-1"
           >
             <ListBoxField
               aria-expanded={false}
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap
index 0e5d1ffebcff..5764ac02e37e 100644
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap
+++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect-test.js.snap
@@ -90,8 +90,6 @@ exports[`MultiSelect should render 1`] = `
             id="test-multiselect"
             onClick={[Function]}
             onKeyDown={[Function]}
-            role="listbox"
-            tabIndex="-1"
           >
             <ListBoxField
               aria-disabled={false}