fix(Dropdown): resolve DAP violations (#4260)

Author: abbeyhrt

packages/react/src/components/Dropdown/Dropdown-story.js

@@ -60,7 +60,7 @@ const itemToElement = item => {
   return (
     <div>
       <span>{itemAsArray[0]}</span>
-      <span style={{ color: 'red' }}> {itemAsArray[1]}</span>
+      <span style={{ color: 'blue' }}> {itemAsArray[1]}</span>
     </div>
   );
 };

packages/react/src/components/Dropdown/Dropdown.js

@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
 
@@ -24,6 +25,8 @@ const defaultItemToString = item => {
   return item ? item.label : '';
 };
 
+const getInstanceId = setupGetInstanceId();
+
 export default class Dropdown extends React.Component {
   static propTypes = {
     /**
@@ -144,6 +147,10 @@ export default class Dropdown extends React.Component {
     helperText: '',
   };
 
+  constructor(props) {
+    super(props);
+    this.dropdownInstanceId = getInstanceId();
+  }
   handleOnChange = selectedItem => {
     if (this.props.onChange) {
       this.props.onChange({ selectedItem });
@@ -183,8 +190,11 @@ export default class Dropdown extends React.Component {
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
+
+    const dropdownId = `dropdown-${this.dropdownInstanceId}`;
+
     const title = titleText ? (
-      <label htmlFor={id} className={titleClasses}>
+      <label htmlFor={dropdownId} className={titleClasses}>
         {titleText}
       </label>
     ) : null;
@@ -229,8 +239,9 @@ export default class Dropdown extends React.Component {
             toggleMenu,
           }) => (
             <ListBox
-              id={id}
               type={type}
+              id={dropdownId}
+              aria-label={ariaLabel}
               className={className({ isOpen })}
               disabled={disabled}
               isOpen={isOpen}
@@ -268,7 +279,7 @@ export default class Dropdown extends React.Component {
                 />
               </ListBox.Field>
               {isOpen && (
-                <ListBox.Menu aria-label={ariaLabel} id={id}>
+                <ListBox.Menu aria-labelledby={dropdownId} id={id}>
                   {items.map((item, index) => (
                     <ListBox.MenuItem
                       key={itemToString(item)}

packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap

@@ -67,15 +67,15 @@ exports[`Dropdown should render 1`] = `
       <ListBox
         className="bx--dropdown"
         disabled={false}
-        id="test-dropdown"
+        id="dropdown-1"
         innerRef={[Function]}
         isOpen={false}
         light={false}
         type="default"
       >
         <div
           className="bx--dropdown bx--list-box"
-          id="test-dropdown"
+          id="dropdown-1"
           onClick={[Function]}
           onKeyDown={[Function]}
           role="listbox"
@@ -242,15 +242,15 @@ exports[`Dropdown should render custom item components 1`] = `
       <ListBox
         className="bx--dropdown bx--dropdown--open"
         disabled={false}
-        id="test-dropdown"
+        id="dropdown-5"
         innerRef={[Function]}
         isOpen={true}
         light={false}
         type="default"
       >
         <div
           className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
-          id="test-dropdown"
+          id="dropdown-5"
           onClick={[Function]}
           onKeyDown={[Function]}
           role="listbox"
@@ -344,9 +344,11 @@ exports[`Dropdown should render custom item components 1`] = `
             </div>
           </ListBoxField>
           <ListBoxMenu
+            aria-labelledby="dropdown-5"
             id="test-dropdown"
           >
             <div
+              aria-labelledby="dropdown-5"
               className="bx--list-box__menu"
               id="test-dropdown__menu"
               role="listbox"
@@ -574,15 +576,15 @@ exports[`Dropdown should render with strings as items 1`] = `
       <ListBox
         className="bx--dropdown bx--dropdown--open"
         disabled={false}
-        id="test-dropdown"
+        id="dropdown-4"
         innerRef={[Function]}
         isOpen={true}
         light={false}
         type="default"
       >
         <div
           className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
-          id="test-dropdown"
+          id="dropdown-4"
           onClick={[Function]}
           onKeyDown={[Function]}
           role="listbox"
@@ -676,9 +678,11 @@ exports[`Dropdown should render with strings as items 1`] = `
             </div>
           </ListBoxField>
           <ListBoxMenu
+            aria-labelledby="dropdown-4"
             id="test-dropdown"
           >
             <div
+              aria-labelledby="dropdown-4"
               className="bx--list-box__menu"
               id="test-dropdown__menu"
               role="listbox"