@atlaskit/react-select 2.4.0 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 2.4.2
+
+### Patch Changes
+
+- [#140048](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140048)
+  [`f05dae04933f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f05dae04933f3) -
+  Improve assistive technology support for removing selected values with Multiselect.
+
+## 2.4.1
+
+### Patch Changes
+
+- [#141760](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141760)
+  [`2df2e25329cb8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2df2e25329cb8) -
+  [ux] Resolved issue where group `Heading` component would render even when no labels were provided
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/cjs/compiled/components/group.js

@@ -45,7 +45,7 @@ var Group = function Group(props) {
   }, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     className: (0, _runtime.ax)([styles.root, (0, _react2.cx)(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
-  }), /*#__PURE__*/React.createElement(Heading, (0, _extends2.default)({}, headingProps, {
+  }), label && /*#__PURE__*/React.createElement(Heading, (0, _extends2.default)({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,

package/dist/cjs/compiled/components/input.js

@@ -56,10 +56,7 @@ var Input = function Input(props) {
     className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
       input: true
     }, inputClassName)]),
-    ref: innerRef
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-
+    ref: innerRef,
     disabled: isDisabled,
     "data-testid": dataId
   }, innerProps)));

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

@@ -19,7 +19,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LiveRegion = function LiveRegion(props) {
   var ariaSelection = props.ariaSelection,
     focusedOption = props.focusedOption,

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

@@ -100,16 +100,12 @@ var renderIcon = function renderIcon() {
       color: "currentColor"
     }));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    React.createElement(_selectClear.default, {
-      label: "",
-      primaryColor: "transparent",
-      size: "small",
-      secondaryColor: "inherit"
-    })
-  );
+  return /*#__PURE__*/React.createElement(_selectClear.default, {
+    label: "",
+    primaryColor: "transparent",
+    size: "small",
+    secondaryColor: "inherit"
+  });
 };
 function MultiValueRemove(_ref3) {
   var isDisabled = _ref3.isDisabled,

package/dist/cjs/components/internal/use-scroll-lock.js

@@ -33,7 +33,6 @@ function preventInertiaScroll() {
 // `ontouchstart` check works on most browsers
 // `maxTouchPoints` works on IE10/11 and Surface
 function isTouchDevice() {
-  // eslint-disable-next-line compat/compat
   return 'ontouchstart' in window || navigator.maxTouchPoints;
 }
 var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

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

@@ -15,7 +15,6 @@ var _liveRegion2 = _interopRequireDefault(require("../emotion/components/live-re
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LiveRegion = function LiveRegion(props) {
   return (0, _platformFeatureFlags.fg)('compiled-react-select') ? /*#__PURE__*/_react.default.createElement(_liveRegion.default, props) : /*#__PURE__*/_react.default.createElement(_liveRegion2.default, props);
 };

package/dist/cjs/emotion/components/group.js

@@ -35,7 +35,7 @@ var Group = function Group(props) {
     selectProps = props.selectProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'group', {
     group: true
-  }), innerProps), (0, _react.jsx)(Heading, (0, _extends2.default)({}, headingProps, {
+  }), innerProps), label && (0, _react.jsx)(Heading, (0, _extends2.default)({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,

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

@@ -24,7 +24,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LiveRegion = function LiveRegion(props) {
   var ariaSelection = props.ariaSelection,
     focusedOption = props.focusedOption,

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

@@ -121,7 +121,6 @@ var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemov
     }
   });
 };
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MultiValueGeneric = function MultiValueGeneric(_ref4) {
   var children = _ref4.children,
     innerProps = _ref4.innerProps;
@@ -160,15 +159,12 @@ var renderIcon = function renderIcon() {
       color: "currentColor"
     }));
   }
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    (0, _react.jsx)(_selectClear.default, {
-      label: "",
-      primaryColor: "transparent",
-      size: "small",
-      secondaryColor: "inherit"
-    })
-  );
+  return (0, _react.jsx)(_selectClear.default, {
+    label: "",
+    primaryColor: "transparent",
+    size: "small",
+    secondaryColor: "inherit"
+  });
 };
 function MultiValueRemove(_ref5) {
   var isDisabled = _ref5.isDisabled,

package/dist/cjs/filters.js

@@ -19,7 +19,6 @@ var defaultStringify = function defaultStringify(option) {
 };
 var createFilter = exports.createFilter = function createFilter(config) {
   return function (option, rawInput) {
-    // eslint-disable-next-line no-underscore-dangle
     if (option.data.__isNew__) {
       return true;
     }

package/dist/cjs/select.js

@@ -883,13 +883,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }
       if (isFocused && isDisabled && !prevProps.isDisabled) {
         // ensure select state gets blurred in case Select is programmatically disabled while focused
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           isFocused: false
         }, this.onMenuClose);
       } else if (!isFocused && !isDisabled && prevProps.isDisabled && this.inputRef === document.activeElement) {
         // ensure select state gets focused in case Select is programatically re-enabled while focused (Firefox)
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           isFocused: true
         });
@@ -1023,7 +1021,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       this.setState({
         inputIsHidden: nextFocus !== -1,
         focusedValue: selectValue[nextFocus],
-        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus),
+        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus, "-remove"),
         focusedOption: null,
         focusedOptionId: null
       });
@@ -1367,7 +1365,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             isDisabled: isDisabled,
             key: key,
             index: index,
-            removeProps: {
+            removeProps: _objectSpread(_objectSpread({
               onClick: function onClick() {
                 return _this3.removeValue(opt);
               },
@@ -1376,9 +1374,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
-              },
+              }
+            }, testId && {
               'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
-            },
+            }), {}, {
+              id: "".concat(_this3.getElementId('selected-value'), "-").concat(index, "-remove")
+            }),
             data: opt,
             innerProps: _objectSpread(_objectSpread({}, testId && {
               'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
@@ -1833,8 +1834,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react.default.createElement(ValueContainer, (0, _extends2.default)({}, commonProps, {
         isDisabled: isDisabled,
         isCompact: isCompact,
-        innerProps: _objectSpread({}, testId && {
+        innerProps: _objectSpread(_objectSpread({}, testId && {
           'data-testid': "".concat(testId, "-select--value-container")
+        }), commonProps.isMulti && commonProps.hasValue && !(0, _deviceCheck.isAppleDevice)() && {
+          // Required to keep JAWS from popping out of forms mode when using LEFT/RIGHT arrow keys.
+          // This is Jedi Master level ARIA and not taken lightly. Do not modify without consulting
+          // DST Accessibility.
+          role: 'application'
         })
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/_react.default.createElement(IndicatorsContainer, (0, _extends2.default)({}, commonProps, {
         isDisabled: isDisabled,

package/dist/es2019/compiled/components/group.js

@@ -34,7 +34,7 @@ const Group = props => {
   }, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
-  }), /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
+  }), label && /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,

package/dist/es2019/compiled/components/input.js

@@ -46,10 +46,7 @@ const Input = props => {
     className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
       input: true
     }, inputClassName)]),
-    ref: innerRef
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-
+    ref: innerRef,
     disabled: isDisabled,
     "data-testid": dataId
   }, innerProps)));

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

@@ -7,7 +7,6 @@ import A11yText from './internal/a11y-text';
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 const LiveRegion = props => {
   const {
     ariaSelection,

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

@@ -81,16 +81,12 @@ const renderIcon = () => {
       color: "currentColor"
     }));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    React.createElement(LegacySelectClearIcon, {
-      label: "",
-      primaryColor: "transparent",
-      size: "small",
-      secondaryColor: "inherit"
-    })
-  );
+  return /*#__PURE__*/React.createElement(LegacySelectClearIcon, {
+    label: "",
+    primaryColor: "transparent",
+    size: "small",
+    secondaryColor: "inherit"
+  });
 };
 export function MultiValueRemove({
   isDisabled,

package/dist/es2019/components/internal/use-scroll-lock.js

@@ -27,7 +27,6 @@ function preventInertiaScroll() {
 // `ontouchstart` check works on most browsers
 // `maxTouchPoints` works on IE10/11 and Surface
 function isTouchDevice() {
-  // eslint-disable-next-line compat/compat
   return 'ontouchstart' in window || navigator.maxTouchPoints;
 }
 const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

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

@@ -8,7 +8,6 @@ import Emotion from '../emotion/components/live-region';
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 const LiveRegion = props => fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/emotion/components/group.js

@@ -25,7 +25,7 @@ const Group = props => {
   } = props;
   return jsx("div", _extends({}, getStyleProps(props, 'group', {
     group: true
-  }), innerProps), jsx(Heading, _extends({}, headingProps, {
+  }), innerProps), label && jsx(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,

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

@@ -16,7 +16,6 @@ import A11yText from './internal/a11y-text';
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 const LiveRegion = props => {
   const {
     ariaSelection,

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

@@ -114,7 +114,6 @@ export const multiValueRemoveCSS = ({
     }
   })
 });
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 const MultiValueGeneric = ({
   children,
   innerProps
@@ -152,15 +151,12 @@ const renderIcon = () => {
       color: "currentColor"
     }));
   }
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    jsx(LegacySelectClearIcon, {
-      label: "",
-      primaryColor: "transparent",
-      size: "small",
-      secondaryColor: "inherit"
-    })
-  );
+  return jsx(LegacySelectClearIcon, {
+    label: "",
+    primaryColor: "transparent",
+    size: "small",
+    secondaryColor: "inherit"
+  });
 };
 export function MultiValueRemove({
   isDisabled,

package/dist/es2019/filters.js

@@ -4,7 +4,6 @@ const memoizedStripDiacriticsForInput = memoizeOne(stripDiacritics);
 const trimString = str => str.replace(/^\s+|\s+$/g, '');
 const defaultStringify = option => `${option.label} ${option.value}`;
 export const createFilter = config => (option, rawInput) => {
-  // eslint-disable-next-line no-underscore-dangle
   if (option.data.__isNew__) {
     return true;
   }

package/dist/es2019/select.js

@@ -921,13 +921,11 @@ export default class Select extends Component {
     }
     if (isFocused && isDisabled && !prevProps.isDisabled) {
       // ensure select state gets blurred in case Select is programmatically disabled while focused
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         isFocused: false
       }, this.onMenuClose);
     } else if (!isFocused && !isDisabled && prevProps.isDisabled && this.inputRef === document.activeElement) {
       // ensure select state gets focused in case Select is programatically re-enabled while focused (Firefox)
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         isFocused: true
       });
@@ -1046,7 +1044,7 @@ export default class Select extends Component {
     this.setState({
       inputIsHidden: nextFocus !== -1,
       focusedValue: selectValue[nextFocus],
-      focusedValueId: `${this.getElementId('selected-value')}-${nextFocus}`,
+      focusedValueId: `${this.getElementId('selected-value')}-${nextFocus}-remove`,
       focusedOption: null,
       focusedOptionId: null
     });
@@ -1390,7 +1388,10 @@ export default class Select extends Component {
             onMouseDown: e => {
               e.preventDefault();
             },
-            'data-testid': `${testId}-select--multivalue-${index}-remove`
+            ...(testId && {
+              'data-testid': `${testId}-select--multivalue-${index}-remove`
+            }),
+            id: `${this.getElementId('selected-value')}-${index}-remove`
           },
           data: opt,
           innerProps: {
@@ -1868,6 +1869,12 @@ export default class Select extends Component {
       innerProps: {
         ...(testId && {
           'data-testid': `${testId}-select--value-container`
+        }),
+        ...(commonProps.isMulti && commonProps.hasValue && !isAppleDevice() && {
+          // Required to keep JAWS from popping out of forms mode when using LEFT/RIGHT arrow keys.
+          // This is Jedi Master level ARIA and not taken lightly. Do not modify without consulting
+          // DST Accessibility.
+          role: 'application'
         })
       }
     }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {

package/dist/esm/compiled/components/group.js

@@ -35,7 +35,7 @@ var Group = function Group(props) {
   }, innerProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
-  }), /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
+  }), label && /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,

package/dist/esm/compiled/components/input.js

@@ -46,10 +46,7 @@ var Input = function Input(props) {
     className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
       input: true
     }, inputClassName)]),
-    ref: innerRef
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-
+    ref: innerRef,
     disabled: isDisabled,
     "data-testid": dataId
   }, innerProps)));

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

@@ -10,7 +10,6 @@ import A11yText from './internal/a11y-text';
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LiveRegion = function LiveRegion(props) {
   var ariaSelection = props.ariaSelection,
     focusedOption = props.focusedOption,

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

@@ -88,16 +88,12 @@ var renderIcon = function renderIcon() {
       color: "currentColor"
     }));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    React.createElement(LegacySelectClearIcon, {
-      label: "",
-      primaryColor: "transparent",
-      size: "small",
-      secondaryColor: "inherit"
-    })
-  );
+  return /*#__PURE__*/React.createElement(LegacySelectClearIcon, {
+    label: "",
+    primaryColor: "transparent",
+    size: "small",
+    secondaryColor: "inherit"
+  });
 };
 export function MultiValueRemove(_ref3) {
   var isDisabled = _ref3.isDisabled,

package/dist/esm/components/internal/use-scroll-lock.js

@@ -27,7 +27,6 @@ function preventInertiaScroll() {
 // `ontouchstart` check works on most browsers
 // `maxTouchPoints` works on IE10/11 and Surface
 function isTouchDevice() {
-  // eslint-disable-next-line compat/compat
   return 'ontouchstart' in window || navigator.maxTouchPoints;
 }
 var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

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

@@ -8,7 +8,6 @@ import Emotion from '../emotion/components/live-region';
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LiveRegion = function LiveRegion(props) {
   return fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
 };

package/dist/esm/emotion/components/group.js

@@ -29,7 +29,7 @@ var Group = function Group(props) {
     selectProps = props.selectProps;
   return jsx("div", _extends({}, getStyleProps(props, 'group', {
     group: true
-  }), innerProps), jsx(Heading, _extends({}, headingProps, {
+  }), innerProps), label && jsx(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     getStyles: getStyles,
     getClassNames: getClassNames,

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

@@ -19,7 +19,6 @@ import A11yText from './internal/a11y-text';
 // Root Container
 // ==============================
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var LiveRegion = function LiveRegion(props) {
   var ariaSelection = props.ariaSelection,
     focusedOption = props.focusedOption,

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

@@ -115,7 +115,6 @@ export var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
     }
   });
 };
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MultiValueGeneric = function MultiValueGeneric(_ref4) {
   var children = _ref4.children,
     innerProps = _ref4.innerProps;
@@ -154,15 +153,12 @@ var renderIcon = function renderIcon() {
       color: "currentColor"
     }));
   }
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    jsx(LegacySelectClearIcon, {
-      label: "",
-      primaryColor: "transparent",
-      size: "small",
-      secondaryColor: "inherit"
-    })
-  );
+  return jsx(LegacySelectClearIcon, {
+    label: "",
+    primaryColor: "transparent",
+    size: "small",
+    secondaryColor: "inherit"
+  });
 };
 export function MultiValueRemove(_ref5) {
   var isDisabled = _ref5.isDisabled,

package/dist/esm/filters.js

@@ -12,7 +12,6 @@ var defaultStringify = function defaultStringify(option) {
 };
 export var createFilter = function createFilter(config) {
   return function (option, rawInput) {
-    // eslint-disable-next-line no-underscore-dangle
     if (option.data.__isNew__) {
       return true;
     }

package/dist/esm/select.js

@@ -874,13 +874,11 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       if (isFocused && isDisabled && !prevProps.isDisabled) {
         // ensure select state gets blurred in case Select is programmatically disabled while focused
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           isFocused: false
         }, this.onMenuClose);
       } else if (!isFocused && !isDisabled && prevProps.isDisabled && this.inputRef === document.activeElement) {
         // ensure select state gets focused in case Select is programatically re-enabled while focused (Firefox)
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           isFocused: true
         });
@@ -1014,7 +1012,7 @@ var Select = /*#__PURE__*/function (_Component) {
       this.setState({
         inputIsHidden: nextFocus !== -1,
         focusedValue: selectValue[nextFocus],
-        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus),
+        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus, "-remove"),
         focusedOption: null,
         focusedOptionId: null
       });
@@ -1358,7 +1356,7 @@ var Select = /*#__PURE__*/function (_Component) {
             isDisabled: isDisabled,
             key: key,
             index: index,
-            removeProps: {
+            removeProps: _objectSpread(_objectSpread({
               onClick: function onClick() {
                 return _this3.removeValue(opt);
               },
@@ -1367,9 +1365,12 @@ var Select = /*#__PURE__*/function (_Component) {
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
-              },
+              }
+            }, testId && {
               'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
-            },
+            }), {}, {
+              id: "".concat(_this3.getElementId('selected-value'), "-").concat(index, "-remove")
+            }),
             data: opt,
             innerProps: _objectSpread(_objectSpread({}, testId && {
               'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
@@ -1824,8 +1825,13 @@ var Select = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
         isDisabled: isDisabled,
         isCompact: isCompact,
-        innerProps: _objectSpread({}, testId && {
+        innerProps: _objectSpread(_objectSpread({}, testId && {
           'data-testid': "".concat(testId, "-select--value-container")
+        }), commonProps.isMulti && commonProps.hasValue && !isAppleDevice() && {
+          // Required to keep JAWS from popping out of forms mode when using LEFT/RIGHT arrow keys.
+          // This is Jedi Master level ARIA and not taken lightly. Do not modify without consulting
+          // DST Accessibility.
+          role: 'application'
         })
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
         isDisabled: isDisabled,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.4.0",
+	"version": "2.4.2",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1",