From eca52e925754bc76e4d3d015908b3f689d4b6469 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 5 Dec 2019 13:47:10 +0900
Subject: [PATCH 1/9] feat(ListBox): fix labels of trigger buttons

This change fixes an DAP error in `<ListBox.Field>` that happens
because its `aria-label` not matching its text content. DAP takes
`aria-labelledby` as a preferred label content (over text content or
`aria-label`), and thus this change add `aria-labelledby` to
`<ListBox.Field>`.

The original `aria-label` content, which is for lettting user know that
the UI can open/close menu, is replaced with a browser's native
approach to tell assistive technology that the button is a pop-up
button and let screen reader announce as such.

This change also changes `<label>` to `<span>` for dropdown and
non-filterable multi select given there is no form control (`<input>`)
associated with it.

Fixes #4531.
---
 .../react/src/components/ComboBox/ComboBox.js |   5 +-
 .../react/src/components/Dropdown/Dropdown.js | 133 +++++++++---------
 .../src/components/ListBox/ListBoxField.js    |  34 +----
 .../MultiSelect/FilterableMultiSelect.js      |  15 +-
 .../src/components/MultiSelect/MultiSelect.js |  17 ++-
 5 files changed, 102 insertions(+), 102 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 71489505681a..8b578a090866 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -272,8 +272,9 @@ export default class ComboBox extends React.Component {
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
+    const comboBoxLabelId = `combobox-label-${this.comboBoxInstanceId}`;
     const title = titleText ? (
-      <label htmlFor={id} className={titleClasses}>
+      <label id={comboBoxLabelId} htmlFor={id} className={titleClasses}>
         {titleText}
       </label>
     ) : null;
@@ -325,7 +326,7 @@ export default class ComboBox extends React.Component {
             <ListBox.Field
               id={id}
               disabled={disabled}
-              translateWithId={translateWithId}
+              aria-labelledby={comboBoxLabelId}
               {...getButtonProps({
                 disabled,
                 onClick: this.onToggleClick(isOpen),
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 715c465d785d..77658bfb153e 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -192,11 +192,12 @@ export default class Dropdown extends React.Component {
     });
 
     const dropdownId = `dropdown-${this.dropdownInstanceId}`;
+    const labelId = `dropdown-label-${this.dropdownInstanceId}`;
 
     const title = titleText ? (
-      <label htmlFor={dropdownId} className={titleClasses}>
+      <span id={labelId} className={titleClasses}>
         {titleText}
-      </label>
+      </span>
     ) : null;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${prefix}--form__helper-text--disabled`]: disabled,
@@ -237,68 +238,74 @@ export default class Dropdown extends React.Component {
             getItemProps,
             getLabelProps,
             toggleMenu,
-          }) => (
-            <ListBox
-              type={type}
-              id={dropdownId}
-              aria-label={ariaLabel}
-              className={className({ isOpen })}
-              disabled={disabled}
-              isOpen={isOpen}
-              invalid={invalid}
-              invalidText={invalidText}
-              light={light}
-              {...getRootProps({ refKey: 'innerRef' })}>
-              {invalid && (
-                <WarningFilled16
-                  className={`${prefix}--list-box__invalid-icon`}
-                />
-              )}
-              <ListBox.Field
-                id={id}
-                tabIndex="0"
+          }) => {
+            const buttonProps = {
+              ...getButtonProps({
+                onKeyDown: event => {
+                  if (match(event, keys.Enter)) {
+                    toggleMenu();
+                  }
+                },
+                disabled,
+              }),
+              'aria-label': undefined,
+            };
+            return (
+              <ListBox
+                type={type}
+                id={dropdownId}
+                aria-label={ariaLabel}
+                className={className({ isOpen })}
                 disabled={disabled}
-                aria-disabled={disabled}
-                translateWithId={translateWithId}
-                {...getButtonProps({
-                  onKeyDown: event => {
-                    if (match(event, keys.Enter)) {
-                      toggleMenu();
-                    }
-                  },
-                  disabled,
-                })}>
-                <span
-                  className={`${prefix}--list-box__label`}
-                  {...getLabelProps()}>
-                  {selectedItem ? itemToString(selectedItem) : label}
-                </span>
-                <ListBox.MenuIcon
-                  isOpen={isOpen}
-                  translateWithId={translateWithId}
-                />
-              </ListBox.Field>
-              {isOpen && (
-                <ListBox.Menu aria-labelledby={dropdownId} id={id}>
-                  {items.map((item, index) => (
-                    <ListBox.MenuItem
-                      key={itemToString(item)}
-                      isActive={selectedItem === item}
-                      isHighlighted={
-                        highlightedIndex === index || selectedItem === item
-                      }
-                      {...getItemProps({ item, index })}>
-                      {itemToElement ? (
-                        <ItemToElement key={itemToString(item)} {...item} />
-                      ) : (
-                        itemToString(item)
-                      )}
-                    </ListBox.MenuItem>
-                  ))}
-                </ListBox.Menu>
-              )}
-            </ListBox>
-          )}
+                isOpen={isOpen}
+                invalid={invalid}
+                invalidText={invalidText}
+                light={light}
+                {...getRootProps({ refKey: 'innerRef' })}>
+                {invalid && (
+                  <WarningFilled16
+                    className={`${prefix}--list-box__invalid-icon`}
+                  />
+                )}
+                <ListBox.Field
+                  id={id}
+                  tabIndex="0"
+                  disabled={disabled}
+                  aria-disabled={disabled}
+                  aria-labelledby={labelId}
+                  {...buttonProps}>
+                  <span
+                    className={`${prefix}--list-box__label`}
+                    {...getLabelProps()}>
+                    {selectedItem ? itemToString(selectedItem) : label}
+                  </span>
+                  <ListBox.MenuIcon
+                    isOpen={isOpen}
+                    translateWithId={translateWithId}
+                  />
+                </ListBox.Field>
+                {isOpen && (
+                  <ListBox.Menu aria-labelledby={dropdownId} id={id}>
+                    {items.map((item, index) => (
+                      <ListBox.MenuItem
+                        key={itemToString(item)}
+                        isActive={selectedItem === item}
+                        isHighlighted={
+                          highlightedIndex === index || selectedItem === item
+                        }
+                        {...getItemProps({ item, index })}>
+                        {itemToElement ? (
+                          <ItemToElement key={itemToString(item)} {...item} />
+                        ) : (
+                          itemToString(item)
+                        )}
+                      </ListBox.MenuItem>
+                    ))}
+                  </ListBox.Menu>
+                )}
+              </ListBox>
+            );
+          }}
         </Downshift>
       </div>
     );
diff --git a/packages/react/src/components/ListBox/ListBoxField.js b/packages/react/src/components/ListBox/ListBoxField.js
index cbbe84d62807..ba3419a1b6ec 100644
--- a/packages/react/src/components/ListBox/ListBoxField.js
+++ b/packages/react/src/components/ListBox/ListBoxField.js
@@ -11,37 +11,22 @@ import PropTypes from 'prop-types';
 
 const { prefix } = settings;
 
-export const translationIds = {
-  'close.menu': 'close.menu',
-  'open.menu': 'open.menu',
-};
-
-const defaultTranslations = {
-  [translationIds['close.menu']]: 'Close menu',
-  [translationIds['open.menu']]: 'Open menu',
-};
+export const translationIds = {}; // No longer used, left export for backward-compatibility
 
 /**
  * `ListBoxField` is responsible for creating the containing node for valid
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
-const ListBoxField = ({
-  children,
-  id,
-  disabled,
-  tabIndex,
-  translateWithId: t,
-  ...rest
-}) => (
+const ListBoxField = ({ children, id, disabled, tabIndex, ...rest }) => (
   <div
     role={rest['aria-expanded'] ? 'combobox' : rest.role || 'combobox'}
     aria-owns={(rest['aria-expanded'] && `${id}__menu`) || null}
     aria-controls={(rest['aria-expanded'] && `${id}__menu`) || null}
+    aria-haspopup="listbox"
     className={`${prefix}--list-box__field`}
     tabIndex={(!disabled && tabIndex) || -1}
-    {...rest}
-    aria-label={rest['aria-expanded'] ? t('close.menu') : t('open.menu')}>
+    {...rest}>
     {children}
   </div>
 );
@@ -66,17 +51,6 @@ ListBoxField.propTypes = {
    * Optional prop to specify the tabIndex of the <ListBox> trigger button
    */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /**
-   * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
-   * return a string message for that given message id.
-   */
-  translateWithId: PropTypes.func.isRequired,
-};
-
-ListBoxField.defaultProps = {
-  translateWithId: id => defaultTranslations[id],
 };
 
 export default ListBoxField;
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index 39ad4ff56641..cdcebfbef9ef 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -19,9 +19,12 @@ import { sortingPropTypes } from './MultiSelectPropTypes';
 import { defaultItemToString } from './tools/itemToString';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting';
 import { defaultFilterItems } from '../ComboBox/tools/filter';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
 
+const getInstanceId = setupGetInstanceId();
+
 export default class FilterableMultiSelect extends React.Component {
   static propTypes = {
     ...sortingPropTypes,
@@ -150,6 +153,7 @@ export default class FilterableMultiSelect extends React.Component {
 
   constructor(props) {
     super(props);
+    this.filterableMultiSelectInstanceId = getInstanceId();
     this.state = {
       highlightedIndex: null,
       isOpen: props.open,
@@ -281,11 +285,12 @@ export default class FilterableMultiSelect extends React.Component {
         [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
       }
     );
+    const labelId = `filterablemultiselect-${this.filterableMultiSelectInstanceId}`;
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
     const title = titleText ? (
-      <label htmlFor={id} className={titleClasses}>
+      <label id={labelId} htmlFor={id} className={titleClasses}>
         {titleText}
       </label>
     ) : null;
@@ -337,6 +342,10 @@ export default class FilterableMultiSelect extends React.Component {
                     selectedItem.length > 0,
                 }
               );
+              const buttonProps = {
+                ...getButtonProps({ disabled }),
+                'aria-label': undefined,
+              };
               return (
                 <ListBox
                   className={className}
@@ -349,8 +358,8 @@ export default class FilterableMultiSelect extends React.Component {
                   <ListBox.Field
                     id={id}
                     disabled={disabled}
-                    translateWithId={translateWithId}
-                    {...getButtonProps({ disabled })}>
+                    aria-labelledby={labelId}
+                    {...buttonProps}>
                     {selectedItem.length > 0 && (
                       <ListBox.Selection
                         clearSelection={clearSelection}
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index e27dd395ae46..ec1b89f4a13c 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -18,9 +18,11 @@ import Selection from '../../internal/Selection';
 import { sortingPropTypes } from './MultiSelectPropTypes';
 import { defaultItemToString } from './tools/itemToString';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
 const noop = () => undefined;
+const getInstanceId = setupGetInstanceId();
 
 export default class MultiSelect extends React.Component {
   static propTypes = {
@@ -151,6 +153,7 @@ export default class MultiSelect extends React.Component {
 
   constructor(props) {
     super(props);
+    this.multiSelectInstanceId = getInstanceId();
     this.state = {
       highlightedIndex: null,
       isOpen: props.open,
@@ -248,10 +251,11 @@ export default class MultiSelect extends React.Component {
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
+    const labelId = `multiselect-${this.multiSelectInstanceId}`;
     const title = titleText ? (
-      <label htmlFor={id} className={titleClasses}>
+      <span id={labelId} className={titleClasses}>
         {titleText}
-      </label>
+      </span>
     ) : null;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${prefix}--form__helper-text--disabled`]: disabled,
@@ -294,9 +298,14 @@ export default class MultiSelect extends React.Component {
                     selectedItem.length > 0,
                 }
               );
+              const buttonProps = {
+                ...getButtonProps({ disabled }),
+                'aria-label': undefined,
+              };
               return (
                 <ListBox
                   id={id}
+                  aria-label={ariaLabel}
                   type={type}
                   className={className}
                   disabled={disabled}
@@ -315,8 +324,8 @@ export default class MultiSelect extends React.Component {
                     tabIndex="0"
                     disabled={disabled}
                     aria-disabled={disabled}
-                    translateWithId={translateWithId}
-                    {...getButtonProps({ disabled })}>
+                    aria-labelledby={labelId}
+                    {...buttonProps}>
                     {selectedItem.length > 0 && (
                       <ListBox.Selection
                         clearSelection={!disabled ? clearSelection : noop}

From 07e02766bbb3cbc734c3091ce4a9438a7a60e430 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Tue, 17 Dec 2019 14:24:40 +0900
Subject: [PATCH 2/9] feat(ListBox): more field associations

---
 .../react/src/components/ComboBox/ComboBox.js   |  8 +++++++-
 .../react/src/components/Dropdown/Dropdown.js   | 12 ++++++++++--
 .../MultiSelect/FilterableMultiSelect.js        | 10 ++++++++--
 .../src/components/MultiSelect/MultiSelect.js   | 17 +++++++++++++----
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 8b578a090866..1c934218e52f 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -272,6 +272,9 @@ export default class ComboBox extends React.Component {
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
+    const comboBoxHelperId = !helperText
+      ? undefined
+      : `combobox-helper-text-${this.comboBoxInstanceId}`;
     const comboBoxLabelId = `combobox-label-${this.comboBoxInstanceId}`;
     const title = titleText ? (
       <label id={comboBoxLabelId} htmlFor={id} className={titleClasses}>
@@ -282,7 +285,9 @@ export default class ComboBox extends React.Component {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={comboBoxHelperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
     const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
     const comboBoxA11yId = `combobox-a11y-${this.comboBoxInstanceId}`;
@@ -327,6 +332,7 @@ export default class ComboBox extends React.Component {
               id={id}
               disabled={disabled}
               aria-labelledby={comboBoxLabelId}
+              aria-describedby={comboBoxHelperId}
               {...getButtonProps({
                 disabled,
                 onClick: this.onToggleClick(isOpen),
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 77658bfb153e..f05d560bd007 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -192,7 +192,11 @@ export default class Dropdown extends React.Component {
     });
 
     const dropdownId = `dropdown-${this.dropdownInstanceId}`;
+    const helperId = !helperText
+      ? undefined
+      : `dropdown-helper-text-${this.dropdownInstanceId}`;
     const labelId = `dropdown-label-${this.dropdownInstanceId}`;
+    const fieldLabelId = `dropdown-field-label-${this.dropdownInstanceId}`;
 
     const title = titleText ? (
       <span id={labelId} className={titleClasses}>
@@ -203,7 +207,9 @@ export default class Dropdown extends React.Component {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={helperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
     const wrapperClasses = cx(
       `${prefix}--dropdown__wrapper`,
@@ -272,9 +278,11 @@ export default class Dropdown extends React.Component {
                   tabIndex="0"
                   disabled={disabled}
                   aria-disabled={disabled}
-                  aria-labelledby={labelId}
+                  aria-labelledby={`${labelId} ${fieldLabelId}`}
+                  aria-describedby={helperId}
                   {...buttonProps}>
                   <span
+                    id={fieldLabelId}
                     className={`${prefix}--list-box__label`}
                     {...getLabelProps()}>
                     {selectedItem ? itemToString(selectedItem) : label}
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index cdcebfbef9ef..26abd5e746c1 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -285,7 +285,10 @@ export default class FilterableMultiSelect extends React.Component {
         [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
       }
     );
-    const labelId = `filterablemultiselect-${this.filterableMultiSelectInstanceId}`;
+    const helperId = !helperText
+      ? undefined
+      : `filterablemultiselect-helper-text-${this.filterableMultiSelectInstanceId}`;
+    const labelId = `filterablemultiselect-label-${this.filterableMultiSelectInstanceId}`;
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
@@ -298,7 +301,9 @@ export default class FilterableMultiSelect extends React.Component {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={helperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
     const inputClasses = cx(`${prefix}--text-input`, {
       [`${prefix}--text-input--empty`]: !this.state.inputValue,
@@ -359,6 +364,7 @@ export default class FilterableMultiSelect extends React.Component {
                     id={id}
                     disabled={disabled}
                     aria-labelledby={labelId}
+                    aria-describedby={helperId}
                     {...buttonProps}>
                     {selectedItem.length > 0 && (
                       <ListBox.Selection
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index ec1b89f4a13c..824e2c7c68ea 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -251,7 +251,11 @@ export default class MultiSelect extends React.Component {
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
-    const labelId = `multiselect-${this.multiSelectInstanceId}`;
+    const helperId = !helperText
+      ? undefined
+      : `multiselect-helper-text-${this.multiSelectInstanceId}`;
+    const labelId = `multiselect-label-${this.multiSelectInstanceId}`;
+    const fieldLabelId = `multiselect-field-label-${this.multiSelectInstanceId}`;
     const title = titleText ? (
       <span id={labelId} className={titleClasses}>
         {titleText}
@@ -261,7 +265,9 @@ export default class MultiSelect extends React.Component {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={helperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
 
     const input = (
@@ -324,7 +330,8 @@ export default class MultiSelect extends React.Component {
                     tabIndex="0"
                     disabled={disabled}
                     aria-disabled={disabled}
-                    aria-labelledby={labelId}
+                    aria-labelledby={`${labelId} ${fieldLabelId}`}
+                    aria-describedby={helperId}
                     {...buttonProps}>
                     {selectedItem.length > 0 && (
                       <ListBox.Selection
@@ -334,7 +341,9 @@ export default class MultiSelect extends React.Component {
                         disabled={disabled}
                       />
                     )}
-                    <span className={`${prefix}--list-box__label`}>
+                    <span
+                      id={fieldLabelId}
+                      className={`${prefix}--list-box__label`}>
                       {label}
                     </span>
                     <ListBox.MenuIcon

From e6081a04164aa5ab34584be87575acf51a6ae90c Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Tue, 17 Dec 2019 17:02:41 +0900
Subject: [PATCH 3/9] chore(test): update snapshot

---
 .../__snapshots__/Dropdown-test.js.snap        | 18 +++++++++---------
 .../__snapshots__/ListBox-test.js.snap         |  5 ++---
 .../__snapshots__/ListBoxField-test.js.snap    |  6 ++----
 .../FilterableMultiSelect-test.js.snap         |  5 ++---
 .../__snapshots__/MultiSelect-test.js.snap     |  6 +++---
 5 files changed, 18 insertions(+), 22 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 76be8658d7e3..fb6820685336 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -85,7 +85,7 @@ exports[`Dropdown should render 1`] = `
             aria-disabled={false}
             aria-expanded={false}
             aria-haspopup={true}
-            aria-label="open menu"
+            aria-labelledby="dropdown-label-1 dropdown-field-label-1"
             data-toggle={true}
             disabled={false}
             id="test-dropdown"
@@ -94,7 +94,6 @@ exports[`Dropdown should render 1`] = `
             onKeyDown={[Function]}
             role="button"
             tabIndex="0"
-            translateWithId={[Function]}
             type="button"
           >
             <div
@@ -102,7 +101,7 @@ exports[`Dropdown should render 1`] = `
               aria-disabled={false}
               aria-expanded={false}
               aria-haspopup={true}
-              aria-label="Open menu"
+              aria-labelledby="dropdown-label-1 dropdown-field-label-1"
               aria-owns={null}
               className="bx--list-box__field"
               data-toggle={true}
@@ -116,6 +115,7 @@ exports[`Dropdown should render 1`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-0-input"
+                id="dropdown-field-label-1"
               >
                 input
               </span>
@@ -260,7 +260,7 @@ exports[`Dropdown should render custom item components 1`] = `
             aria-disabled={false}
             aria-expanded={true}
             aria-haspopup={true}
-            aria-label="close menu"
+            aria-labelledby="dropdown-label-5 dropdown-field-label-5"
             data-toggle={true}
             disabled={false}
             id="test-dropdown"
@@ -269,7 +269,6 @@ exports[`Dropdown should render custom item components 1`] = `
             onKeyDown={[Function]}
             role="button"
             tabIndex="0"
-            translateWithId={[Function]}
             type="button"
           >
             <div
@@ -277,7 +276,7 @@ exports[`Dropdown should render custom item components 1`] = `
               aria-disabled={false}
               aria-expanded={true}
               aria-haspopup={true}
-              aria-label="Close menu"
+              aria-labelledby="dropdown-label-5 dropdown-field-label-5"
               aria-owns="test-dropdown__menu"
               className="bx--list-box__field"
               data-toggle={true}
@@ -291,6 +290,7 @@ exports[`Dropdown should render custom item components 1`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-4-input"
+                id="dropdown-field-label-5"
               >
                 input
               </span>
@@ -594,7 +594,7 @@ exports[`Dropdown should render with strings as items 1`] = `
             aria-disabled={false}
             aria-expanded={true}
             aria-haspopup={true}
-            aria-label="close menu"
+            aria-labelledby="dropdown-label-4 dropdown-field-label-4"
             data-toggle={true}
             disabled={false}
             id="test-dropdown"
@@ -603,7 +603,6 @@ exports[`Dropdown should render with strings as items 1`] = `
             onKeyDown={[Function]}
             role="button"
             tabIndex="0"
-            translateWithId={[Function]}
             type="button"
           >
             <div
@@ -611,7 +610,7 @@ exports[`Dropdown should render with strings as items 1`] = `
               aria-disabled={false}
               aria-expanded={true}
               aria-haspopup={true}
-              aria-label="Close menu"
+              aria-labelledby="dropdown-label-4 dropdown-field-label-4"
               aria-owns="test-dropdown__menu"
               className="bx--list-box__field"
               data-toggle={true}
@@ -625,6 +624,7 @@ exports[`Dropdown should render with strings as items 1`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-3-input"
+                id="dropdown-field-label-4"
               >
                 input
               </span>
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 c67c2767770d..06b19ddc1939 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
@@ -16,7 +16,7 @@ exports[`ListBox should render 1`] = `
             tabindex="-1"
           >
             <div
-              aria-label="Open menu"
+              aria-haspopup="listbox"
               class="bx--list-box__field"
               role="combobox"
               tabindex="-1"
@@ -44,11 +44,10 @@ exports[`ListBox should render 1`] = `
   >
     <ListBoxField
       id="test-listbox"
-      translateWithId={[Function]}
     >
       <div
         aria-controls={null}
-        aria-label="Open menu"
+        aria-haspopup="listbox"
         aria-owns={null}
         className="bx--list-box__field"
         role="combobox"
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
index f38cfc0fa158..74fbb284ea63 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
@@ -3,11 +3,10 @@
 exports[`ListBoxField should render 1`] = `
 <ListBoxField
   id="test-listbox"
-  translateWithId={[Function]}
 >
   <div
     aria-controls={null}
-    aria-label="Open menu"
+    aria-haspopup="listbox"
     aria-owns={null}
     className="bx--list-box__field"
     role="combobox"
@@ -64,12 +63,11 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = `
 <ListBoxField
   aria-expanded={true}
   id="test-listbox"
-  translateWithId={[Function]}
 >
   <div
     aria-controls="test-listbox__menu"
     aria-expanded={true}
-    aria-label="Close menu"
+    aria-haspopup="listbox"
     aria-owns="test-listbox__menu"
     className="bx--list-box__field"
     role="combobox"
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 6daa65520edd..f76f31e7fc3f 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
@@ -96,7 +96,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
             <ListBoxField
               aria-expanded={false}
               aria-haspopup={true}
-              aria-label="open menu"
+              aria-labelledby="filterablemultiselect-label-1"
               data-toggle={true}
               disabled={false}
               id="test-filterable-multiselect"
@@ -104,14 +104,13 @@ exports[`MultiSelect.Filterable should render 1`] = `
               onClick={[Function]}
               onKeyDown={[Function]}
               role="button"
-              translateWithId={[Function]}
               type="button"
             >
               <div
                 aria-controls={null}
                 aria-expanded={false}
                 aria-haspopup={true}
-                aria-label="Open menu"
+                aria-labelledby="filterablemultiselect-label-1"
                 aria-owns={null}
                 className="bx--list-box__field"
                 data-toggle={true}
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 0e5d1ffebcff..919309c2317a 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
@@ -97,7 +97,7 @@ exports[`MultiSelect should render 1`] = `
               aria-disabled={false}
               aria-expanded={false}
               aria-haspopup={true}
-              aria-label="open menu"
+              aria-labelledby="multiselect-label-1 multiselect-field-label-1"
               data-toggle={true}
               disabled={false}
               id="test-multiselect"
@@ -106,7 +106,6 @@ exports[`MultiSelect should render 1`] = `
               onKeyDown={[Function]}
               role="button"
               tabIndex="0"
-              translateWithId={[Function]}
               type="button"
             >
               <div
@@ -114,7 +113,7 @@ exports[`MultiSelect should render 1`] = `
                 aria-disabled={false}
                 aria-expanded={false}
                 aria-haspopup={true}
-                aria-label="Open menu"
+                aria-labelledby="multiselect-label-1 multiselect-field-label-1"
                 aria-owns={null}
                 className="bx--list-box__field"
                 data-toggle={true}
@@ -127,6 +126,7 @@ exports[`MultiSelect should render 1`] = `
               >
                 <span
                   className="bx--list-box__label"
+                  id="multiselect-field-label-1"
                 >
                   Field
                 </span>

From c416aa44e732ea3a6512194a98d83bed6b079b26 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Tue, 17 Dec 2019 17:25:57 +0900
Subject: [PATCH 4/9] test(ListBox): update tests

---
 packages/react/src/components/Dropdown/Dropdown-test.js | 2 +-
 packages/react/src/components/ListBox/test-helpers.js   | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index dc7fffe49877..0800892824fe 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -71,7 +71,7 @@ describe('Dropdown', () => {
 
     beforeEach(() => {
       wrapper = mount(<Dropdown titleText="Email Input" {...mockProps} />);
-      renderedLabel = wrapper.find('label');
+      renderedLabel = wrapper.find('span[className="bx--label"]');
     });
 
     it('renders a title', () => {
diff --git a/packages/react/src/components/ListBox/test-helpers.js b/packages/react/src/components/ListBox/test-helpers.js
index d584e5f7d224..7896fa3eafec 100644
--- a/packages/react/src/components/ListBox/test-helpers.js
+++ b/packages/react/src/components/ListBox/test-helpers.js
@@ -32,7 +32,6 @@ export const assertMenuOpen = (wrapper, mockProps) => {
     expect.objectContaining({
       'aria-expanded': true,
       'aria-haspopup': true,
-      'aria-label': 'Close menu',
     })
   );
 };
@@ -47,7 +46,6 @@ export const assertMenuClosed = wrapper => {
     expect.objectContaining({
       'aria-expanded': false,
       'aria-haspopup': true,
-      'aria-label': 'Open menu',
     })
   );
 };

From a44a9a43d9f2eba727b6c32f03810a8457371b90 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 18 Dec 2019 11:26:38 +0900
Subject: [PATCH 5/9] fix(MultiSelect): fix new DAP errors

---
 packages/react/src/components/MultiSelect/MultiSelect.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index b70938a31e1e..50f281cd2f49 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -326,6 +326,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

From bd877043dd81c0054d74d7f3a3b304a65b94dc9a Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 18 Dec 2019 14:35:10 +0900
Subject: [PATCH 6/9] chore(test): update snapshot

---
 .../__tests__/__snapshots__/MultiSelect-test.js.snap            | 2 ++
 1 file changed, 2 insertions(+)

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 919309c2317a..95f1bab59691 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,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,6 +87,7 @@ 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]}

From e4267b628538c01b8ba81137f41d947ee31d7cd1 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 8 Jan 2020 07:48:15 +0900
Subject: [PATCH 7/9] fix(Dropdown): fix duplicated ID

---
 packages/react/src/components/Dropdown/Dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 56ac1c13acef..882b8ab377e6 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -197,7 +197,7 @@ export default class Dropdown extends React.Component {
     const fieldLabelId = `dropdown-field-label-${this.dropdownInstanceId}`;
 
     const title = titleText ? (
-      <span id={id} className={titleClasses}>
+      <span className={titleClasses}>
         {titleText}
       </span>
     ) : null;

From db0f1b5ef4425bee866f58c39bab7872ed3deba4 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 9 Jan 2020 11:32:52 +0900
Subject: [PATCH 8/9] chore(Dropdown): format fix

---
 packages/react/src/components/Dropdown/Dropdown.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 882b8ab377e6..394bf9aacf02 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -197,9 +197,7 @@ export default class Dropdown extends React.Component {
     const fieldLabelId = `dropdown-field-label-${this.dropdownInstanceId}`;
 
     const title = titleText ? (
-      <span className={titleClasses}>
-        {titleText}
-      </span>
+      <span className={titleClasses}>{titleText}</span>
     ) : null;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${prefix}--form__helper-text--disabled`]: disabled,

From 4894b652f1b36511afa2fe89d20a09698e2d7f21 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 9 Jan 2020 17:35:17 +0900
Subject: [PATCH 9/9] fix(Dropdown): remove auto-generated ID

---
 .../react/src/components/Dropdown/Dropdown.js  |  9 ++++-----
 .../__snapshots__/Dropdown-test.js.snap        | 18 +++++++++---------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 394bf9aacf02..1883980e9757 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -190,11 +190,10 @@ export default class Dropdown extends React.Component {
       [`${prefix}--label--disabled`]: disabled,
     });
 
-    const helperId = !helperText
-      ? undefined
-      : `dropdown-helper-text-${this.dropdownInstanceId}`;
-    const labelId = `dropdown-label-${this.dropdownInstanceId}`;
-    const fieldLabelId = `dropdown-field-label-${this.dropdownInstanceId}`;
+    const helperId =
+      !id || !helperText ? undefined : `dropdown-helper-text-${id}`;
+    const labelId = `dropdown-label-${id}`;
+    const fieldLabelId = `dropdown-field-label-${id}`;
 
     const title = titleText ? (
       <span className={titleClasses}>{titleText}</span>
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 255d463a5f68..1ac1722a87b5 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -85,7 +85,7 @@ exports[`Dropdown should render 1`] = `
             aria-disabled={false}
             aria-expanded={false}
             aria-haspopup={true}
-            aria-labelledby="dropdown-label-1 dropdown-field-label-1"
+            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
             data-toggle={true}
             disabled={false}
             id="test-dropdown"
@@ -101,7 +101,7 @@ exports[`Dropdown should render 1`] = `
               aria-disabled={false}
               aria-expanded={false}
               aria-haspopup={true}
-              aria-labelledby="dropdown-label-1 dropdown-field-label-1"
+              aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
               aria-owns={null}
               className="bx--list-box__field"
               data-toggle={true}
@@ -115,7 +115,7 @@ exports[`Dropdown should render 1`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-0-input"
-                id="dropdown-field-label-1"
+                id="dropdown-field-label-test-dropdown"
               >
                 input
               </span>
@@ -260,7 +260,7 @@ exports[`Dropdown should render custom item components 1`] = `
             aria-disabled={false}
             aria-expanded={true}
             aria-haspopup={true}
-            aria-labelledby="dropdown-label-5 dropdown-field-label-5"
+            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
             data-toggle={true}
             disabled={false}
             id="test-dropdown"
@@ -276,7 +276,7 @@ exports[`Dropdown should render custom item components 1`] = `
               aria-disabled={false}
               aria-expanded={true}
               aria-haspopup={true}
-              aria-labelledby="dropdown-label-5 dropdown-field-label-5"
+              aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
               aria-owns="test-dropdown__menu"
               className="bx--list-box__field"
               data-toggle={true}
@@ -290,7 +290,7 @@ exports[`Dropdown should render custom item components 1`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-4-input"
-                id="dropdown-field-label-5"
+                id="dropdown-field-label-test-dropdown"
               >
                 input
               </span>
@@ -594,7 +594,7 @@ exports[`Dropdown should render with strings as items 1`] = `
             aria-disabled={false}
             aria-expanded={true}
             aria-haspopup={true}
-            aria-labelledby="dropdown-label-4 dropdown-field-label-4"
+            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
             data-toggle={true}
             disabled={false}
             id="test-dropdown"
@@ -610,7 +610,7 @@ exports[`Dropdown should render with strings as items 1`] = `
               aria-disabled={false}
               aria-expanded={true}
               aria-haspopup={true}
-              aria-labelledby="dropdown-label-4 dropdown-field-label-4"
+              aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
               aria-owns="test-dropdown__menu"
               className="bx--list-box__field"
               data-toggle={true}
@@ -624,7 +624,7 @@ exports[`Dropdown should render with strings as items 1`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-3-input"
-                id="dropdown-field-label-4"
+                id="dropdown-field-label-test-dropdown"
               >
                 input
               </span>