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}