From 8a20d0e5ea4a224940d40e4f3dfdda8407d405e5 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    | 6 +-----
 .../__snapshots__/FilterableMultiSelect-test.js.snap        | 2 --
 .../__tests__/__snapshots__/MultiSelect-test.js.snap        | 4 ----
 6 files changed, 1 insertion(+), 23 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 1ac1722a87b5..8432d797b7da 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 06b19ddc1939..a710feb9638e 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-haspopup="listbox"
@@ -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 50f281cd2f49..e53b053c0f59 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -221,7 +221,6 @@ export default class MultiSelect extends React.Component {
   render() {
     const { highlightedIndex, isOpen } = this.state;
     const {
-      ariaLabel,
       className: containerClassName,
       id,
       items,
@@ -317,7 +316,6 @@ export default class MultiSelect extends React.Component {
               return (
                 <ListBox
                   id={id}
-                  aria-label={ariaLabel}
                   type={type}
                   size={size}
                   className={className}
@@ -326,8 +324,6 @@ export default class MultiSelect extends React.Component {
                   invalid={invalid}
                   invalidText={invalidText}
                   isOpen={isOpen}
-                  aria-labelledby={labelId}
-                  aria-describedby={helperId}
                   {...getRootProps({ refKey: 'innerRef' })}>
                   {invalid && (
                     <WarningFilled16
@@ -361,7 +357,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 f76f31e7fc3f..19896c350ec8 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 95f1bab59691..b8281b17a31b 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
@@ -77,7 +77,6 @@ exports[`MultiSelect should render 1`] = `
         stateReducer={[Function]}
       >
         <ListBox
-          aria-labelledby="multiselect-label-1"
           className="bx--multi-select"
           disabled={false}
           id="test-multiselect"
@@ -87,13 +86,10 @@ exports[`MultiSelect should render 1`] = `
           type="default"
         >
           <div
-            aria-labelledby="multiselect-label-1"
             className="bx--multi-select bx--list-box"
             id="test-multiselect"
             onClick={[Function]}
             onKeyDown={[Function]}
-            role="listbox"
-            tabIndex="-1"
           >
             <ListBoxField
               aria-disabled={false}