Removed aria-hidden and refactored area-label logic

cerner · Apr 29, 2024 · f8075d5 · f8075d5
1 parent d66efa8
commit f8075d5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/terra-form-select/src/MultiSelect.jsx b/packages/terra-form-select/src/MultiSelect.jsx
@@ -137,7 +137,7 @@ class MultiSelect extends React.Component {
 
     this.state = {
       value: SelectUtil.defaultValue({ defaultValue, value, multiple: true }),
-      ariaHidden: false,
+      isInputFocused: false,
     };
     this.inputRef = null;
     this.display = this.display.bind(this);
@@ -196,9 +196,9 @@ class MultiSelect extends React.Component {
     }
   }
 
-  handleFocus() { this.setState({ ariaHidden: true }); }
+  handleFocus() { this.setState({ isInputFocused: true }); }
 
-  handleBlur() { this.setState({ ariaHidden: false }); }
+  handleBlur() { this.setState({ isInputFocused: false }); }
 
   /**
    * Receives the reference to the input element from the Frame component.
@@ -227,7 +227,7 @@ class MultiSelect extends React.Component {
         key={tag}
         onDeselect={this.handleDeselect}
         disabled={this.props.disabled}
-        ariaHidden={this.state.ariaHidden}
+        isInputFocused={this.state.isInputFocused}
         inputRef={this.inputRef}
       >
         {SelectUtil.valueDisplay(this.props, tag)}

diff --git a/packages/terra-form-select/src/shared/_Tag.jsx b/packages/terra-form-select/src/shared/_Tag.jsx
@@ -36,15 +36,15 @@ const propTypes = {
     focus: PropTypes.instanceOf(Element),
   }),
   /**
-   * Specifies whether the tag should have aria-hidden attribute set to true or false.
+   * Specifies whether the input focus is set to true or false.
    * Default is false.
    */
-  ariaHidden: PropTypes.bool,
+  isInputFocused: PropTypes.bool,
 };
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 const Tag = ({
-  children, onDeselect, value, disabled, intl, inputRef, ariaHidden,
+  children, onDeselect, value, disabled, intl, inputRef, isInputFocused,
 }) => {
   const theme = React.useContext(ThemeContext);
   const tagRef = useRef(null);
@@ -72,6 +72,8 @@ const Tag = ({
       }
     }
   };
+
+  const attributes = isInputFocused ? '' : { 'aria-label': intl.formatMessage({ id: 'Terra.form.select.deselect' }, { text: children }) };
   return (
     <li className={cx('tag', theme.className)} ref={tagRef}>
       <span className={cx('display')}>
@@ -84,8 +86,7 @@ const Tag = ({
         onClick={() => { if (!disabled) onDeselect(value); }}
         tabIndex={!disabled ? 0 : -1}
         role="button"
-        aria-label={intl.formatMessage({ id: 'Terra.form.select.deselect' }, { text: children })}
-        aria-hidden={ariaHidden}
+        {...attributes}
       >
         <span className={cx('icon')} />
       </span>