fix(multi-select): fix DAP violations (carbon-design-system#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]>
joshblack · Jan 10, 2020 · 8a20d0e · 8a20d0e
1 parent 3de43bb
commit 8a20d0e
Show file tree

Hide file tree

Showing 6 changed files with 1 addition and 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
@@ -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-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
@@ -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/...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
@@ -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}