diff --git a/.changeset/blue-kings-serve.md b/.changeset/blue-kings-serve.md new file mode 100644 index 0000000000..4376283c77 --- /dev/null +++ b/.changeset/blue-kings-serve.md @@ -0,0 +1,14 @@ +--- +'react-select': minor +--- + +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. 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/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