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.
carbon-design-system · Jan 9, 2020 · f87a204 · f87a204
1 parent 9c1a4ee
commit f87a204
Show file tree

Hide file tree

Showing 12 changed files with 158 additions and 133 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -280,16 +280,22 @@ 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;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${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
@@ -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
@@ -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
@@ -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,15 +94,14 @@ exports[`Dropdown should render 1`] = `
             onKeyDown={[Function]}
             role="button"
             tabIndex="0"
-            translateWithId={[Function]}
             type="button"
           >
             <div
               aria-controls={null}
               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,15 +269,14 @@ exports[`Dropdown should render custom item components 1`] = `
             onKeyDown={[Function]}
             role="button"
             tabIndex="0"
-            translateWithId={[Function]}
             type="button"
           >
             <div
               aria-controls="test-dropdown__menu"
               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,15 +603,14 @@ exports[`Dropdown should render with strings as items 1`] = `
             onKeyDown={[Function]}
             role="button"
             tabIndex="0"
-            translateWithId={[Function]}
             type="button"
           >
             <div
               aria-controls="test-dropdown__menu"
               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
@@ -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
@@ -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"