From 224a8f0d01a5b6200ff10280a0d7a9b613383032 Mon Sep 17 00:00:00 2001
From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com>
Date: Sun, 1 Oct 2023 23:44:32 -0400
Subject: [PATCH] fix: lack of disabled attribute on select element causing
 color contrast issue (#5666)

---
 .changeset/lemon-deers-taste.md                  | 5 +++++
 cypress/fixtures/selectors.json                  | 1 +
 cypress/integration/single-select.spec.ts        | 6 +++++-
 packages/react-select/src/components/Control.tsx | 1 +
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lemon-deers-taste.md

diff --git a/.changeset/lemon-deers-taste.md b/.changeset/lemon-deers-taste.md
new file mode 100644
index 0000000000..30b9ac6404
--- /dev/null
+++ b/.changeset/lemon-deers-taste.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Add aria-disabled to select's control component.
diff --git a/cypress/fixtures/selectors.json b/cypress/fixtures/selectors.json
index 9c6ecbdaba..da975f7e1c 100644
--- a/cypress/fixtures/selectors.json
+++ b/cypress/fixtures/selectors.json
@@ -10,6 +10,7 @@
   "indicatorClear": ".react-select__clear-indicator",
   "indicatorDropdown": ".react-select__dropdown-indicator",
   "menu": ".react-select__menu",
+  "control": ".react-select__control",
   "menuOption": ".react-select__option",
   "noOptionsValue": ".react-select__menu-notice--no-options",
   "placeholder": ".react-select__placeholder",
diff --git a/cypress/integration/single-select.spec.ts b/cypress/integration/single-select.spec.ts
index d4700dc154..2e7effeca5 100644
--- a/cypress/integration/single-select.spec.ts
+++ b/cypress/integration/single-select.spec.ts
@@ -107,7 +107,11 @@ describe('Single Select', () => {
           .click({ force: true })
           .find('input')
           .should('exist')
-          .should('be.disabled');
+          .should('be.disabled')
+          // control should have aria-disabled
+          .get(selector.singleBasicSelect)
+          .find(selector.control)
+          .should('have.attr', 'aria-disabled', 'true');
       });
 
       it(`Should filter options when searching in view: ${viewport}`, () => {
diff --git a/packages/react-select/src/components/Control.tsx b/packages/react-select/src/components/Control.tsx
index d8e85c3db0..882390f9a4 100644
--- a/packages/react-select/src/components/Control.tsx
+++ b/packages/react-select/src/components/Control.tsx
@@ -87,6 +87,7 @@ const Control = <
         'control--menu-is-open': menuIsOpen,
       })}
       {...innerProps}
+      aria-disabled={isDisabled || undefined}
     >
       {children}
     </div>