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 1/2] 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} From b53e64754493479cd5506879392d4e3e726025c5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 2 Oct 2023 14:56:14 +1100 Subject: [PATCH 2/2] Version Packages (#5764) Co-authored-by: github-actions[bot] --- .changeset/lemon-deers-taste.md | 5 ----- packages/react-select/CHANGELOG.md | 6 ++++++ packages/react-select/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/lemon-deers-taste.md diff --git a/.changeset/lemon-deers-taste.md b/.changeset/lemon-deers-taste.md deleted file mode 100644 index 30b9ac6404..0000000000 --- a/.changeset/lemon-deers-taste.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'react-select': patch ---- - -Add aria-disabled to select's control component. diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md index c1df62f11c..a00c78f411 100644 --- a/packages/react-select/CHANGELOG.md +++ b/packages/react-select/CHANGELOG.md @@ -1,5 +1,11 @@ # react-select +## 5.7.7 + +### Patch Changes + +- [`224a8f0d`](https://github.com/JedWatson/react-select/commit/224a8f0d01a5b6200ff10280a0d7a9b613383032) [#5666](https://github.com/JedWatson/react-select/pull/5666) Thanks [@yhy-1](https://github.com/yhy-1)! - Add aria-disabled to select's control component. + ## 5.7.6 ### Patch Changes diff --git a/packages/react-select/package.json b/packages/react-select/package.json index 6a52557e6f..6d4ae7bde6 100644 --- a/packages/react-select/package.json +++ b/packages/react-select/package.json @@ -1,6 +1,6 @@ { "name": "react-select", - "version": "5.7.6", + "version": "5.7.7", "description": "A Select control built with and for ReactJS", "main": "dist/react-select.cjs.js", "module": "dist/react-select.esm.js",