From f87a204f6d1d4a0abbc69e25c595424aaa6d7e40 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 9 Jan 2020 17:58:01 +0900
Subject: [PATCH] feat(ListBox): fix labels of trigger buttons (#4820)

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 |  13 +-
 .../src/components/Dropdown/Dropdown-test.js  |   2 +-
 .../react/src/components/Dropdown/Dropdown.js | 143 ++++++++++--------
 .../__snapshots__/Dropdown-test.js.snap       |  18 +--
 .../src/components/ListBox/ListBoxField.js    |  34 +----
 .../__snapshots__/ListBox-test.js.snap        |   5 +-
 .../__snapshots__/ListBoxField-test.js.snap   |   6 +-
 .../src/components/ListBox/test-helpers.js    |   2 -
 .../MultiSelect/FilterableMultiSelect.js      |  23 ++-
 .../src/components/MultiSelect/MultiSelect.js |  32 +++-
 .../FilterableMultiSelect-test.js.snap        |   5 +-
 .../__snapshots__/MultiSelect-test.js.snap    |   8 +-
 12 files changed, 158 insertions(+), 133 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index b9a273de236e..89adac40f162 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -280,8 +280,12 @@ 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 htmlFor={id} className={titleClasses}>
+      <label id={comboBoxLabelId} htmlFor={id} className={titleClasses}>
         {titleText}
       </label>
     ) : null;
@@ -289,7 +293,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}`;
@@ -335,7 +341,8 @@ export default class ComboBox extends React.Component {
             <ListBox.Field
               id={id}
               disabled={disabled}
-              translateWithId={translateWithId}
+              aria-labelledby={comboBoxLabelId}
+              aria-describedby={comboBoxHelperId}
               {...getButtonProps({
                 disabled,
                 onClick: this.onToggleClick(isOpen),
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/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 82fcde2dc14d..1883980e9757 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -190,16 +190,21 @@ export default class Dropdown extends React.Component {
       [`${prefix}--label--disabled`]: disabled,
     });
 
+    const helperId =
+      !id || !helperText ? undefined : `dropdown-helper-text-${id}`;
+    const labelId = `dropdown-label-${id}`;
+    const fieldLabelId = `dropdown-field-label-${id}`;
+
     const title = titleText ? (
-      <label htmlFor={id} className={titleClasses}>
-        {titleText}
-      </label>
+      <span className={titleClasses}>{titleText}</span>
     ) : null;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${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`,
@@ -234,69 +239,77 @@ export default class Dropdown extends React.Component {
             getItemProps,
             getLabelProps,
             toggleMenu,
-          }) => (
-            <ListBox
-              type={type}
-              size={size}
-              id={id}
-              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
+          }) => {
+            const buttonProps = {
+              ...getButtonProps({
+                onKeyDown: event => {
+                  if (match(event, keys.Enter)) {
+                    toggleMenu();
+                  }
+                },
+                disabled,
+              }),
+              'aria-label': undefined,
+            };
+            return (
+              <ListBox
+                type={type}
+                size={size}
                 id={id}
-                tabIndex="0"
+                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={id} 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} ${fieldLabelId}`}
+                  aria-describedby={helperId}
+                  {...buttonProps}>
+                  <span
+                    id={fieldLabelId}
+                    className={`${prefix}--list-box__label`}
+                    {...getLabelProps()}>
+                    {selectedItem ? itemToString(selectedItem) : label}
+                  </span>
+                  <ListBox.MenuIcon
+                    isOpen={isOpen}
+                    translateWithId={translateWithId}
+                  />
+                </ListBox.Field>
+                {isOpen && (
+                  <ListBox.Menu aria-labelledby={id} 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/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
index f7149c93ed39..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-label="open menu"
+            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
             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-test-dropdown dropdown-field-label-test-dropdown"
               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-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-label="close menu"
+            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
             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-test-dropdown dropdown-field-label-test-dropdown"
               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-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-label="close menu"
+            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
             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-test-dropdown dropdown-field-label-test-dropdown"
               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-test-dropdown"
               >
                 input
               </span>
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/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/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',
     })
   );
 };
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index 9d51f7f336b2..edf94915dca4 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,
@@ -155,6 +158,7 @@ export default class FilterableMultiSelect extends React.Component {
 
   constructor(props) {
     super(props);
+    this.filterableMultiSelectInstanceId = getInstanceId();
     this.state = {
       highlightedIndex: null,
       isOpen: props.open,
@@ -287,11 +291,15 @@ export default class FilterableMultiSelect extends React.Component {
         [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
       }
     );
+    const helperId = !helperText
+      ? undefined
+      : `filterablemultiselect-helper-text-${this.filterableMultiSelectInstanceId}`;
+    const labelId = `filterablemultiselect-label-${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;
@@ -299,7 +307,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,
@@ -343,6 +353,10 @@ export default class FilterableMultiSelect extends React.Component {
                     selectedItem.length > 0,
                 }
               );
+              const buttonProps = {
+                ...getButtonProps({ disabled }),
+                'aria-label': undefined,
+              };
               return (
                 <ListBox
                   className={className}
@@ -356,8 +370,9 @@ export default class FilterableMultiSelect extends React.Component {
                   <ListBox.Field
                     id={id}
                     disabled={disabled}
-                    translateWithId={translateWithId}
-                    {...getButtonProps({ disabled })}>
+                    aria-labelledby={labelId}
+                    aria-describedby={helperId}
+                    {...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 e5e965129f6c..50f281cd2f49 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 = {
@@ -156,6 +158,7 @@ export default class MultiSelect extends React.Component {
 
   constructor(props) {
     super(props);
+    this.multiSelectInstanceId = getInstanceId();
     this.state = {
       highlightedIndex: null,
       isOpen: props.open,
@@ -254,16 +257,23 @@ export default class MultiSelect extends React.Component {
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
+    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 ? (
-      <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,
     });
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={helperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
 
     const input = (
@@ -300,9 +310,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}
                   size={size}
                   className={className}
@@ -311,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
@@ -322,8 +339,9 @@ export default class MultiSelect extends React.Component {
                     tabIndex="0"
                     disabled={disabled}
                     aria-disabled={disabled}
-                    translateWithId={translateWithId}
-                    {...getButtonProps({ disabled })}>
+                    aria-labelledby={`${labelId} ${fieldLabelId}`}
+                    aria-describedby={helperId}
+                    {...buttonProps}>
                     {selectedItem.length > 0 && (
                       <ListBox.Selection
                         clearSelection={!disabled ? clearSelection : noop}
@@ -332,7 +350,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
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..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]}
@@ -97,7 +99,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 +108,6 @@ exports[`MultiSelect should render 1`] = `
               onKeyDown={[Function]}
               role="button"
               tabIndex="0"
-              translateWithId={[Function]}
               type="button"
             >
               <div
@@ -114,7 +115,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 +128,7 @@ exports[`MultiSelect should render 1`] = `
               >
                 <span
                   className="bx--list-box__label"
+                  id="multiselect-field-label-1"
                 >
                   Field
                 </span>