From 6edff683bbef578795d91b099c54165f86e3de3f Mon Sep 17 00:00:00 2001
From: Ian Goldfarb <ian@northstarmoney.com>
Date: Wed, 6 Mar 2024 15:05:24 -0800
Subject: [PATCH 1/2] add option for custom aria-describedby

---
 packages/react-select/src/Select.tsx          |  4 +++-
 .../src/__tests__/Select.test.tsx             | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 798f6126b2..cfcdcc7c7e 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -87,6 +87,8 @@ export interface Props<
   'aria-labelledby'?: AriaAttributes['aria-labelledby'];
   /** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive */
   'aria-live'?: AriaAttributes['aria-live'];
+  /** HTML ID of an element that should be used as a description (for assistive tech) */
+  'aria-describedby'?: AriaAttributes['aria-describedby'];
   /** Customise the messages used by the aria-live component */
   ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
   /** Focus the control when it is mounted */
@@ -1736,7 +1738,7 @@ export default class Select<
             'aria-describedby': this.getElementId('live-region'),
           }
         : {
-            'aria-describedby': this.getElementId('placeholder'),
+            'aria-describedby': this.props['aria-describedby'] || this.getElementId('placeholder'),
           }),
     };
 
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 740935512a..abce3dd79b 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2211,6 +2211,28 @@ test('accessibility > aria-activedescendant should not exist if hideSelectedOpti
   ).toBe('');
 });
 
+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')
+    ).toBe('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-labelledby prop',
   ({ props = { ...BASIC_PROPS, 'aria-labelledby': 'testing' } }) => {

From 3344a08d28bd350afc10df8a3a4e03ee0c479d67 Mon Sep 17 00:00:00 2001
From: Ian Goldfarb <ian@northstarmoney.com>
Date: Thu, 18 Apr 2024 10:59:02 -0700
Subject: [PATCH 2/2] prettier fix for line length

---
 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 cfcdcc7c7e..bbac32cfe8 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1738,7 +1738,9 @@ export default class Select<
             'aria-describedby': this.getElementId('live-region'),
           }
         : {
-            'aria-describedby': this.props['aria-describedby'] || this.getElementId('placeholder'),
+            'aria-describedby':
+              this.props['aria-describedby'] ||
+              this.getElementId('placeholder'),
           }),
     };