@atlaskit/react-select 1.4.1 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/react-select
 
+## 1.4.2
+
+### Patch Changes
+
+- [#172260](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172260)
+  [`9934fe89f1e6a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9934fe89f1e6a) -
+  Improving assisstive technology support by adding better semantics and reducing live region usage
+
 ## 1.4.1
 
 ### Patch Changes

package/dist/cjs/accessibility/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultAriaLiveMessages = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
   guidance: function guidance(props) {
     var isSearchable = props.isSearchable,
@@ -33,11 +35,12 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-        return "option ".concat(label, ", deselected.");
+        return label.length && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "option ".concat(label, ", deselected") : '';
+      // TODO: this should be handled on backspace|delete if no value, but doing it here first
       case 'clear':
         return 'All selected options have been cleared.';
       case 'initial-input-focus':
-        return "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.");
+        return label.length && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.") : '';
       case 'select-option':
         return isDisabled ? "option ".concat(label, " is disabled. Select another option.") : "option ".concat(label, ", selected.");
       default:
@@ -51,7 +54,6 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
       _props$label2 = props.label,
       label = _props$label2 === void 0 ? '' : _props$label2,
       selectValue = props.selectValue,
-      isMulti = props.isMulti,
       isDisabled = props.isDisabled,
       isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
@@ -60,11 +62,11 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu') {
+
+    // No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
+    if (context === 'menu' && !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
       var disabled = isDisabled ? ' disabled' : '';
-      // don't announce not selected for single selection
-      var notSelectedStatus = !isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' not selected';
-      var status = "".concat(isSelected ? ' selected' : notSelectedStatus).concat(disabled);
+      var status = "".concat(isSelected ? ' selected' : ' not selected').concat(disabled);
       return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
     }
     return '';

package/dist/cjs/components/internal/a11y-text.js

@@ -23,6 +23,8 @@ var styles = (0, _react.css)({
   clip: 'rect(1px, 1px, 1px, 1px)',
   label: 'a11yText',
   overflow: 'hidden',
+  userSelect: 'none',
+  // while hidden text is sitting in the DOM, it should not be selectable
   whiteSpace: 'nowrap'
 });
 var A11yText = function A11yText(props) {

package/dist/cjs/components/live-region.js

@@ -12,7 +12,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _accessibility = require("../accessibility");
 var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */ /**
  * @jsxRuntime classic
  * @jsx jsx
  */
@@ -170,8 +170,11 @@ var LiveRegion = function LiveRegion(props) {
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {
-    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
-    role: isA11yImprovementEnabled ? 'status' : 'log'
+    "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
+    ,
+    "aria-atomic": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'false',
+    "aria-relevant": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'additions text',
+    role: (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/cjs/components/option.js

@@ -7,7 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.optionCSS = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _helpers = require("../accessibility/helpers");
 var _utils = require("../utils");
+var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -65,17 +68,18 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var isVoiceOver = (0, _helpers.isAppleDevice)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement');
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
     'option--is-selected': isSelected
   }), {
-    ref: innerRef,
-    "aria-disabled": isDisabled
+    ref: innerRef
   }, innerProps, {
     tabIndex: -1
-  }), children);
+  }), children, isVoiceOver && (isSelected || isDisabled) && (0, _react.jsx)(_a11yText.default, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : '')));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/select.js

@@ -32,9 +32,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 var defaultProps = exports.defaultProps = {
-  'aria-live': 'polite',
+  // aria-live is by default with the live region so we don't need it
+  'aria-live': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: (0, _utils.isTouchCapable)(),
   captureMenuScroll: !(0, _utils.isTouchCapable)(),
@@ -258,7 +259,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialTouchY", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openAfterFocus", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollToFocusedOptionOnUpdate", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isAppleDevice", (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? (0, _helpers.isSafari)() : (0, _helpers.isAppleDevice)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isVoiceOver", (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _helpers.isAppleDevice)());
     // Refs
     // ------------------------------
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "controlRef", null);
@@ -759,6 +760,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               prevInputValue: inputValue
             });
             _this.onMenuClose();
+            (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           } else if (isClearable && escapeClearsValue) {
             _this.clearValue();
           }
@@ -1162,6 +1164,27 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     value: function formatGroupLabel(data) {
       return this.props.formatGroupLabel(data);
     }
+  }, {
+    key: "calculateDescription",
+    value: function calculateDescription(action) {
+      var descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
+      var isMulti = this.props.isMulti;
+      var selectValue = this.state.selectValue;
+      var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
+      if (selectValue.length && action !== 'initial-input-focus') {
+        return;
+      }
+      if (isMulti && (0, _helpers.isAppleDevice)() && !(0, _helpers.isSafari)()) {
+        // chrome only friends
+        return {
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+        };
+      } else {
+        return {
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription].join(' ') : defaultDescription
+        };
+      }
+    }
   }, {
     key: "startListeningComposition",
     value:
@@ -1245,30 +1268,28 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
-      var description = this.props['aria-describedby'] || descriptionId;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'both',
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
+        // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
         'aria-haspopup': 'listbox',
-        'aria-describedby': description,
+        'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined,
+        // Safari needs aria-owns in order for aria-activedescendant to work properly
+        'aria-owns': (0, _helpers.isSafari)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
         'aria-readonly': true
-      }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
-      } : {
-        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
-      });
+      }), this.calculateDescription(ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action));
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
         return /*#__PURE__*/_react.default.createElement(_internal.DummyInput, (0, _extends2.default)({
@@ -1530,7 +1551,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          'aria-selected': !commonProps.isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+          // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
+          'aria-selected': (!commonProps.isMulti || _this4.isVoiceOver || !isSelected) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isSelected,
+          // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
+          'aria-disabled': ((0, _helpers.isAppleDevice)() || !isDisabled) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
         };
         return /*#__PURE__*/_react.default.createElement(Option, (0, _extends2.default)({}, commonProps, {
@@ -1624,12 +1648,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             },
             innerProps: _objectSpread({
               role: 'listbox',
-              // don't add aria-multiselectable when ff is on and the value is false
-              'aria-multiselectable': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? commonProps.isMulti || undefined : commonProps.isMulti,
+              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
               'aria-label': label,
-              'aria-labelledby': labelId
+              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _helpers.isSafari)() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,
@@ -1721,9 +1744,17 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         isFocused: isFocused,
         selectValue: selectValue,
         focusableOptions: focusableOptions,
-        isAppleDevice: this.isAppleDevice
+        isAppleDevice: this.isVoiceOver
       }));
     }
+  }, {
+    key: "renderMultiselectMessage",
+    value: function renderMultiselectMessage() {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        id: this.getElementId('multi-message'),
+        hidden: true
+      }, ", multiple selections available,");
+    }
   }, {
     key: "render",
     value: function render() {
@@ -1754,7 +1785,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/_react.default.createElement(Control, (0, _extends2.default)({}, commonProps, {
+      }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/_react.default.createElement(Control, (0, _extends2.default)({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,

package/dist/es2019/accessibility/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 import { fg } from '@atlaskit/platform-feature-flags';
 export const defaultAriaLiveMessages = {
   guidance: props => {
@@ -30,11 +32,12 @@ export const defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-        return `option ${label}, deselected.`;
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? `option ${label}, deselected` : '';
+      // TODO: this should be handled on backspace|delete if no value, but doing it here first
       case 'clear':
         return 'All selected options have been cleared.';
       case 'initial-input-focus':
-        return `option${labels.length > 1 ? 's' : ''} ${labels.join(',')}, selected.`;
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? `option${labels.length > 1 ? 's' : ''} ${labels.join(',')}, selected.` : '';
       case 'select-option':
         return isDisabled ? `option ${label} is disabled. Select another option.` : `option ${label}, selected.`;
       default:
@@ -48,7 +51,6 @@ export const defaultAriaLiveMessages = {
       options,
       label = '',
       selectValue,
-      isMulti,
       isDisabled,
       isSelected
     } = props;
@@ -56,11 +58,11 @@ export const defaultAriaLiveMessages = {
     if (context === 'value' && selectValue) {
       return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
     }
-    if (context === 'menu') {
+
+    // No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
+    if (context === 'menu' && !fg('design_system_select-a11y-improvement')) {
       const disabled = isDisabled ? ' disabled' : '';
-      // don't announce not selected for single selection
-      const notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';
-      const status = `${isSelected ? ' selected' : notSelectedStatus}${disabled}`;
+      const status = `${isSelected ? ' selected' : ' not selected'}${disabled}`;
       return `${label}${status}, ${getArrayIndex(options, focused)}, completion selected`;
     }
     return '';

package/dist/es2019/components/internal/a11y-text.js

@@ -16,6 +16,8 @@ const styles = css({
   clip: 'rect(1px, 1px, 1px, 1px)',
   label: 'a11yText',
   overflow: 'hidden',
+  userSelect: 'none',
+  // while hidden text is sitting in the DOM, it should not be selectable
   whiteSpace: 'nowrap'
 });
 const A11yText = props => jsx("span", _extends({

package/dist/es2019/components/live-region.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -168,8 +169,11 @@ const LiveRegion = props => {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
-    role: isA11yImprovementEnabled ? 'status' : 'log'
+    "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
+    ,
+    "aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
+    "aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
+    role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/es2019/components/option.js

@@ -5,7 +5,10 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isAppleDevice } from '../accessibility/helpers';
 import { getStyleProps } from '../utils';
+import A11yText from './internal/a11y-text';
 export const optionCSS = ({
   isDisabled,
   isFocused,
@@ -61,17 +64,18 @@ const Option = props => {
     innerRef,
     innerProps
   } = props;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const isVoiceOver = isAppleDevice() && fg('design_system_select-a11y-improvement');
   return jsx("div", _extends({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
     'option--is-selected': isSelected
   }), {
-    ref: innerRef,
-    "aria-disabled": isDisabled
+    ref: innerRef
   }, innerProps, {
     tabIndex: -1
-  }), children);
+  }), children, isVoiceOver && (isSelected || isDisabled) && jsx(A11yText, null, `${isSelected ? ',selected' : ''}${isDisabled ? ',dimmed' : ''}`));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/select.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 import React, { Component } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { isAppleDevice, isSafari } from './accessibility/helpers';
@@ -13,7 +14,8 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export const defaultProps = {
-  'aria-live': 'polite',
+  // aria-live is by default with the live region so we don't need it
+  'aria-live': fg('design_system_select-a11y-improvement') ? undefined : 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -225,7 +227,7 @@ export default class Select extends Component {
     _defineProperty(this, "initialTouchY", 0);
     _defineProperty(this, "openAfterFocus", false);
     _defineProperty(this, "scrollToFocusedOptionOnUpdate", false);
-    _defineProperty(this, "isAppleDevice", fg('design_system_select-a11y-improvement') ? isSafari() : isAppleDevice());
+    _defineProperty(this, "isVoiceOver", fg('design_system_select-a11y-improvement') && isAppleDevice());
     // Refs
     // ------------------------------
     _defineProperty(this, "controlRef", null);
@@ -732,6 +734,7 @@ export default class Select extends Component {
               prevInputValue: inputValue
             });
             this.onMenuClose();
+            fg('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           } else if (isClearable && escapeClearsValue) {
             this.clearValue();
           }
@@ -1177,6 +1180,29 @@ export default class Select extends Component {
   formatGroupLabel(data) {
     return this.props.formatGroupLabel(data);
   }
+  calculateDescription(action) {
+    const descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
+    const {
+      isMulti
+    } = this.props;
+    const {
+      selectValue
+    } = this.state;
+    const defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
+    if (selectValue.length && action !== 'initial-input-focus') {
+      return;
+    }
+    if (isMulti && isAppleDevice() && !isSafari()) {
+      // chrome only friends
+      return {
+        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+      };
+    } else {
+      return {
+        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription].join(' ') : defaultDescription
+      };
+    }
+  }
   // ==============================
   // Composition Handlers
   // ==============================
@@ -1251,32 +1277,31 @@ export default class Select extends Component {
       commonProps
     } = this;
     const id = inputId || this.getElementId('input');
-    const description = this.props['aria-describedby'] || descriptionId;
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
       'aria-autocomplete': 'both',
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
+      // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
       'aria-haspopup': 'listbox',
-      'aria-describedby': description,
+      'aria-describedby': this.props['aria-describedby'] || descriptionId,
       'aria-invalid': this.props['aria-invalid'] || isInvalid,
       'aria-label': this.props['aria-label'] || label,
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
       'aria-activedescendant': this.state.focusedOptionId || undefined,
+      // Safari needs aria-owns in order for aria-activedescendant to work properly
+      'aria-owns': isSafari() && fg('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
+      // TODO: Might need to remove this
       ...(!isSearchable && {
         'aria-readonly': true
       }),
-      ...(this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
-      } : {
-        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
-      })
+      ...this.calculateDescription(ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action)
     };
     if (!isSearchable) {
       // use a dummy input to maintain focus/blur functionality
@@ -1555,7 +1580,10 @@ export default class Select extends Component {
         onMouseMove: onHover,
         onMouseOver: onHover,
         role: 'option',
-        'aria-selected': !commonProps.isMulti && fg('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+        // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
+        'aria-selected': (!commonProps.isMulti || this.isVoiceOver || !isSelected) && fg('design_system_select-a11y-improvement') ? undefined : isSelected,
+        // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
+        'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
         'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
       };
       return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
@@ -1649,13 +1677,12 @@ export default class Select extends Component {
       },
       innerProps: {
         role: 'listbox',
-        // don't add aria-multiselectable when ff is on and the value is false
-        'aria-multiselectable': fg('design_system_select-a11y-improvement') ? commonProps.isMulti || undefined : commonProps.isMulti,
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
         id: this.getElementId('listbox'),
         // add aditional label on listbox when ff is on
         ...(fg('design_system_select-a11y-improvement') && {
           'aria-label': label,
-          'aria-labelledby': labelId
+          'aria-labelledby': `${labelId || this.getElementId('input')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
         })
       },
       isLoading: isLoading,
@@ -1743,9 +1770,15 @@ export default class Select extends Component {
       isFocused: isFocused,
       selectValue: selectValue,
       focusableOptions: focusableOptions,
-      isAppleDevice: this.isAppleDevice
+      isAppleDevice: this.isVoiceOver
     }));
   }
+  renderMultiselectMessage() {
+    return /*#__PURE__*/React.createElement("span", {
+      id: this.getElementId('multi-message'),
+      hidden: true
+    }, ", multiple selections available,");
+  }
   render() {
     const {
       Control,
@@ -1776,7 +1809,7 @@ export default class Select extends Component {
       },
       isDisabled: isDisabled,
       isFocused: isFocused
-    }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
+    }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
       innerRef: this.getControlRef,
       innerProps: {
         onMouseDown: this.onControlMouseDown,

package/dist/esm/accessibility/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 import { fg } from '@atlaskit/platform-feature-flags';
 export var defaultAriaLiveMessages = {
   guidance: function guidance(props) {
@@ -27,11 +29,12 @@ export var defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-        return "option ".concat(label, ", deselected.");
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? "option ".concat(label, ", deselected") : '';
+      // TODO: this should be handled on backspace|delete if no value, but doing it here first
       case 'clear':
         return 'All selected options have been cleared.';
       case 'initial-input-focus':
-        return "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.");
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.") : '';
       case 'select-option':
         return isDisabled ? "option ".concat(label, " is disabled. Select another option.") : "option ".concat(label, ", selected.");
       default:
@@ -45,7 +48,6 @@ export var defaultAriaLiveMessages = {
       _props$label2 = props.label,
       label = _props$label2 === void 0 ? '' : _props$label2,
       selectValue = props.selectValue,
-      isMulti = props.isMulti,
       isDisabled = props.isDisabled,
       isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
@@ -54,11 +56,11 @@ export var defaultAriaLiveMessages = {
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu') {
+
+    // No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
+    if (context === 'menu' && !fg('design_system_select-a11y-improvement')) {
       var disabled = isDisabled ? ' disabled' : '';
-      // don't announce not selected for single selection
-      var notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';
-      var status = "".concat(isSelected ? ' selected' : notSelectedStatus).concat(disabled);
+      var status = "".concat(isSelected ? ' selected' : ' not selected').concat(disabled);
       return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
     }
     return '';

package/dist/esm/components/internal/a11y-text.js

@@ -16,6 +16,8 @@ var styles = css({
   clip: 'rect(1px, 1px, 1px, 1px)',
   label: 'a11yText',
   overflow: 'hidden',
+  userSelect: 'none',
+  // while hidden text is sitting in the DOM, it should not be selectable
   whiteSpace: 'nowrap'
 });
 var A11yText = function A11yText(props) {

package/dist/esm/components/live-region.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -165,8 +166,11 @@ var LiveRegion = function LiveRegion(props) {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
-    role: isA11yImprovementEnabled ? 'status' : 'log'
+    "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
+    ,
+    "aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
+    "aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
+    role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/esm/components/option.js

@@ -5,7 +5,10 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isAppleDevice } from '../accessibility/helpers';
 import { getStyleProps } from '../utils';
+import A11yText from './internal/a11y-text';
 export var optionCSS = function optionCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
@@ -58,17 +61,18 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var isVoiceOver = isAppleDevice() && fg('design_system_select-a11y-improvement');
   return jsx("div", _extends({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
     'option--is-selected': isSelected
   }), {
-    ref: innerRef,
-    "aria-disabled": isDisabled
+    ref: innerRef
   }, innerProps, {
     tabIndex: -1
-  }), children);
+  }), children, isVoiceOver && (isSelected || isDisabled) && jsx(A11yText, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : '')));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/select.js

@@ -11,6 +11,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 import React, { Component } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { isAppleDevice, isSafari } from './accessibility/helpers';
@@ -24,7 +25,8 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export var defaultProps = {
-  'aria-live': 'polite',
+  // aria-live is by default with the live region so we don't need it
+  'aria-live': fg('design_system_select-a11y-improvement') ? undefined : 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -248,7 +250,7 @@ var Select = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "initialTouchY", 0);
     _defineProperty(_assertThisInitialized(_this), "openAfterFocus", false);
     _defineProperty(_assertThisInitialized(_this), "scrollToFocusedOptionOnUpdate", false);
-    _defineProperty(_assertThisInitialized(_this), "isAppleDevice", fg('design_system_select-a11y-improvement') ? isSafari() : isAppleDevice());
+    _defineProperty(_assertThisInitialized(_this), "isVoiceOver", fg('design_system_select-a11y-improvement') && isAppleDevice());
     // Refs
     // ------------------------------
     _defineProperty(_assertThisInitialized(_this), "controlRef", null);
@@ -749,6 +751,7 @@ var Select = /*#__PURE__*/function (_Component) {
               prevInputValue: inputValue
             });
             _this.onMenuClose();
+            fg('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           } else if (isClearable && escapeClearsValue) {
             _this.clearValue();
           }
@@ -1152,6 +1155,27 @@ var Select = /*#__PURE__*/function (_Component) {
     value: function formatGroupLabel(data) {
       return this.props.formatGroupLabel(data);
     }
+  }, {
+    key: "calculateDescription",
+    value: function calculateDescription(action) {
+      var descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
+      var isMulti = this.props.isMulti;
+      var selectValue = this.state.selectValue;
+      var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
+      if (selectValue.length && action !== 'initial-input-focus') {
+        return;
+      }
+      if (isMulti && isAppleDevice() && !isSafari()) {
+        // chrome only friends
+        return {
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+        };
+      } else {
+        return {
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription].join(' ') : defaultDescription
+        };
+      }
+    }
   }, {
     key: "startListeningComposition",
     value:
@@ -1235,30 +1259,28 @@ var Select = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
-      var description = this.props['aria-describedby'] || descriptionId;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'both',
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
+        // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
         'aria-haspopup': 'listbox',
-        'aria-describedby': description,
+        'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined,
+        // Safari needs aria-owns in order for aria-activedescendant to work properly
+        'aria-owns': isSafari() && fg('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
         'aria-readonly': true
-      }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
-      } : {
-        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
-      });
+      }), this.calculateDescription(ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action));
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
         return /*#__PURE__*/React.createElement(DummyInput, _extends({
@@ -1520,7 +1542,10 @@ var Select = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          'aria-selected': !commonProps.isMulti && fg('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+          // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
+          'aria-selected': (!commonProps.isMulti || _this4.isVoiceOver || !isSelected) && fg('design_system_select-a11y-improvement') ? undefined : isSelected,
+          // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
+          'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
         };
         return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
@@ -1614,12 +1639,11 @@ var Select = /*#__PURE__*/function (_Component) {
             },
             innerProps: _objectSpread({
               role: 'listbox',
-              // don't add aria-multiselectable when ff is on and the value is false
-              'aria-multiselectable': fg('design_system_select-a11y-improvement') ? commonProps.isMulti || undefined : commonProps.isMulti,
+              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, fg('design_system_select-a11y-improvement') && {
               'aria-label': label,
-              'aria-labelledby': labelId
+              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,
@@ -1711,9 +1735,17 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused: isFocused,
         selectValue: selectValue,
         focusableOptions: focusableOptions,
-        isAppleDevice: this.isAppleDevice
+        isAppleDevice: this.isVoiceOver
       }));
     }
+  }, {
+    key: "renderMultiselectMessage",
+    value: function renderMultiselectMessage() {
+      return /*#__PURE__*/React.createElement("span", {
+        id: this.getElementId('multi-message'),
+        hidden: true
+      }, ", multiple selections available,");
+    }
   }, {
     key: "render",
     value: function render() {
@@ -1744,7 +1776,7 @@ var Select = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
+      }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,

package/dist/types/select.d.ts

@@ -413,7 +413,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     [key: string]: any;
 }
 export declare const defaultProps: {
-    'aria-live': string;
+    'aria-live': string | undefined;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -491,7 +491,7 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
-        'aria-live': string;
+        'aria-live': string | undefined;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -541,7 +541,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
     userIsDragging?: boolean;
-    isAppleDevice: boolean;
+    isVoiceOver: boolean;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
     focusedOptionRef: HTMLDivElement | null;
@@ -609,7 +609,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     getOptionValue: (data: Option) => string;
     getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
     getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
-    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message') => string;
     getComponents: () => {
         ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
         Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
@@ -650,6 +650,9 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     filterOption(option: FilterOptionOption<Option>, inputValue: string): boolean;
     formatOptionLabel(data: Option, context: FormatOptionLabelContext): ReactNode;
     formatGroupLabel(data: Group): React.ReactNode;
+    calculateDescription(action?: String): {
+        'aria-describedby': string;
+    } | undefined;
     onMenuMouseDown: MouseEventHandler<HTMLDivElement>;
     onMenuMouseMove: MouseEventHandler<HTMLDivElement>;
     onControlMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
@@ -684,6 +687,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderMenu(): JSX.Element | null;
     renderFormField(): JSX.Element | undefined;
     renderLiveRegion(): JSX.Element;
+    renderMultiselectMessage(): JSX.Element;
     render(): JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/dist/types-ts4.5/select.d.ts

@@ -413,7 +413,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     [key: string]: any;
 }
 export declare const defaultProps: {
-    'aria-live': string;
+    'aria-live': string | undefined;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -491,7 +491,7 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
-        'aria-live': string;
+        'aria-live': string | undefined;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -541,7 +541,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
     userIsDragging?: boolean;
-    isAppleDevice: boolean;
+    isVoiceOver: boolean;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
     focusedOptionRef: HTMLDivElement | null;
@@ -609,7 +609,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     getOptionValue: (data: Option) => string;
     getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
     getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
-    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message') => string;
     getComponents: () => {
         ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
         Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
@@ -650,6 +650,9 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     filterOption(option: FilterOptionOption<Option>, inputValue: string): boolean;
     formatOptionLabel(data: Option, context: FormatOptionLabelContext): ReactNode;
     formatGroupLabel(data: Group): React.ReactNode;
+    calculateDescription(action?: String): {
+        'aria-describedby': string;
+    } | undefined;
     onMenuMouseDown: MouseEventHandler<HTMLDivElement>;
     onMenuMouseMove: MouseEventHandler<HTMLDivElement>;
     onControlMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
@@ -684,6 +687,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderMenu(): JSX.Element | null;
     renderFormField(): JSX.Element | undefined;
     renderLiveRegion(): JSX.Element;
+    renderMultiselectMessage(): JSX.Element;
     render(): JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.4.1",
+	"version": "1.4.2",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,9 +28,9 @@
 		"./async-creatable": "./src/async-creatable.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",