Revert "fix(multi-select): fix DAP violations (#4991)"

This reverts commit 8a20d0e.
carbon-design-system · Jan 13, 2020 · 99606a8 · 99606a8
1 parent edbc0fc
commit 99606a8
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 1 deletion.
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,6 +78,8 @@ exports[`Dropdown should render 1`] = `
           id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="listbox"
+          tabIndex="-1"
         >
           <ListBoxField
             aria-disabled={false}
@@ -251,6 +253,8 @@ exports[`Dropdown should render custom item components 1`] = `
           id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
+          role="listbox"
+          tabIndex="-1"
         >
           <ListBoxField
             aria-disabled={false}
@@ -583,6 +587,8 @@ 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,6 +54,8 @@ 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,6 +12,8 @@ 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"
@@ -37,6 +39,8 @@ 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,6 +218,7 @@ export default class MultiSelect extends React.Component {
   render() {
     const { highlightedIndex, isOpen } = this.state;
     const {
+      ariaLabel,
       className: containerClassName,
       id,
       items,
@@ -302,6 +303,7 @@ export default class MultiSelect extends React.Component {
               return (
                 <ListBox
                   id={id}
+                  aria-label={ariaLabel}
                   type={type}
                   size={size}
                   className={className}
@@ -310,6 +312,8 @@ export default class MultiSelect extends React.Component {
                   invalid={invalid}
                   invalidText={invalidText}
                   isOpen={isOpen}
+                  aria-labelledby={labelId}
+                  aria-describedby={helperId}
                   {...getRootProps({ refKey: 'innerRef' })}>
                   {invalid && (
                     <WarningFilled16
@@ -340,7 +344,7 @@ export default class MultiSelect extends React.Component {
                     />
                   </ListBox.Field>
                   {isOpen && (
-                    <ListBox.Menu aria-labelledby={`${labelId}`} id={id}>
+                    <ListBox.Menu aria-label={ariaLabel} 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,6 +90,8 @@ 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,6 +77,7 @@ exports[`MultiSelect should render 1`] = `
         stateReducer={[Function]}
       >
         <ListBox
+          aria-labelledby="multiselect-label-1"
           className="bx--multi-select"
           disabled={false}
           id="test-multiselect"
@@ -86,10 +87,13 @@ 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}