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/docs/pages/typescript/index.tsx b/docs/pages/typescript/index.tsx index ae1f1b4f1c..01968c279e 100644 --- a/docs/pages/typescript/index.tsx +++ b/docs/pages/typescript/index.tsx @@ -91,7 +91,12 @@ The \`actionMeta\` parameter is optional. \`ActionMeta\` is a union that is disc You can use module augmentation to add custom props to the \`Select\` prop types: ~~~jsx -declare module 'react-select/dist/declarations/src/Select' { +import type {} from 'react-select/base'; +// This import is necessary for module augmentation. +// It allows us to extend the 'Props' interface in the 'react-select/base' module +// and add our custom property 'myCustomProp' to it. + +declare module 'react-select/base' { export interface Props< Option, IsMulti extends boolean, diff --git a/package.json b/package.json index 90a96e2f70..c186787df8 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,8 @@ "jest-in-case": "^1.0.2", "prettier": "^2.2.1", "style-loader": "^0.23.1", - "typescript": "^4.1.3" + "typescript": "^4.1.3", + "user-agent-data-types": "^0.4.2" }, "scripts": { "build": "preconstruct build", diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md index cd2f35663c..a0efd2108e 100644 --- a/packages/react-select/CHANGELOG.md +++ b/packages/react-select/CHANGELOG.md @@ -1,5 +1,39 @@ # react-select +## 5.8.0 + +### Minor Changes + +- [`884f1c42`](https://github.com/JedWatson/react-select/commit/884f1c42549faad7cb210169223b427ad6f0c9fd) [#5758](https://github.com/JedWatson/react-select/pull/5758) Thanks [@Ke1sy](https://github.com/Ke1sy)! - 1. Added 'aria-activedescendant' for input and functionality to calculate it; + + 2. Added role 'option' and 'aria-selected' for option; + 3. Added role 'listbox' for menu; + 4. Added tests for 'aria-activedescendant'; + 5. Changes in aria-live region: + + - the instructions how to use select will be announced only one time when user focuses the input for the first time. + - instructions for menu or selected value will be announced only once after focusing them. + - removed aria-live for focused option because currently with correct aria-attributes it will be announced by screenreader natively as well as the status of this option (active or disabled). + - separated ariaContext into ariaFocused, ariaResults, ariaGuidance to avoid announcing redundant information and higlight only current change. + +## 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 + +- [`f6315cd5`](https://github.com/JedWatson/react-select/commit/f6315cd5feddb2e9ea168bcad391b29990b53afb) [#5672](https://github.com/JedWatson/react-select/pull/5672) Thanks [@tu4mo](https://github.com/tu4mo)! - Fix for calling non-cancellable scroll events + +## 5.7.5 + +### Patch Changes + +- [`9d1730ba`](https://github.com/JedWatson/react-select/commit/9d1730ba4f97a51d25c7e704acd1a4c2be8f7182) [#5347](https://github.com/JedWatson/react-select/pull/5347) Thanks [@aszmyd](https://github.com/aszmyd)! - Make scroll lock div work on a document context it belongs to + ## 5.7.4 ### Patch Changes diff --git a/packages/react-select/package.json b/packages/react-select/package.json index 829c4a87b4..05869f8e41 100644 --- a/packages/react-select/package.json +++ b/packages/react-select/package.json @@ -1,6 +1,6 @@ { "name": "react-select", - "version": "5.7.4", + "version": "5.8.0", "description": "A Select control built with and for ReactJS", "main": "dist/react-select.cjs.js", "module": "dist/react-select.esm.js", diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx index 16daa33094..798f6126b2 100644 --- a/packages/react-select/src/Select.tsx +++ b/packages/react-select/src/Select.tsx @@ -16,6 +16,7 @@ import LiveRegion from './components/LiveRegion'; import { createFilter, FilterOptionOption } from './filters'; import { DummyInput, ScrollManager, RequiredInput } from './internal/index'; import { AriaLiveMessages, AriaSelection } from './accessibility/index'; +import { isAppleDevice } from './accessibility/helpers'; import { classNames, @@ -329,12 +330,15 @@ interface State< inputIsHidden: boolean; isFocused: boolean; focusedOption: Option | null; + focusedOptionId: string | null; + focusableOptionsWithIds: FocusableOptionWithId