[terra-form-select] Combobox A11Y Audit Issues (#3976)

Co-authored-by: Pravinkumar K S <[email protected]>
Co-authored-by: PK106552 <[email protected]>

packages/terra-core-docs/CHANGELOG.md

@@ -9,6 +9,8 @@
 
 * Added
   * Added visual label and associated with input field using 'for' and 'id'.
+  * Added 'ariaLabel' attribute for `terra-form-select` examples.
+
 ## 1.51.0 - (November 16, 2023)
 
 * Changed

packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/combobox/Combobox.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import Combobox from 'terra-form-select/lib/Combobox';
+import Field from 'terra-form-field';
 import classNames from 'classnames/bind';
 import styles from '../FormSelectDocCommon.module.scss';
 
 const cx = classNames.bind(styles);
 
 const ComboboxExample = () => (
-  <Combobox placeholder="Select a color" className={cx('form-select')}>
-    <Combobox.Option value="blue" display="Blue" />
-    <Combobox.Option value="green" display="Green" />
-    <Combobox.Option value="purple" display="Purple" />
-    <Combobox.Option value="red" display="Red" />
-    <Combobox.Option value="violet" display="Violet" />
-  </Combobox>
+  <Field
+    label="Colors"
+    htmlFor="color-field-1"
+  >
+    <Combobox placeholder="Select a color" ariaLabel="Colors" className={cx('form-select')} inputId="color-field-1">
+      <Combobox.Option value="blue" display="Blue" />
+      <Combobox.Option value="green" display="Green" />
+      <Combobox.Option value="purple" display="Purple" />
+      <Combobox.Option value="red" display="Red" />
+      <Combobox.Option value="violet" display="Violet" />
+    </Combobox>
+  </Field>
 );
 
 export default ComboboxExample;

packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/combobox/Invalid.jsx

@@ -14,5 +14,4 @@ const InvalidExample = () => (
     <Combobox.Option value="violet" display="Violet" />
   </Combobox>
 );
-
 export default InvalidExample;

packages/terra-form-select/CHANGELOG.md

@@ -8,6 +8,8 @@
 ## 6.51.0 - (November 21, 2023)
 
 * Added
+  * Added 'aria-invalid' attribute for `terra-form-select-combobox`.
+  * Updated auto assign placeholder text to `aria-label` in `terra-form-select-combobox` and `terra-form-search-select`.
   * Added 'aria-invalid' attribute for `terra-form-select-combobox`
 
 ## 6.50.0 - (November 13, 2023)

packages/terra-form-select/src/combobox/Frame.jsx

@@ -143,6 +143,7 @@ const defaultProps = {
   totalOptions: undefined,
   value: undefined,
   inputId: undefined,
+  ariaLabel: undefined,
   allowClear: false,
 };
 
@@ -414,7 +415,7 @@ class Frame extends React.Component {
   getDisplay(ariaDescribedBy, id) {
     const { hasSearchChanged, searchValue } = this.state;
     const {
-      disabled, display, placeholder, required, inputId,
+      disabled, display, placeholder, required, inputId, isInvalid,
     } = this.props;
 
     const inputAttrs = {
@@ -429,7 +430,9 @@ class Frame extends React.Component {
       'aria-describedby': ariaDescribedBy,
       'aria-disabled': disabled,
       'aria-owns': this.state.isOpen ? id : undefined,
+      'aria-controls': this.state.isOpen ? id : undefined,
       'aria-expanded': !disabled && this.state.isOpen,
+      'aria-invalid': isInvalid,
       type: 'text',
       className: cx('search-input'),
       required,
@@ -537,18 +540,22 @@ class Frame extends React.Component {
    * Falls back to the string 'Search' if no label is provided
    */
   ariaLabel() {
-    const { ariaLabel, disabled, intl } = this.props;
+    const {
+      ariaLabel,
+      disabled,
+      placeholder,
+      intl,
+    } = this.props;
 
-    const defaultAriaLabel = intl.formatMessage({ id: 'Terra.form.select.ariaLabel' });
     const dimmed = intl.formatMessage({ id: 'Terra.form.select.dimmed' });
 
     // VO on iOS doesn't do a good job of announcing disabled stated. Here we append the phrase that
     // VO associates with disabled form controls.
     if ('ontouchstart' in window && disabled) {
-      return ariaLabel === undefined ? `${defaultAriaLabel} ${dimmed}` : `${ariaLabel} ${dimmed}`;
+      return ariaLabel === undefined ? `${placeholder}, ${dimmed}` : `${ariaLabel}, ${placeholder}, ${dimmed}`;
     }
 
-    return ariaLabel === undefined ? defaultAriaLabel : ariaLabel;
+    return ariaLabel === undefined ? placeholder : `${ariaLabel}, ${placeholder}`;
   }
 
   /**

packages/terra-form-select/src/search/Frame.jsx

@@ -419,6 +419,7 @@ class Frame extends React.Component {
       'aria-describedby': ariaDescribedBy,
       'aria-disabled': disabled,
       'aria-owns': this.state.isOpen ? id : undefined,
+      'aria-controls': this.state.isOpen ? id : undefined,
       'aria-expanded': !disabled && this.state.isOpen,
       type: 'text',
       className: cx('search-input', { 'is-hidden': FrameUtil.shouldHideSearch(this.props, this.state) }),

packages/terra-form-select/tests/jest/__snapshots__/Frame.test.jsx.snap

@@ -14,9 +14,7 @@ exports[`Frame correctly applies the theme context className for combobox varian
   >
     <span
       id="terra-select-screen-reader-label-6"
-    >
-      Terra.form.select.ariaLabel
-    </span>
+    />
     <span
       id="terra-select-screen-reader-description-7"
     >
@@ -33,7 +31,7 @@ exports[`Frame correctly applies the theme context className for combobox varian
         aria-describedby="terra-select-screen-reader-description-7"
         aria-disabled="false"
         aria-expanded="false"
-        aria-label="Terra.form.select.ariaLabel"
+        aria-invalid="false"
         aria-required="false"
         class="search-input"
         role="combobox"