@atlaskit/select 18.7.0 → 18.8.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/select
 
+## 18.8.0
+
+### Minor Changes
+
+- [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
+  [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
+  Update the font size for the textarea and select components at the `xs` breakpoint. The font size
+  will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
+  focused. Styles for larger breakpoints will remain unchanged.
+
+  Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
+  the `media.above.xs` breakpoint.
+
+  These changes are currently behind a feature gate and will be evaluated for effectiveness. If
+  successful, they will be included in a future release.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.7.1
+
+### 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
+
 ## 18.7.0
 
 ### Minor Changes

package/dist/cjs/CountrySelect.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _countries = require("./data/countries");
 var _Select = _interopRequireDefault(require("./Select"));
 var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
@@ -90,11 +91,14 @@ var CountrySelect = function CountrySelect(props) {
     getOptionValue: getOptionValue,
     isMulti: false,
     options: countryOptions,
-    ariaLiveMessages: (0, _countryGroupsAnnouncement.isCountryOptionsGrouped)(countryOptions) ? _objectSpread({
+    ariaLiveMessages:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : (0, _countryGroupsAnnouncement.isCountryOptionsGrouped)(countryOptions) ? _objectSpread({
       onFocus: function onFocus(data) {
         return (0, _countryGroupsAnnouncement.onCountryOptionFocus)(data, countryOptions);
       }
     }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -22,6 +22,7 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactPopper = require("react-popper");
 var _shallowEqual = require("shallow-equal");
 var _useId = require("@atlaskit/ds-lib/use-id");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
 var _Select = _interopRequireDefault(require("../Select"));
@@ -124,6 +125,8 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         case 'Escape':
         case 'Esc':
           _this.close();
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           break;
         default:
       }
@@ -419,7 +422,14 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
-          "aria-label": providedAriaLabel,
+          "aria-label": providedAriaLabel
+          // TODO: Popup Select does not work well with active-descendant
+          ,
+          "aria-live": (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+          // temporary check for now
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
+          : undefined,
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.7.0";
+var packageVersion = "18.8.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/input-options.js

@@ -22,6 +22,7 @@ var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 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; })(); }
@@ -189,6 +190,9 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         innerProps = _this$props.innerProps,
         innerRef = _this$props.innerRef,
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var _this$props2 = this.props,
+        isDisabled = _this$props2.isDisabled,
+        isSelected = _this$props2.isSelected;
 
       // prop assignment
       var props = _objectSpread(_objectSpread({}, innerProps), {}, {
@@ -202,6 +206,10 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         _getPrimitiveStyles2 = (0, _slicedToArray2.default)(_getPrimitiveStyles, 2),
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
+      var isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+      // temporary check for now
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement');
       return (
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
@@ -234,7 +242,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
           isFacadeDisabled: true
         }) : null), (0, _react2.jsx)("div", {
           css: baseOptionStyles
-        }, children))
+        }, children, isVoiceOver && (isSelected || isDisabled) && (0, _react2.jsx)(_visuallyHidden.default, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
       );
     }
   }]);

package/dist/cjs/createSelect.js

@@ -10,11 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _components = require("./components");
 var _inputAriaDescribedby = require("./components/input-aria-describedby");
 var _noOptions = require("./components/no-options");
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
-var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"]; // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -43,7 +46,7 @@ function createSelect(WrappedComponent) {
         NoOptionsMessage: _noOptions.NoOptionsMessage
       }, componentsProp);
     }, [componentsProp]);
-    var descriptionId = props['aria-describedby'];
+    var descriptionId = props['aria-describedby'] || props['descriptionId'];
     var isSearchable = props.isSearchable;
     (0, _react.useEffect)(function () {
       if (!isSearchable && descriptionId) {
@@ -80,8 +83,10 @@ function createSelect(WrappedComponent) {
     }, []);
     return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
       ref: internalSelectRef,
-      "aria-live": "assertive",
-      ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
+      "aria-live": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'assertive',
+      ariaLiveMessages:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
         onFocus: function onFocus(data) {
           return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
         }

package/dist/es2019/CountrySelect.js

@@ -5,6 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 import { groupedCountries } from './data/countries';
@@ -78,12 +79,15 @@ const CountrySelect = props => {
     getOptionValue: getOptionValue,
     isMulti: false,
     options: countryOptions,
-    ariaLiveMessages: isCountryOptionsGrouped(countryOptions) ? {
+    ariaLiveMessages:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('design_system_select-a11y-improvement') ? undefined : isCountryOptionsGrouped(countryOptions) ? {
       onFocus: data => onCountryOptionFocus(data, countryOptions),
       ...ariaLiveMessages
     } : {
       ...ariaLiveMessages
     }
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -8,6 +8,7 @@ import FocusLock from 'react-focus-lock';
 import { Manager, Popper, Reference } from 'react-popper';
 import { shallowEqualObjects } from 'shallow-equal';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
@@ -91,6 +92,8 @@ export default class PopupSelect extends PureComponent {
         case 'Escape':
         case 'Esc':
           this.close();
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          fg('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           break;
         default:
       }
@@ -397,7 +400,14 @@ export default class PopupSelect extends PureComponent {
         disabled: !focusLockEnabled,
         returnFocus: true
       }, /*#__PURE__*/React.createElement(Select, _extends({
-        "aria-label": providedAriaLabel,
+        "aria-label": providedAriaLabel
+        // TODO: Popup Select does not work well with active-descendant
+        ,
+        "aria-live": (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+        // temporary check for now
+        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+        fg('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
+        : undefined,
         backspaceRemovesValue: false,
         controlShouldRenderValue: false,
         isClearable: false,

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.7.0";
+const packageVersion = "18.8.0";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/input-options.js

@@ -12,6 +12,7 @@ import RadioIcon from '@atlaskit/icon/glyph/radio';
 import PrimitiveSVGIcon from '@atlaskit/icon/svg';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const getPrimitiveStyles = props => {
   const {
     cx,
@@ -166,6 +167,10 @@ class ControlOption extends Component {
       innerRef,
       ...rest
     } = this.props;
+    const {
+      isDisabled,
+      isSelected
+    } = this.props;
 
     // prop assignment
     const props = {
@@ -178,6 +183,10 @@ class ControlOption extends Component {
       getStyles,
       ...rest
     });
+    const isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+    // temporary check for now
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('design_system_select-a11y-improvement');
     return (
       // These need to remain this way because `react-select` passes props with
       // styles inside, and that must be done dynamically.
@@ -219,7 +228,7 @@ class ControlOption extends Component {
         isFacadeDisabled: true
       }) : null), jsx("div", {
         css: baseOptionStyles
-      }, children))
+      }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, `${isSelected ? ',selected' : ''}${isDisabled ? ',dimmed' : ''}`)))
     );
   }
 }

package/dist/es2019/createSelect.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
@@ -28,7 +30,7 @@ export default function createSelect(WrappedComponent) {
       NoOptionsMessage,
       ...componentsProp
     }), [componentsProp]);
-    const descriptionId = props['aria-describedby'];
+    const descriptionId = props['aria-describedby'] || props['descriptionId'];
     const isSearchable = props.isSearchable;
     useEffect(() => {
       if (!isSearchable && descriptionId) {
@@ -63,8 +65,10 @@ export default function createSelect(WrappedComponent) {
     }), []);
     return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
       ref: internalSelectRef,
-      "aria-live": "assertive",
-      ariaLiveMessages: isOptionsGrouped(props.options) ? {
+      "aria-live": fg('design_system_select-a11y-improvement') ? undefined : 'assertive',
+      ariaLiveMessages:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('design_system_select-a11y-improvement') ? undefined : isOptionsGrouped(props.options) ? {
         onFocus: data => onFocus(data, props.options),
         ...ariaLiveMessages
       } : {

package/dist/esm/CountrySelect.js

@@ -8,6 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 import { groupedCountries } from './data/countries';
@@ -87,11 +88,14 @@ var CountrySelect = function CountrySelect(props) {
     getOptionValue: getOptionValue,
     isMulti: false,
     options: countryOptions,
-    ariaLiveMessages: isCountryOptionsGrouped(countryOptions) ? _objectSpread({
+    ariaLiveMessages:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('design_system_select-a11y-improvement') ? undefined : isCountryOptionsGrouped(countryOptions) ? _objectSpread({
       onFocus: function onFocus(data) {
         return onCountryOptionFocus(data, countryOptions);
       }
     }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 

package/dist/esm/PopupSelect/PopupSelect.js

@@ -20,6 +20,7 @@ import FocusLock from 'react-focus-lock';
 import { Manager, Popper, Reference } from 'react-popper';
 import { shallowEqualObjects } from 'shallow-equal';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
@@ -115,6 +116,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         case 'Escape':
         case 'Esc':
           _this.close();
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          fg('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           break;
         default:
       }
@@ -410,7 +413,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
-          "aria-label": providedAriaLabel,
+          "aria-label": providedAriaLabel
+          // TODO: Popup Select does not work well with active-descendant
+          ,
+          "aria-live": (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+          // temporary check for now
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          fg('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
+          : undefined,
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,

package/dist/esm/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "18.7.0";
+var packageVersion = "18.8.0";
 export var SelectWithoutAnalytics = createSelect(AsyncSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/input-options.js

@@ -25,6 +25,7 @@ import RadioIcon from '@atlaskit/icon/glyph/radio';
 import PrimitiveSVGIcon from '@atlaskit/icon/svg';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,
@@ -184,6 +185,9 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         innerProps = _this$props.innerProps,
         innerRef = _this$props.innerRef,
         rest = _objectWithoutProperties(_this$props, _excluded);
+      var _this$props2 = this.props,
+        isDisabled = _this$props2.isDisabled,
+        isSelected = _this$props2.isSelected;
 
       // prop assignment
       var props = _objectSpread(_objectSpread({}, innerProps), {}, {
@@ -197,6 +201,10 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         _getPrimitiveStyles2 = _slicedToArray(_getPrimitiveStyles, 2),
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
+      var isVoiceOver = (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel') &&
+      // temporary check for now
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('design_system_select-a11y-improvement');
       return (
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
@@ -229,7 +237,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
           isFacadeDisabled: true
         }) : null), jsx("div", {
           css: baseOptionStyles
-        }, children))
+        }, children, isVoiceOver && (isSelected || isDisabled) && jsx(VisuallyHidden, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : ''))))
       );
     }
   }]);

package/dist/esm/createSelect.js

@@ -4,8 +4,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
 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 */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
@@ -34,7 +36,7 @@ export default function createSelect(WrappedComponent) {
         NoOptionsMessage: NoOptionsMessage
       }, componentsProp);
     }, [componentsProp]);
-    var descriptionId = props['aria-describedby'];
+    var descriptionId = props['aria-describedby'] || props['descriptionId'];
     var isSearchable = props.isSearchable;
     useEffect(function () {
       if (!isSearchable && descriptionId) {
@@ -71,8 +73,10 @@ export default function createSelect(WrappedComponent) {
     }, []);
     return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
       ref: internalSelectRef,
-      "aria-live": "assertive",
-      ariaLiveMessages: isOptionsGrouped(props.options) ? _objectSpread({
+      "aria-live": fg('design_system_select-a11y-improvement') ? undefined : 'assertive',
+      ariaLiveMessages:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('design_system_select-a11y-improvement') ? undefined : isOptionsGrouped(props.options) ? _objectSpread({
         onFocus: function onFocus(data) {
           return _onFocus(data, props.options);
         }

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -75,7 +75,8 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     spacing?: 'default' | 'compact';
     /**
-     * @deprecated Use isInvalid instead. The state of validation if used in a form
+     *  @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     *  Use isInvalid instead. The state of validation if used in a form
      */
     validationState?: ValidationState;
     /**

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

@@ -75,7 +75,8 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      */
     spacing?: 'default' | 'compact';
     /**
-     * @deprecated Use isInvalid instead. The state of validation if used in a form
+     *  @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     *  Use isInvalid instead. The state of validation if used in a form
      */
     validationState?: ValidationState;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.7.0",
+	"version": "18.8.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
 		"@atlaskit/icon": "^23.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
-		"@atlaskit/react-select": "^1.4.0",
+		"@atlaskit/react-select": "^1.5.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.4.0",
@@ -114,6 +114,9 @@
 		},
 		"platform-icon-control-migration": {
 			"type": "boolean"
+		},
+		"platform_design_system_team_safari_input_fix": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/select/"