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