@atlaskit/react-select 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 2.0.2
+
+### Patch Changes
+
+- [#119038](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119038)
+  [`5c68906e5ab22`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c68906e5ab22) -
+  [ux] Update accessible description for when multiple selections are available
+
+## 2.0.1
+
+### Patch Changes
+
+- [#119843](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119843)
+  [`7bd0d851d1c39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7bd0d851d1c39) -
+  [ux] Clean up ARIA props that are no longer needed
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/components/option.js

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

package/dist/cjs/select.js

@@ -1149,13 +1149,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var isMulti = this.props.isMulti;
       var selectValue = this.state.selectValue;
       var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
-      if (selectValue.length && action !== 'initial-input-focus') {
+      if (!isMulti && selectValue.length && action !== 'initial-input-focus') {
         return;
       }
-      if (isMulti && (0, _deviceCheck.isAppleDevice)() && !(0, _deviceCheck.isSafari)()) {
-        // chrome only friends
+      if (isMulti) {
+        var multiMessage = this.getElementId('multi-message');
         return {
-          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, multiMessage].join(' ') : [defaultDescription, multiMessage].join(' ')
         };
       } else {
         return {
@@ -1261,9 +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.state.focusedOptionId || undefined,
-        // Safari needs aria-owns in order for aria-activedescendant to work properly
-        'aria-owns': (0, _deviceCheck.isSafari)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1528,10 +1526,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
-          'aria-selected': (!commonProps.isMulti || _this4.isVoiceOver || !isSelected) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isSelected,
-          // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
-          'aria-disabled': ((0, _deviceCheck.isAppleDevice)() || !isDisabled) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
+          'aria-selected': isSelected,
+          // We don't want aria-disabled if it's false. It's just noisy.
+          'aria-disabled': !isDisabled && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
         }, testId && {
           'data-testid': "".concat(testId, "-select--option-").concat(id)
@@ -1642,7 +1639,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               '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'), " ").concat(commonProps.isMulti && (0, _deviceCheck.isSafari)() ? _this4.getElementId('multi-message') : '')
+              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,

package/dist/es2019/components/option.js

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

package/dist/es2019/select.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 import React, { Component } from 'react';
-import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
+import { isAppleDevice } from '@atlaskit/ds-lib/device-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
@@ -1168,13 +1168,13 @@ export default class Select extends Component {
       selectValue
     } = this.state;
     const defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
-    if (selectValue.length && action !== 'initial-input-focus') {
+    if (!isMulti && selectValue.length && action !== 'initial-input-focus') {
       return;
     }
-    if (isMulti && isAppleDevice() && !isSafari()) {
-      // chrome only friends
+    if (isMulti) {
+      const multiMessage = this.getElementId('multi-message');
       return {
-        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, multiMessage].join(' ') : [defaultDescription, multiMessage].join(' ')
       };
     } else {
       return {
@@ -1272,8 +1272,6 @@ export default class Select extends Component {
       'aria-required': required || isRequired,
       role: 'combobox',
       'aria-activedescendant': this.state.focusedOptionId || undefined,
-      // Safari needs aria-owns in order for aria-activedescendant to work properly
-      'aria-owns': isSafari() && fg('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
@@ -1558,10 +1556,9 @@ export default class Select extends Component {
         onMouseMove: onHover,
         onMouseOver: onHover,
         role: 'option',
-        // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
-        'aria-selected': (!commonProps.isMulti || this.isVoiceOver || !isSelected) && fg('design_system_select-a11y-improvement') ? undefined : isSelected,
-        // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
-        'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
+        'aria-selected': isSelected,
+        // We don't want aria-disabled if it's false. It's just noisy.
+        'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
         'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined,
         ...(testId && {
           'data-testid': `${testId}-select--option-${id}`
@@ -1680,7 +1677,7 @@ export default class Select extends Component {
           // 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')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
+            'aria-labelledby': `${labelId || ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')}`
           })
         },
         isLoading: isLoading,

package/dist/esm/components/option.js

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

package/dist/esm/select.js

@@ -13,7 +13,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 import React, { Component } from 'react';
-import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
+import { isAppleDevice } from '@atlaskit/ds-lib/device-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
@@ -1140,13 +1140,13 @@ var Select = /*#__PURE__*/function (_Component) {
       var isMulti = this.props.isMulti;
       var selectValue = this.state.selectValue;
       var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
-      if (selectValue.length && action !== 'initial-input-focus') {
+      if (!isMulti && selectValue.length && action !== 'initial-input-focus') {
         return;
       }
-      if (isMulti && isAppleDevice() && !isSafari()) {
-        // chrome only friends
+      if (isMulti) {
+        var multiMessage = this.getElementId('multi-message');
         return {
-          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, multiMessage].join(' ') : [defaultDescription, multiMessage].join(' ')
         };
       } else {
         return {
@@ -1252,9 +1252,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,
-        // Safari needs aria-owns in order for aria-activedescendant to work properly
-        'aria-owns': isSafari() && fg('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1519,10 +1517,9 @@ var Select = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
-          'aria-selected': (!commonProps.isMulti || _this4.isVoiceOver || !isSelected) && fg('design_system_select-a11y-improvement') ? undefined : isSelected,
-          // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
-          'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
+          'aria-selected': isSelected,
+          // We don't want aria-disabled if it's false. It's just noisy.
+          'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
         }, testId && {
           'data-testid': "".concat(testId, "-select--option-").concat(id)
@@ -1633,7 +1630,7 @@ var Select = /*#__PURE__*/function (_Component) {
               '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'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
+              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"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": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",