@atlaskit/react-select 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/react-select
 
+## 1.2.0
+
+### Minor Changes
+
+- [#157818](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157818)
+  [`87c14ad1a3efa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/87c14ad1a3efa) -
+  Use semantic tags and arias for combobox and listbox and reduce aria-live
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/accessibility/helpers.js

@@ -8,6 +8,7 @@ exports.isIOS = isIOS;
 exports.isIPad = isIPad;
 exports.isIPhone = isIPhone;
 exports.isMac = isMac;
+exports.isSafari = isSafari;
 function testPlatform(re) {
   var _window$navigator$use;
   return typeof window !== 'undefined' && window.navigator != null ?
@@ -17,6 +18,10 @@ function testPlatform(re) {
 function isIPhone() {
   return testPlatform(/^iPhone/i);
 }
+function isSafari() {
+  var ua = navigator.userAgent.toLowerCase();
+  return ua.includes('safari') && !ua.includes('chrome');
+}
 function isMac() {
   return testPlatform(/^Mac/i);
 }

package/dist/cjs/accessibility/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultAriaLiveMessages = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
   guidance: function guidance(props) {
     var isSearchable = props.isSearchable,
@@ -50,19 +51,22 @@ 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,
       isAppleDevice = props.isAppleDevice;
     var getArrayIndex = function getArrayIndex(arr, item) {
-      return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
+      return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
     };
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
     if (context === 'menu' && isAppleDevice) {
       var disabled = isDisabled ? ' disabled' : '';
-      var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
-      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
+      // 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);
+      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
     }
     return '';
   },

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+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; }
@@ -45,6 +46,9 @@ var LiveRegion = function LiveRegion(props) {
   var ariaLabel = selectProps['aria-label'] || label;
   var ariaLive = selectProps['aria-live'];
 
+  // for safari, we will use minimum support from aria-live region
+  var isA11yImprovementEnabled = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && !isAppleDevice;
+
   // Update aria live message configuration when prop changes
   var messages = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _accessibility.defaultAriaLiveMessages), ariaLiveMessages || {});
@@ -82,10 +86,17 @@ var LiveRegion = function LiveRegion(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  var prevInputValue = (0, _react.useRef)('');
   var ariaFocused = (0, _react.useMemo)(function () {
     var focusMsg = '';
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
+    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on,
+      // for safari, we will announce for all
+      return '';
+    }
+    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
       var onFocusProps = {
         focused: focused,
@@ -95,27 +106,36 @@ var LiveRegion = function LiveRegion(props) {
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
         selectValue: selectValue,
-        isAppleDevice: isAppleDevice
+        isAppleDevice: isAppleDevice,
+        isMulti: isMulti
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
     return focusMsg;
-  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
   var ariaResults = (0, _react.useMemo)(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      var resultsMessage = screenReaderStatus({
-        count: focusableOptions.length
-      });
-      resultsMsg = messages.onFilter({
-        inputValue: inputValue,
-        resultsMessage: resultsMessage
-      });
+      var shouldAnnounceAvailableResults = !focusableOptions.length;
+      if (shouldAnnounceAvailableResults && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
+        // only announce no option results when ff is on
+        var resultsMessage = screenReaderStatus({
+          count: focusableOptions.length
+        });
+        resultsMsg = messages.onFilter({
+          inputValue: inputValue,
+          resultsMessage: resultsMessage
+        });
+      }
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
   var ariaGuidance = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
+      // don't announce guidance at all when ff is on
+      return '';
+    }
     var guidanceMsg = '';
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
@@ -137,16 +157,14 @@ var LiveRegion = function LiveRegion(props) {
     id: "aria-focused"
   }, ariaFocused), (0, _react2.jsx)("span", {
     id: "aria-results"
-  }, ariaResults), (0, _react2.jsx)("span", {
+  }, ariaResults), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)("span", {
     id: "aria-guidance"
   }, ariaGuidance));
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {
-    "aria-live": ariaLive,
-    "aria-atomic": "false",
-    "aria-relevant": "additions text",
-    role: "log"
+    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
+    role: isA11yImprovementEnabled ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/cjs/components/menu.js

@@ -311,7 +311,9 @@ var MenuList = exports.MenuList = function MenuList(props) {
     'menu-list--is-multi': isMulti
   }), {
     ref: innerRef
-  }, innerProps), children);
+  }, innerProps, {
+    tabIndex: -1
+  }), children);
 };
 
 // ==============================

package/dist/cjs/components/option.js

@@ -54,7 +54,9 @@ var Option = function Option(props) {
   }), {
     ref: innerRef,
     "aria-disabled": isDisabled
-  }, innerProps), children);
+  }, innerProps, {
+    tabIndex: -1
+  }), children);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/select.js

@@ -16,6 +16,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("./accessibility/helpers");
 var _builtins = require("./builtins");
 var _components = require("./components");
@@ -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, _helpers.isAppleDevice)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isAppleDevice", (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? (0, _helpers.isSafari)() : (0, _helpers.isAppleDevice)());
     // Refs
     // ------------------------------
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "controlRef", null);
@@ -1237,7 +1238,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         labelId = _this$props8.labelId,
         menuIsOpen = _this$props8.menuIsOpen,
         required = _this$props8.required,
-        tabIndex = _this$props8.tabIndex;
+        _this$props8$tabIndex = _this$props8.tabIndex,
+        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1249,7 +1251,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
-        'aria-autocomplete': 'list',
+        'aria-autocomplete': 'both',
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         'aria-haspopup': 'listbox',
@@ -1259,7 +1261,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId ? this.state.focusedOptionId : undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1491,13 +1493,15 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView,
         noOptionsMessage = _this$props12.noOptionsMessage,
         onMenuScrollToTop = _this$props12.onMenuScrollToTop,
-        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom;
+        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom,
+        labelId = _this$props12.labelId,
+        label = _this$props12.label;
       if (!menuIsOpen) {
         return null;
       }
 
       // TODO: Internal Option Type here
-      var render = function render(props, id) {
+      var render = function render(props, id, headingId) {
         var type = props.type,
           data = props.data,
           isDisabled = props.isDisabled,
@@ -1518,7 +1522,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+          'aria-selected': !commonProps.isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+          'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
         };
         return /*#__PURE__*/_react.default.createElement(Option, (0, _extends2.default)({}, commonProps, {
           innerProps: innerProps,
@@ -1535,7 +1540,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       };
       var menuUI;
       if (this.hasOptions()) {
-        menuUI = this.getCategorizedOptions().map(function (item) {
+        var items = this.getCategorizedOptions();
+        menuUI = items.map(function (item) {
           if (item.type === 'group') {
             var data = item.data,
               options = item.options,
@@ -1553,7 +1559,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               },
               label: _this4.formatGroupLabel(item.data)
             }), item.options.map(function (option) {
-              return render(option, "".concat(groupIndex, "-").concat(option.index));
+              return render(option, "".concat(groupIndex, "-").concat(option.index), headingId);
             }));
           } else if (item.type === 'option') {
             return render(item, "".concat(item.index));
@@ -1608,11 +1614,15 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
-            innerProps: {
+            innerProps: _objectSpread({
               role: 'listbox',
-              'aria-multiselectable': commonProps.isMulti,
+              // 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,
               id: _this4.getElementId('listbox')
-            },
+            }, (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
+              'aria-label': label,
+              'aria-labelledby': labelId
+            }),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption

package/dist/es2019/accessibility/helpers.js

@@ -7,6 +7,10 @@ function testPlatform(re) {
 export function isIPhone() {
   return testPlatform(/^iPhone/i);
 }
+export function isSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  return ua.includes('safari') && !ua.includes('chrome');
+}
 export function isMac() {
   return testPlatform(/^Mac/i);
 }

package/dist/es2019/accessibility/index.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export const defaultAriaLiveMessages = {
   guidance: props => {
     const {
@@ -47,18 +48,21 @@ export const defaultAriaLiveMessages = {
       options,
       label = '',
       selectValue,
+      isMulti,
       isDisabled,
       isSelected,
       isAppleDevice
     } = props;
-    const getArrayIndex = (arr, item) => arr && arr.length ? `${arr.indexOf(item) + 1} of ${arr.length}` : '';
+    const getArrayIndex = (arr, item) => arr && arr.length ? `(${arr.indexOf(item) + 1} of ${arr.length})` : '';
     if (context === 'value' && selectValue) {
       return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
     }
     if (context === 'menu' && isAppleDevice) {
       const disabled = isDisabled ? ' disabled' : '';
-      const status = `${isSelected ? ' selected' : ''}${disabled}`;
-      return `${label}${status}, ${getArrayIndex(options, focused)}.`;
+      // 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}`;
+      return `${label}${status}, ${getArrayIndex(options, focused)}, completion selected`;
     }
     return '';
   },

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

@@ -2,8 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, useMemo } from 'react';
+import { Fragment, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../accessibility';
 import A11yText from './internal/a11y-text';
 
@@ -41,6 +42,9 @@ const LiveRegion = props => {
   const ariaLabel = selectProps['aria-label'] || label;
   const ariaLive = selectProps['aria-live'];
 
+  // for safari, we will use minimum support from aria-live region
+  const isA11yImprovementEnabled = fg('design_system_select-a11y-improvement') && !isAppleDevice;
+
   // Update aria live message configuration when prop changes
   const messages = useMemo(() => ({
     ...defaultAriaLiveMessages,
@@ -80,10 +84,17 @@ const LiveRegion = props => {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  const prevInputValue = useRef('');
   const ariaFocused = useMemo(() => {
     let focusMsg = '';
     const focused = focusedOption || focusedValue;
     const isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
+    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on,
+      // for safari, we will announce for all
+      return '';
+    }
+    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
       const onFocusProps = {
         focused,
@@ -93,27 +104,36 @@ const LiveRegion = props => {
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
         selectValue,
-        isAppleDevice
+        isAppleDevice,
+        isMulti
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
     return focusMsg;
-  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      const resultsMessage = screenReaderStatus({
-        count: focusableOptions.length
-      });
-      resultsMsg = messages.onFilter({
-        inputValue,
-        resultsMessage
-      });
+      const shouldAnnounceAvailableResults = !focusableOptions.length;
+      if (shouldAnnounceAvailableResults && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement')) {
+        // only announce no option results when ff is on
+        const resultsMessage = screenReaderStatus({
+          count: focusableOptions.length
+        });
+        resultsMsg = messages.onFilter({
+          inputValue,
+          resultsMessage
+        });
+      }
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
   const isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
   const ariaGuidance = useMemo(() => {
+    if (fg('design_system_select-a11y-improvement')) {
+      // don't announce guidance at all when ff is on
+      return '';
+    }
     let guidanceMsg = '';
     if (messages.guidance) {
       const context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
@@ -135,16 +155,14 @@ const LiveRegion = props => {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
     id: "aria-results"
-  }, ariaResults), jsx("span", {
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx("span", {
     id: "aria-guidance"
   }, ariaGuidance));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": ariaLive,
-    "aria-atomic": "false",
-    "aria-relevant": "additions text",
-    role: "log"
+    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
+    role: isA11yImprovementEnabled ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/es2019/components/menu.js

@@ -314,7 +314,9 @@ export const MenuList = props => {
     'menu-list--is-multi': isMulti
   }), {
     ref: innerRef
-  }, innerProps), children);
+  }, innerProps, {
+    tabIndex: -1
+  }), children);
 };
 
 // ==============================

package/dist/es2019/components/option.js

@@ -49,7 +49,9 @@ const Option = props => {
   }), {
     ref: innerRef,
     "aria-disabled": isDisabled
-  }, innerProps), children);
+  }, innerProps, {
+    tabIndex: -1
+  }), children);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/select.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
-import { isAppleDevice } from './accessibility/helpers';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isAppleDevice, isSafari } from './accessibility/helpers';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
 import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
@@ -225,7 +226,7 @@ export default class Select extends Component {
     _defineProperty(this, "initialTouchY", 0);
     _defineProperty(this, "openAfterFocus", false);
     _defineProperty(this, "scrollToFocusedOptionOnUpdate", false);
-    _defineProperty(this, "isAppleDevice", isAppleDevice());
+    _defineProperty(this, "isAppleDevice", fg('design_system_select-a11y-improvement') ? isSafari() : isAppleDevice());
     // Refs
     // ------------------------------
     _defineProperty(this, "controlRef", null);
@@ -1241,7 +1242,7 @@ export default class Select extends Component {
       labelId,
       menuIsOpen,
       required,
-      tabIndex
+      tabIndex = 0
     } = this.props;
     const {
       Input
@@ -1258,7 +1259,7 @@ export default class Select extends Component {
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
-      'aria-autocomplete': 'list',
+      'aria-autocomplete': 'both',
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
       'aria-haspopup': 'listbox',
@@ -1268,7 +1269,7 @@ export default class Select extends Component {
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
-      'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId ? this.state.focusedOptionId : undefined,
+      'aria-activedescendant': this.state.focusedOptionId || undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
@@ -1521,14 +1522,16 @@ export default class Select extends Component {
       menuShouldScrollIntoView,
       noOptionsMessage,
       onMenuScrollToTop,
-      onMenuScrollToBottom
+      onMenuScrollToBottom,
+      labelId,
+      label
     } = this.props;
     if (!menuIsOpen) {
       return null;
     }
 
     // TODO: Internal Option Type here
-    const render = (props, id) => {
+    const render = (props, id, headingId) => {
       const {
         type,
         data,
@@ -1547,7 +1550,8 @@ export default class Select extends Component {
         onMouseMove: onHover,
         onMouseOver: onHover,
         role: 'option',
-        'aria-selected': this.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+        'aria-selected': !commonProps.isMulti && fg('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+        'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
       };
       return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
         innerProps: innerProps,
@@ -1564,7 +1568,8 @@ export default class Select extends Component {
     };
     let menuUI;
     if (this.hasOptions()) {
-      menuUI = this.getCategorizedOptions().map(item => {
+      const items = this.getCategorizedOptions();
+      menuUI = items.map(item => {
         if (item.type === 'group') {
           const {
             data,
@@ -1583,7 +1588,7 @@ export default class Select extends Component {
               data: item.data
             },
             label: this.formatGroupLabel(item.data)
-          }), item.options.map(option => render(option, `${groupIndex}-${option.index}`)));
+          }), item.options.map(option => render(option, `${groupIndex}-${option.index}`, headingId)));
         } else if (item.type === 'option') {
           return render(item, `${item.index}`);
         }
@@ -1639,8 +1644,14 @@ export default class Select extends Component {
       },
       innerProps: {
         role: 'listbox',
-        'aria-multiselectable': commonProps.isMulti,
-        id: this.getElementId('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,
+        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
+        })
       },
       isLoading: isLoading,
       maxHeight: maxHeight,

package/dist/esm/accessibility/helpers.js

@@ -7,6 +7,10 @@ function testPlatform(re) {
 export function isIPhone() {
   return testPlatform(/^iPhone/i);
 }
+export function isSafari() {
+  var ua = navigator.userAgent.toLowerCase();
+  return ua.includes('safari') && !ua.includes('chrome');
+}
 export function isMac() {
   return testPlatform(/^Mac/i);
 }

package/dist/esm/accessibility/index.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export var defaultAriaLiveMessages = {
   guidance: function guidance(props) {
     var isSearchable = props.isSearchable,
@@ -44,19 +45,22 @@ 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,
       isAppleDevice = props.isAppleDevice;
     var getArrayIndex = function getArrayIndex(arr, item) {
-      return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
+      return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
     };
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
     if (context === 'menu' && isAppleDevice) {
       var disabled = isDisabled ? ' disabled' : '';
-      var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
-      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
+      // 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);
+      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
     }
     return '';
   },

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

@@ -5,8 +5,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, useMemo } from 'react';
+import { Fragment, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../accessibility';
 import A11yText from './internal/a11y-text';
 
@@ -40,6 +41,9 @@ var LiveRegion = function LiveRegion(props) {
   var ariaLabel = selectProps['aria-label'] || label;
   var ariaLive = selectProps['aria-live'];
 
+  // for safari, we will use minimum support from aria-live region
+  var isA11yImprovementEnabled = fg('design_system_select-a11y-improvement') && !isAppleDevice;
+
   // Update aria live message configuration when prop changes
   var messages = useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultAriaLiveMessages), ariaLiveMessages || {});
@@ -77,10 +81,17 @@ var LiveRegion = function LiveRegion(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  var prevInputValue = useRef('');
   var ariaFocused = useMemo(function () {
     var focusMsg = '';
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
+    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on,
+      // for safari, we will announce for all
+      return '';
+    }
+    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
       var onFocusProps = {
         focused: focused,
@@ -90,27 +101,36 @@ var LiveRegion = function LiveRegion(props) {
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
         selectValue: selectValue,
-        isAppleDevice: isAppleDevice
+        isAppleDevice: isAppleDevice,
+        isMulti: isMulti
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
     return focusMsg;
-  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
   var ariaResults = useMemo(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      var resultsMessage = screenReaderStatus({
-        count: focusableOptions.length
-      });
-      resultsMsg = messages.onFilter({
-        inputValue: inputValue,
-        resultsMessage: resultsMessage
-      });
+      var shouldAnnounceAvailableResults = !focusableOptions.length;
+      if (shouldAnnounceAvailableResults && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement')) {
+        // only announce no option results when ff is on
+        var resultsMessage = screenReaderStatus({
+          count: focusableOptions.length
+        });
+        resultsMsg = messages.onFilter({
+          inputValue: inputValue,
+          resultsMessage: resultsMessage
+        });
+      }
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
   var ariaGuidance = useMemo(function () {
+    if (fg('design_system_select-a11y-improvement')) {
+      // don't announce guidance at all when ff is on
+      return '';
+    }
     var guidanceMsg = '';
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
@@ -132,16 +152,14 @@ var LiveRegion = function LiveRegion(props) {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
     id: "aria-results"
-  }, ariaResults), jsx("span", {
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx("span", {
     id: "aria-guidance"
   }, ariaGuidance));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": ariaLive,
-    "aria-atomic": "false",
-    "aria-relevant": "additions text",
-    role: "log"
+    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
+    role: isA11yImprovementEnabled ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/esm/components/menu.js

@@ -307,7 +307,9 @@ export var MenuList = function MenuList(props) {
     'menu-list--is-multi': isMulti
   }), {
     ref: innerRef
-  }, innerProps), children);
+  }, innerProps, {
+    tabIndex: -1
+  }), children);
 };
 
 // ==============================

package/dist/esm/components/option.js

@@ -49,7 +49,9 @@ var Option = function Option(props) {
   }), {
     ref: innerRef,
     "aria-disabled": isDisabled
-  }, innerProps), children);
+  }, innerProps, {
+    tabIndex: -1
+  }), children);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/select.js

@@ -12,7 +12,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; })(); }
 import React, { Component } from 'react';
-import { isAppleDevice } from './accessibility/helpers';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isAppleDevice, isSafari } from './accessibility/helpers';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
 import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
@@ -248,7 +249,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", isAppleDevice());
+    _defineProperty(_assertThisInitialized(_this), "isAppleDevice", fg('design_system_select-a11y-improvement') ? isSafari() : isAppleDevice());
     // Refs
     // ------------------------------
     _defineProperty(_assertThisInitialized(_this), "controlRef", null);
@@ -1227,7 +1228,8 @@ var Select = /*#__PURE__*/function (_Component) {
         labelId = _this$props8.labelId,
         menuIsOpen = _this$props8.menuIsOpen,
         required = _this$props8.required,
-        tabIndex = _this$props8.tabIndex;
+        _this$props8$tabIndex = _this$props8.tabIndex,
+        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1239,7 +1241,7 @@ var Select = /*#__PURE__*/function (_Component) {
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
-        'aria-autocomplete': 'list',
+        'aria-autocomplete': 'both',
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         'aria-haspopup': 'listbox',
@@ -1249,7 +1251,7 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId ? this.state.focusedOptionId : undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1481,13 +1483,15 @@ var Select = /*#__PURE__*/function (_Component) {
         menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView,
         noOptionsMessage = _this$props12.noOptionsMessage,
         onMenuScrollToTop = _this$props12.onMenuScrollToTop,
-        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom;
+        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom,
+        labelId = _this$props12.labelId,
+        label = _this$props12.label;
       if (!menuIsOpen) {
         return null;
       }
 
       // TODO: Internal Option Type here
-      var render = function render(props, id) {
+      var render = function render(props, id, headingId) {
         var type = props.type,
           data = props.data,
           isDisabled = props.isDisabled,
@@ -1508,7 +1512,8 @@ var Select = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+          'aria-selected': !commonProps.isMulti && fg('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+          'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
         };
         return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
           innerProps: innerProps,
@@ -1525,7 +1530,8 @@ var Select = /*#__PURE__*/function (_Component) {
       };
       var menuUI;
       if (this.hasOptions()) {
-        menuUI = this.getCategorizedOptions().map(function (item) {
+        var items = this.getCategorizedOptions();
+        menuUI = items.map(function (item) {
           if (item.type === 'group') {
             var data = item.data,
               options = item.options,
@@ -1543,7 +1549,7 @@ var Select = /*#__PURE__*/function (_Component) {
               },
               label: _this4.formatGroupLabel(item.data)
             }), item.options.map(function (option) {
-              return render(option, "".concat(groupIndex, "-").concat(option.index));
+              return render(option, "".concat(groupIndex, "-").concat(option.index), headingId);
             }));
           } else if (item.type === 'option') {
             return render(item, "".concat(item.index));
@@ -1598,11 +1604,15 @@ var Select = /*#__PURE__*/function (_Component) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
-            innerProps: {
+            innerProps: _objectSpread({
               role: 'listbox',
-              'aria-multiselectable': commonProps.isMulti,
+              // 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,
               id: _this4.getElementId('listbox')
-            },
+            }, fg('design_system_select-a11y-improvement') && {
+              'aria-label': label,
+              'aria-labelledby': labelId
+            }),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption

package/dist/types/accessibility/helpers.d.ts

@@ -1,4 +1,5 @@
 export declare function isIPhone(): boolean;
+export declare function isSafari(): boolean;
 export declare function isMac(): boolean;
 export declare function isIPad(): boolean;
 export declare function isIOS(): boolean;

package/dist/types/accessibility/index.d.ts

@@ -94,6 +94,10 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
      * Boolean indicating whether user uses Apple device
      */
     isAppleDevice: boolean;
+    /**
+     * Boolean value of selectProp isMulti
+     */
+    isMulti: boolean;
 }
 export type AriaGuidance = (props: AriaGuidanceProps) => string;
 export type AriaOnChange<Option, IsMulti extends boolean> = (props: AriaOnChangeProps<Option, IsMulti>) => string;

package/dist/types-ts4.5/accessibility/helpers.d.ts

@@ -1,4 +1,5 @@
 export declare function isIPhone(): boolean;
+export declare function isSafari(): boolean;
 export declare function isMac(): boolean;
 export declare function isIPad(): boolean;
 export declare function isIOS(): boolean;

package/dist/types-ts4.5/accessibility/index.d.ts

@@ -94,6 +94,10 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
      * Boolean indicating whether user uses Apple device
      */
     isAppleDevice: boolean;
+    /**
+     * Boolean value of selectProp isMulti
+     */
+    isMulti: boolean;
 }
 export type AriaGuidance = (props: AriaGuidanceProps) => string;
 export type AriaOnChange<Option, IsMulti extends boolean> = (props: AriaOnChangeProps<Option, IsMulti>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,6 +27,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",
@@ -49,6 +50,11 @@
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
+	"platform-feature-flags": {
+		"design_system_select-a11y-improvement": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [