fix: lack of disabled attribute on select element causing color contr…

…ast issue (#5666)
JedWatson · Oct 2, 2023 · 224a8f0 · 224a8f0
1 parent d598ac6
commit 224a8f0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/lemon-deers-taste.md 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
@@ -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
@@ -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
@@ -87,6 +87,7 @@ const Control = <
         'control--menu-is-open': menuIsOpen,
       })}
       {...innerProps}
+      aria-disabled={isDisabled || undefined}
     >
       {children}
     </div>