Update how aria-describedby is generated

Author: hallzac2

packages/react-select/src/Select.tsx

@@ -1235,6 +1235,25 @@ export default class Select<
     this.setState({ ariaSelection: { value, ...actionMeta } });
   };
 
+  getAriaDescribedByValue = () => {
+    const { ariaSelection } = this.state;
+    const ariaDescribedByIds = [];
+
+    if (this.hasValue() && ariaSelection?.action === 'initial-input-focus') {
+      ariaDescribedByIds.push(this.getElementId('live-region'));
+    }
+
+    if (!this.hasValue()) {
+      ariaDescribedByIds.push(this.getElementId('placeholder'));
+    }
+
+    if (this.props['aria-describedby'] != null) {
+      ariaDescribedByIds.push(this.props['aria-describedby']);
+    }
+
+    return ariaDescribedByIds.join(' ');
+  };
+
   hasValue() {
     const { selectValue } = this.state;
     return selectValue.length > 0;
@@ -1710,7 +1729,7 @@ export default class Select<
       required,
     } = this.props;
     const { Input } = this.getComponents();
-    const { inputIsHidden, ariaSelection } = this.state;
+    const { inputIsHidden } = this.state;
     const { commonProps } = this;
 
     const id = inputId || this.getElementId('input');
@@ -1736,22 +1755,9 @@ export default class Select<
       ...(!isSearchable && {
         'aria-readonly': true,
       }),
-      ...(this.hasValue()
-        ? ariaSelection?.action === 'initial-input-focus' && {
-            'aria-describedby': this.getElementId('live-region'),
-          }
-        : {
-            'aria-describedby': this.getElementId('placeholder'),
-          }),
+      'aria-describedby': this.getAriaDescribedByValue(),
     };
 
-    // aria-describedby allows for multiple IDs to be specified, separated by a space
-    if (this.props['aria-describedby'] != null) {
-      ariaAttributes[
-        'aria-describedby'
-      ] += ` ${this.props['aria-describedby']}`;
-    }
-
     if (!isSearchable) {
       // use a dummy input to maintain focus/blur functionality
       return (