From 2cc8a73e0f1dc54080714c073d25c95e6c36e9e2 Mon Sep 17 00:00:00 2001
From: Zackary Hall <z.hall@guideline.com>
Date: Thu, 27 Feb 2025 14:48:18 -0700
Subject: [PATCH 1/5] Add aria-describedby prop

---
 packages/react-select/src/Select.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index dadde14dd2..2d678a01ba 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -78,7 +78,9 @@ export interface Props<
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > {
-  /** HTML ID of an element containing an error message related to the input**/
+  /** HTML ID(s) of the element(s) that describe the input. */
+  'aria-describedby'?: AriaAttributes['aria-describedby'];
+  /** HTML ID of an element containing an error message related to the input */
   'aria-errormessage'?: AriaAttributes['aria-errormessage'];
   /** Indicate if the value entered in the field is invalid **/
   'aria-invalid'?: AriaAttributes['aria-invalid'];
@@ -1743,6 +1745,11 @@ export default class Select<
           }),
     };
 
+    // 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 (

From ce0b2f5880388fb967359d610d50b1a99a80880a Mon Sep 17 00:00:00 2001
From: Zackary Hall <z.hall@guideline.com>
Date: Thu, 27 Feb 2025 14:53:09 -0700
Subject: [PATCH 2/5] Implement tests

---
 .../src/__tests__/Select.test.tsx             | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 0313149095..ec1b81ab50 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2252,6 +2252,28 @@ cases(
   }
 );
 
+cases(
+  'accessibility > passes through aria-describedby prop',
+  ({ props = { ...BASIC_PROPS, 'aria-describedby': 'testing' } }) => {
+    let { container } = render(<Select {...props} />);
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-describedby')
+    ).toContain('testing');
+  },
+  {
+    'single select > should pass aria-describedby prop down to input': {},
+    'multi select > should pass aria-describedby prop down to input': {
+      props: {
+        ...BASIC_PROPS,
+        'aria-describedby': 'testing',
+        isMulti: true,
+      },
+    },
+  }
+);
+
 cases(
   'accessibility > passes through aria-errormessage prop',
   ({ props = { ...BASIC_PROPS, 'aria-errormessage': 'error-message' } }) => {

From 9cef6baff8601558e568295c827b8cc03a72ab3e Mon Sep 17 00:00:00 2001
From: Zackary Hall <z.hall@guideline.com>
Date: Thu, 27 Feb 2025 14:59:05 -0700
Subject: [PATCH 3/5] Add changeset

---
 .changeset/friendly-pans-buy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-pans-buy.md

diff --git a/.changeset/friendly-pans-buy.md b/.changeset/friendly-pans-buy.md
new file mode 100644
index 0000000000..a7c3903e3a
--- /dev/null
+++ b/.changeset/friendly-pans-buy.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Add aria-describedby prop to Select

From 7ee6e0643e78188e82d4bf64fa1c0f627ec22ef6 Mon Sep 17 00:00:00 2001
From: Zackary Hall <z.hall@guideline.com>
Date: Thu, 27 Feb 2025 15:03:00 -0700
Subject: [PATCH 4/5] Run prettier on code

---
 packages/react-select/src/Select.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 2d678a01ba..eedc91b4e4 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1747,7 +1747,9 @@ export default class Select<
 
     // 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']}`;
+      ariaAttributes[
+        'aria-describedby'
+      ] += ` ${this.props['aria-describedby']}`;
     }
 
     if (!isSearchable) {

From 973ba9541eb80a49a8013ec043dae6063cf124fe Mon Sep 17 00:00:00 2001
From: Zackary Hall <z.hall@guideline.com>
Date: Fri, 28 Feb 2025 08:01:38 -0700
Subject: [PATCH 5/5] Update how aria-describedby is generated

---
 packages/react-select/src/Select.tsx | 36 ++++++++++++++++------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index eedc91b4e4..bf99ec7a2a 100644
--- a/packages/react-select/src/Select.tsx
+++ b/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 (