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 <[email protected]>
carbon-design-system · Jan 13, 2020 · be3a798 · be3a798
1 parent f19b795
commit be3a798
Show file tree

Hide file tree

Showing 6 changed files with 1 addition and 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
@@ -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
@@ -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
@@ -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
@@ -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/...act/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/...act/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
@@ -90,8 +90,6 @@ exports[`MultiSelect should render 1`] = `
             id="test-multiselect"
             onClick={[Function]}
             onKeyDown={[Function]}
-            role="listbox"
-            tabIndex="-1"
           >
             <ListBoxField
               aria-disabled={false}