@atlaskit/react-select 2.0.5 → 2.0.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 2.0.7
+
+### Patch Changes
+
+- [#131835](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131835)
+  [`11b3a9f6a407e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11b3a9f6a407e) -
+  [Popup Select] Improve assistive technology support by reducing reliance on live regions.
+
+## 2.0.6
+
+### Patch Changes
+
+- [#123298](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123298)
+  [`8a9b860d5da36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a9b860d5da36) -
+  [ux] Improved accessibility for selected values
+
 ## 2.0.5
 
 ### Patch Changes

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

@@ -1,20 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = _interopRequireWildcard(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 _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; }
 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
+ * @jsxFrag React.Fragment
  */
 // ==============================
 // Root Container
@@ -123,17 +127,13 @@ var LiveRegion = function LiveRegion(props) {
   var ariaResults = (0, _react.useMemo)(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      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
-        });
-      }
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -161,12 +161,12 @@ var LiveRegion = function LiveRegion(props) {
   var ScreenReaderText = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-selection"
   }, ariaSelected), (0, _react2.jsx)("span", {
+    id: "aria-results"
+  }, ariaResults), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-focused"
   }, ariaFocused), (0, _react2.jsx)("span", {
-    id: "aria-results"
-  }, ariaResults), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)("span", {
     id: "aria-guidance"
-  }, ariaGuidance));
+  }, ariaGuidance)));
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {

package/dist/cjs/components/multi-value.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MultiValueLabel = exports.MultiValueContainer = void 0;
 exports.MultiValueRemove = MultiValueRemove;
 exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = 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 _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
@@ -147,7 +146,7 @@ var renderIcon = function renderIcon() {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
     return (0, _react.jsx)(_cross.default, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     });
   }
@@ -157,14 +156,14 @@ var renderIcon = function renderIcon() {
     return (0, _react.jsx)(_primitives.Inline, {
       xcss: iconWrapperStyles
     }, (0, _react.jsx)(_cross.default, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     }));
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
     (0, _react.jsx)(_selectClear.default, {
-      label: "Clear",
+      label: "",
       primaryColor: "transparent",
       size: "small",
       secondaryColor: "inherit"
@@ -176,9 +175,7 @@ function MultiValueRemove(_ref5) {
     innerProps = _ref5.innerProps;
   return (
     // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      role: "button"
-    }, innerProps), (0, _react.jsx)("div", {
+    (0, _react.jsx)("div", innerProps, (0, _react.jsx)("div", {
       css: isDisabled ? disabledStyles : enabledStyles,
       "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
     }, renderIcon()))
@@ -214,7 +211,9 @@ var MultiValue = function MultiValue(props) {
     innerProps: _objectSpread(_objectSpread({}, (0, _utils.getStyleProps)(props, 'multiValueRemove', {
       'multi-value__remove': true
     })), {}, {
-      'aria-label': "Remove ".concat(ariaLabel || 'option')
+      role: 'button',
+      tabIndex: -1,
+      'aria-label': "".concat(ariaLabel || 'option', ", remove")
     }, removeProps),
     isDisabled: isDisabled,
     selectProps: selectProps

package/dist/cjs/select.js

@@ -239,6 +239,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       focusedOptionId: null,
       focusableOptionsWithIds: [],
       focusedValue: null,
+      focusedValueId: null,
       inputIsHidden: false,
       isFocused: false,
       selectValue: [],
@@ -740,6 +741,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             break;
           }
+          if (focusedValue) {
+            _this.removeValue(focusedValue);
+          }
           if (menuIsOpen) {
             if (!focusedOption) {
               return;
@@ -825,7 +829,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = (0, _utils.cleanValue)(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
-    if (_props.menuIsOpen && _this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
@@ -1010,7 +1014,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }
       this.setState({
         inputIsHidden: nextFocus !== -1,
-        focusedValue: selectValue[nextFocus]
+        focusedValue: selectValue[nextFocus],
+        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus),
+        focusedOption: null,
+        focusedOptionId: null
       });
     }
   }, {
@@ -1049,6 +1056,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       this.setState({
         focusedOption: options[nextFocus],
         focusedValue: null,
+        focusedValueId: null,
         focusedOptionId: this.getFocusedOptionId(options[nextFocus])
       });
     }
@@ -1261,7 +1269,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1360,11 +1368,14 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
-              }
+              },
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
             },
             data: opt,
-            innerProps: _objectSpread({}, testId && {
-              'data-testid': "".concat(testId, "-select--multivalue")
+            innerProps: _objectSpread(_objectSpread({}, testId && {
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
+            }), {}, {
+              id: "".concat(_this3.getElementId('selected-value'), "-").concat(index)
             })
           }), _this3.formatOptionLabel(opt, 'value'));
         });
@@ -1603,6 +1614,26 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
+      var calculateListboxLabel = function calculateListboxLabel() {
+        var _this4$inputRef;
+        // First in name calculation, overwrites aria-label
+        if (labelId) {
+          return {
+            'aria-labelledby': labelId
+          };
+        }
+        // Second in name calcuation, overwrites everything else except aria-labelledby
+        if (label) {
+          return {
+            'aria-label': label
+          };
+        }
+        // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+        // will most likely not have an accessible name
+        return {
+          'aria-labelledby': ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input')
+        };
+      };
       var menuElement = /*#__PURE__*/_react.default.createElement(_menu.MenuPlacer, (0, _extends2.default)({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
@@ -1625,7 +1656,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this4$inputRef;
           return /*#__PURE__*/_react.default.createElement(MenuList, (0, _extends2.default)({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1637,10 +1667,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
-              'aria-label': label,
-              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
-            }),
+            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && calculateListboxLabel()),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption

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

@@ -2,8 +2,9 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
-import { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../accessibility';
@@ -122,17 +123,13 @@ const LiveRegion = props => {
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      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
-        });
-      }
+      const resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue,
+        resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -160,12 +157,12 @@ const LiveRegion = props => {
   const ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
+    id: "aria-results"
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
-    id: "aria-results"
-  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx("span", {
     id: "aria-guidance"
-  }, ariaGuidance));
+  }, ariaGuidance)));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {

package/dist/es2019/components/multi-value.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -138,7 +137,7 @@ const renderIcon = () => {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-component-visual-refresh')) {
     return jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     });
   }
@@ -148,14 +147,14 @@ const renderIcon = () => {
     return jsx(Inline, {
       xcss: iconWrapperStyles
     }, jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     }));
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
     jsx(LegacySelectClearIcon, {
-      label: "Clear",
+      label: "",
       primaryColor: "transparent",
       size: "small",
       secondaryColor: "inherit"
@@ -168,9 +167,7 @@ export function MultiValueRemove({
 }) {
   return (
     // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    jsx("div", _extends({
-      role: "button"
-    }, innerProps), jsx("div", {
+    jsx("div", innerProps, jsx("div", {
       css: isDisabled ? disabledStyles : enabledStyles,
       "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
     }, renderIcon()))
@@ -216,7 +213,9 @@ const MultiValue = props => {
       ...getStyleProps(props, 'multiValueRemove', {
         'multi-value__remove': true
       }),
-      'aria-label': `Remove ${ariaLabel || 'option'}`,
+      role: 'button',
+      tabIndex: -1,
+      'aria-label': `${ariaLabel || 'option'}, remove`,
       ...removeProps
     },
     isDisabled: isDisabled,

package/dist/es2019/select.js

@@ -209,6 +209,7 @@ export default class Select extends Component {
       focusedOptionId: null,
       focusableOptionsWithIds: [],
       focusedValue: null,
+      focusedValueId: null,
       inputIsHidden: false,
       isFocused: false,
       selectValue: [],
@@ -716,6 +717,9 @@ export default class Select extends Component {
             // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             break;
           }
+          if (focusedValue) {
+            this.removeValue(focusedValue);
+          }
           if (menuIsOpen) {
             if (!focusedOption) {
               return;
@@ -801,7 +805,7 @@ export default class Select extends Component {
     this.state.instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
-    if (_props.menuIsOpen && this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       const focusableOptionsWithIds = this.getFocusableOptionsWithIds();
       const focusableOptions = this.buildFocusableOptions();
       const optionIndex = focusableOptions.indexOf(this.state.selectValue[0]);
@@ -1033,7 +1037,10 @@ export default class Select extends Component {
     }
     this.setState({
       inputIsHidden: nextFocus !== -1,
-      focusedValue: selectValue[nextFocus]
+      focusedValue: selectValue[nextFocus],
+      focusedValueId: `${this.getElementId('selected-value')}-${nextFocus}`,
+      focusedOption: null,
+      focusedOptionId: null
     });
   }
   focusOption(direction = 'first') {
@@ -1073,6 +1080,7 @@ export default class Select extends Component {
     this.setState({
       focusedOption: options[nextFocus],
       focusedValue: null,
+      focusedValueId: null,
       focusedOptionId: this.getFocusedOptionId(options[nextFocus])
     });
   }
@@ -1271,7 +1279,7 @@ export default class Select extends Component {
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
-      'aria-activedescendant': this.state.focusedOptionId || undefined,
+      'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
@@ -1373,13 +1381,15 @@ export default class Select extends Component {
             onTouchEnd: () => this.removeValue(opt),
             onMouseDown: e => {
               e.preventDefault();
-            }
+            },
+            'data-testid': `${testId}-select--multivalue-${index}-remove`
           },
           data: opt,
           innerProps: {
             ...(testId && {
-              'data-testid': `${testId}-select--multivalue`
-            })
+              'data-testid': `${testId}-select--multivalue-${index}`
+            }),
+            id: `${this.getElementId('selected-value')}-${index}`
           }
         }), this.formatOptionLabel(opt, 'value'));
       });
@@ -1637,6 +1647,26 @@ export default class Select extends Component {
       menuPosition,
       menuShouldScrollIntoView
     };
+    const calculateListboxLabel = () => {
+      var _this$inputRef;
+      // First in name calculation, overwrites aria-label
+      if (labelId) {
+        return {
+          'aria-labelledby': labelId
+        };
+      }
+      // Second in name calcuation, overwrites everything else except aria-labelledby
+      if (label) {
+        return {
+          'aria-label': label
+        };
+      }
+      // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+      // will most likely not have an accessible name
+      return {
+        'aria-labelledby': ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')
+      };
+    };
     const menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), ({
       ref,
       placerProps: {
@@ -1660,31 +1690,25 @@ export default class Select extends Component {
       onTopArrive: onMenuScrollToTop,
       onBottomArrive: onMenuScrollToBottom,
       lockEnabled: menuShouldBlockScroll
-    }, scrollTargetRef => {
-      var _this$inputRef;
-      return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
-        innerRef: instance => {
-          this.getMenuListRef(instance);
-          scrollTargetRef(instance);
-        },
-        innerProps: {
-          role: 'listbox',
-          'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
-          id: this.getElementId('listbox'),
-          ...(testId && {
-            'data-testid': `${testId}-select--listbox`
-          }),
-          // add aditional label on listbox when ff is on
-          ...(fg('design_system_select-a11y-improvement') && {
-            'aria-label': label,
-            'aria-labelledby': `${labelId || ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')}`
-          })
-        },
-        isLoading: isLoading,
-        maxHeight: maxHeight,
-        focusedOption: focusedOption
-      }), menuUI);
-    })));
+    }, scrollTargetRef => /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+      innerRef: instance => {
+        this.getMenuListRef(instance);
+        scrollTargetRef(instance);
+      },
+      innerProps: {
+        role: 'listbox',
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+        id: this.getElementId('listbox'),
+        ...(testId && {
+          'data-testid': `${testId}-select--listbox`
+        }),
+        // add aditional label on listbox when ff is on
+        ...(fg('design_system_select-a11y-improvement') && calculateListboxLabel())
+      },
+      isLoading: isLoading,
+      maxHeight: maxHeight,
+      focusedOption: focusedOption
+    }), menuUI))));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked

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
+ * @jsxFrag React.Fragment
  */
-import { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../accessibility';
@@ -119,17 +120,13 @@ var LiveRegion = function LiveRegion(props) {
   var ariaResults = useMemo(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      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
-        });
-      }
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -157,12 +154,12 @@ var LiveRegion = function LiveRegion(props) {
   var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
+    id: "aria-results"
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
-    id: "aria-results"
-  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx("span", {
     id: "aria-guidance"
-  }, ariaGuidance));
+  }, ariaGuidance)));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {

package/dist/esm/components/multi-value.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 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; }
@@ -140,7 +139,7 @@ var renderIcon = function renderIcon() {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-component-visual-refresh')) {
     return jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     });
   }
@@ -150,14 +149,14 @@ var renderIcon = function renderIcon() {
     return jsx(Inline, {
       xcss: iconWrapperStyles
     }, jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     }));
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
     jsx(LegacySelectClearIcon, {
-      label: "Clear",
+      label: "",
       primaryColor: "transparent",
       size: "small",
       secondaryColor: "inherit"
@@ -169,9 +168,7 @@ export function MultiValueRemove(_ref5) {
     innerProps = _ref5.innerProps;
   return (
     // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    jsx("div", _extends({
-      role: "button"
-    }, innerProps), jsx("div", {
+    jsx("div", innerProps, jsx("div", {
       css: isDisabled ? disabledStyles : enabledStyles,
       "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
     }, renderIcon()))
@@ -207,7 +204,9 @@ var MultiValue = function MultiValue(props) {
     innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValueRemove', {
       'multi-value__remove': true
     })), {}, {
-      'aria-label': "Remove ".concat(ariaLabel || 'option')
+      role: 'button',
+      tabIndex: -1,
+      'aria-label': "".concat(ariaLabel || 'option', ", remove")
     }, removeProps),
     isDisabled: isDisabled,
     selectProps: selectProps

package/dist/esm/select.js

@@ -230,6 +230,7 @@ var Select = /*#__PURE__*/function (_Component) {
       focusedOptionId: null,
       focusableOptionsWithIds: [],
       focusedValue: null,
+      focusedValueId: null,
       inputIsHidden: false,
       isFocused: false,
       selectValue: [],
@@ -731,6 +732,9 @@ var Select = /*#__PURE__*/function (_Component) {
             // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             break;
           }
+          if (focusedValue) {
+            _this.removeValue(focusedValue);
+          }
           if (menuIsOpen) {
             if (!focusedOption) {
               return;
@@ -816,7 +820,7 @@ var Select = /*#__PURE__*/function (_Component) {
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
-    if (_props.menuIsOpen && _this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
@@ -1001,7 +1005,10 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       this.setState({
         inputIsHidden: nextFocus !== -1,
-        focusedValue: selectValue[nextFocus]
+        focusedValue: selectValue[nextFocus],
+        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus),
+        focusedOption: null,
+        focusedOptionId: null
       });
     }
   }, {
@@ -1040,6 +1047,7 @@ var Select = /*#__PURE__*/function (_Component) {
       this.setState({
         focusedOption: options[nextFocus],
         focusedValue: null,
+        focusedValueId: null,
         focusedOptionId: this.getFocusedOptionId(options[nextFocus])
       });
     }
@@ -1252,7 +1260,7 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1351,11 +1359,14 @@ var Select = /*#__PURE__*/function (_Component) {
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
-              }
+              },
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
             },
             data: opt,
-            innerProps: _objectSpread({}, testId && {
-              'data-testid': "".concat(testId, "-select--multivalue")
+            innerProps: _objectSpread(_objectSpread({}, testId && {
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
+            }), {}, {
+              id: "".concat(_this3.getElementId('selected-value'), "-").concat(index)
             })
           }), _this3.formatOptionLabel(opt, 'value'));
         });
@@ -1594,6 +1605,26 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
+      var calculateListboxLabel = function calculateListboxLabel() {
+        var _this4$inputRef;
+        // First in name calculation, overwrites aria-label
+        if (labelId) {
+          return {
+            'aria-labelledby': labelId
+          };
+        }
+        // Second in name calcuation, overwrites everything else except aria-labelledby
+        if (label) {
+          return {
+            'aria-label': label
+          };
+        }
+        // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+        // will most likely not have an accessible name
+        return {
+          'aria-labelledby': ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input')
+        };
+      };
       var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
@@ -1616,7 +1647,6 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this4$inputRef;
           return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1628,10 +1658,7 @@ var Select = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), fg('design_system_select-a11y-improvement') && {
-              'aria-label': label,
-              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
-            }),
+            }), fg('design_system_select-a11y-improvement') && calculateListboxLabel()),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption

package/dist/types/components/live-region.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/select.d.ts

@@ -475,6 +475,7 @@ interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>
     focusedOptionId: string | null;
     focusableOptionsWithIds: FocusableOptionWithId<Option>[];
     focusedValue: Option | null;
+    focusedValueId: string | null;
     selectValue: Options<Option>;
     clearFocusValueOnUpdate: boolean;
     prevWasFocused: boolean;
@@ -618,7 +619,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' | 'multi-message') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message' | 'selected-value') => 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;

package/dist/types-ts4.5/components/live-region.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

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

@@ -475,6 +475,7 @@ interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>
     focusedOptionId: string | null;
     focusableOptionsWithIds: FocusableOptionWithId<Option>[];
     focusedValue: Option | null;
+    focusedValueId: string | null;
     selectValue: Options<Option>;
     clearFocusValueOnUpdate: boolean;
     prevWasFocused: boolean;
@@ -618,7 +619,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' | 'multi-message') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message' | 'selected-value') => 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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.0.5",
+	"version": "2.0.7",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,11 +30,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",