[terra-from-single-select] - Fixes screen reader issue

packages/terra-form-select/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed VoiceOver reading the selected item twice in `terra-form-single-select`.
+
 ## 6.53.0 - (January 2, 2024)
 
 * Changed

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

@@ -506,7 +506,6 @@ class Frame extends React.Component {
         aria-label={this.mainLabel()}
         aria-haspopup={!disabled ? 'true' : undefined}
         aria-describedby={ariaDescribedBy}
-        aria-owns={this.state.isOpen ? selectMenuId : undefined}
         aria-required={required}
         className={selectClasses}
         onBlur={this.handleBlur}
@@ -526,15 +525,11 @@ class Frame extends React.Component {
           <span id={descriptionId}>{this.renderDescriptionText()}</span>
         </div>
         {/* Added aria label to avoid announcing empty group by voice over in safari browser */}
-        <div className={cx('display')} aria-label={this.ariaLabel()} aria-hidden={disabled}>
+        <div className={cx('display')} aria-hidden={disabled}>
           {this.getDisplay(displayId, placeholderId)}
         </div>
         {this.renderToggleButton()}
-        <span
-          aria-live={SharedUtil.isSafari() ? 'polite' : 'off'}
-          className={cx('visually-hidden-component')}
-          ref={this.visuallyHiddenComponent}
-        />
+        {this.state.isOpen && <span aria-live={SharedUtil.isSafari() ? 'polite' : 'off'} className={cx('visually-hidden-component')} ref={this.visuallyHiddenComponent} />}
         {this.state.isOpen && (
           <Dropdown
             {...dropdownAttrs}

packages/terra-form-select/src/single/Menu.jsx

@@ -396,7 +396,7 @@ class Menu extends React.Component {
           variant: 'default',
           totalOptions: object.length,
           index: object.indexOf(option) + 1,
-          expandedStateText: this.state.expandedStateText,
+          expandedStateText: !(navigator.userAgent.indexOf('Edg') !== -1) ? this.state.expandedStateText : '',
           ofText: this.props.intl.formatMessage({ id: 'Terra.form.select.of' }),
           onMouseDown: () => { this.downOption = option; },
           onMouseUp: event => this.handleOptionClick(event, option),

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

@@ -89,7 +89,6 @@ exports[`Frame correctly applies the theme context className for default variant
   </div>
   <div
     aria-hidden="false"
-    aria-label=""
     class="display"
   >
     <div
@@ -108,10 +107,6 @@ exports[`Frame correctly applies the theme context className for default variant
       class="arrow-icon"
     />
   </div>
-  <span
-    aria-live="off"
-    class="visually-hidden-component"
-  />
 </div>
 `;
 

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

@@ -34,7 +34,6 @@ exports[`Select correctly applies the theme context className for default varian
   </div>
   <div
     aria-hidden="false"
-    aria-label=""
     class="display"
   >
     <div
@@ -53,10 +52,6 @@ exports[`Select correctly applies the theme context className for default varian
       class="arrow-icon"
     />
   </div>
-  <span
-    aria-live="off"
-    class="visually-hidden-component"
-  />
 </div>
 `;
 
@@ -658,7 +653,6 @@ exports[`Select should render a select with an optgroup and an option 1`] = `
   </div>
   <div
     aria-hidden="false"
-    aria-label=""
     class="display"
   >
     <div
@@ -677,10 +671,6 @@ exports[`Select should render a select with an optgroup and an option 1`] = `
       class="arrow-icon"
     />
   </div>
-  <span
-    aria-live="off"
-    class="visually-hidden-component"
-  />
 </div>
 `;
 
@@ -718,7 +708,6 @@ exports[`Select should render a select with an optgroup and multiple options 1`]
   </div>
   <div
     aria-hidden="false"
-    aria-label=""
     class="display"
   >
     <div
@@ -737,10 +726,6 @@ exports[`Select should render a select with an optgroup and multiple options 1`]
       class="arrow-icon"
     />
   </div>
-  <span
-    aria-live="off"
-    class="visually-hidden-component"
-  />
 </div>
 `;
 
@@ -778,7 +763,6 @@ exports[`Select should render a select with an option 1`] = `
   </div>
   <div
     aria-hidden="false"
-    aria-label=""
     class="display"
   >
     <div
@@ -797,10 +781,6 @@ exports[`Select should render a select with an option 1`] = `
       class="arrow-icon"
     />
   </div>
-  <span
-    aria-live="off"
-    class="visually-hidden-component"
-  />
 </div>
 `;
 
@@ -838,7 +818,6 @@ exports[`Select should render a select with multiple options 1`] = `
   </div>
   <div
     aria-hidden="false"
-    aria-label=""
     class="display"
   >
     <div
@@ -857,10 +836,6 @@ exports[`Select should render a select with multiple options 1`] = `
       class="arrow-icon"
     />
   </div>
-  <span
-    aria-live="off"
-    class="visually-hidden-component"
-  />
 </div>
 `;