@atlaskit/react-select 2.5.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/react-select
 
+## 2.6.1
+
+### Patch Changes
+
+- [#159414](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159414)
+  [`51ab2e7b0a12d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51ab2e7b0a12d) -
+  Added aria label for options dialog
+
+## 2.6.0
+
+### Minor Changes
+
+- [#158127](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158127)
+  [`b7989ac128aef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7989ac128aef) -
+  Added "shouldOmitDefaultDescription" prop for `Select` to omit default description being set for
+  "aria-describedby" attribute
+
 ## 2.5.0
 
 ### Minor Changes

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

@@ -22,7 +22,7 @@ var styles = {
   invalid: "_1h6d1bqt _16qsizbr _1u6lizbr _4cvx1bqt",
   focusedInvalid: "_16qsq049",
   disabled: "_1h6dsyzs _lcxvglyw _bfhksyzs _1u6llkwx",
-  focused: "_1h6d1p6i _bfhkr01l _1u6lq049 _4cvx1p6i _irr3r01l",
+  focused: "_1h6d1p6i _bfhkr01l _16qsq049 _1u6lq049 _4cvx1p6i _irr3r01l",
   subtle: "_1h6d1j28 _bfhk1j28 _1u6l3sij",
   subtleFocused: "_bfhkvuon",
   none: "_1h6d1j28 _bfhk1j28 _1u6l3sij _4cvx1j28 _irr31j28"

package/dist/cjs/select.js

@@ -81,7 +81,8 @@ var defaultProps = exports.defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
-  UNSAFE_is_experimental_generic: false
+  UNSAFE_is_experimental_generic: false,
+  shouldOmitDefaultDescription: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -1161,7 +1162,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     key: "calculateDescription",
     value: function calculateDescription(action) {
       var descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
-      var isMulti = this.props.isMulti;
+      var _this$props8 = this.props,
+        isMulti = _this$props8.isMulti,
+        shouldOmitDefaultDescription = _this$props8.shouldOmitDefaultDescription;
       var selectValue = this.state.selectValue;
       var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
       if (!isMulti && selectValue.length && action !== 'initial-input-focus') {
@@ -1170,7 +1173,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       if (isMulti) {
         var multiMessage = this.getElementId('multi-message');
         return {
-          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, multiMessage].join(' ') : [defaultDescription, multiMessage].join(' ')
+          'aria-describedby': [descriptionProp, !shouldOmitDefaultDescription && defaultDescription, multiMessage].filter(Boolean).join(' ')
         };
       } else {
         return {
@@ -1239,22 +1242,22 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     // Renderers
     // ==============================
     function renderInput() {
-      var _this$props8 = this.props,
-        descriptionId = _this$props8.descriptionId,
-        form = _this$props8.form,
-        inputId = _this$props8.inputId,
-        inputValue = _this$props8.inputValue,
-        isDisabled = _this$props8.isDisabled,
-        isInvalid = _this$props8.isInvalid,
-        isRequired = _this$props8.isRequired,
-        isSearchable = _this$props8.isSearchable,
-        label = _this$props8.label,
-        labelId = _this$props8.labelId,
-        menuIsOpen = _this$props8.menuIsOpen,
-        required = _this$props8.required,
-        _this$props8$tabIndex = _this$props8.tabIndex,
-        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex,
-        testId = _this$props8.testId;
+      var _this$props9 = this.props,
+        descriptionId = _this$props9.descriptionId,
+        form = _this$props9.form,
+        inputId = _this$props9.inputId,
+        inputValue = _this$props9.inputValue,
+        isDisabled = _this$props9.isDisabled,
+        isInvalid = _this$props9.isInvalid,
+        isRequired = _this$props9.isRequired,
+        isSearchable = _this$props9.isSearchable,
+        label = _this$props9.label,
+        labelId = _this$props9.labelId,
+        menuIsOpen = _this$props9.menuIsOpen,
+        required = _this$props9.required,
+        _this$props9$tabIndex = _this$props9.tabIndex,
+        tabIndex = _this$props9$tabIndex === void 0 ? 0 : _this$props9$tabIndex,
+        testId = _this$props9.testId;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1329,13 +1332,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         SingleValue = _this$getComponents2.SingleValue,
         Placeholder = _this$getComponents2.Placeholder;
       var commonProps = this.commonProps;
-      var _this$props9 = this.props,
-        controlShouldRenderValue = _this$props9.controlShouldRenderValue,
-        isDisabled = _this$props9.isDisabled,
-        isMulti = _this$props9.isMulti,
-        inputValue = _this$props9.inputValue,
-        placeholder = _this$props9.placeholder,
-        testId = _this$props9.testId;
+      var _this$props10 = this.props,
+        controlShouldRenderValue = _this$props10.controlShouldRenderValue,
+        isDisabled = _this$props10.isDisabled,
+        isMulti = _this$props10.isMulti,
+        inputValue = _this$props10.inputValue,
+        placeholder = _this$props10.placeholder,
+        testId = _this$props10.testId;
       var _this$state5 = this.state,
         selectValue = _this$state5.selectValue,
         focusedValue = _this$state5.focusedValue,
@@ -1405,12 +1408,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var _this$getComponents3 = this.getComponents(),
         ClearIndicator = _this$getComponents3.ClearIndicator;
       var commonProps = this.commonProps;
-      var _this$props10 = this.props,
-        clearControlLabel = _this$props10.clearControlLabel,
-        isDisabled = _this$props10.isDisabled,
-        isLoading = _this$props10.isLoading,
-        spacing = _this$props10.spacing,
-        testId = _this$props10.testId;
+      var _this$props11 = this.props,
+        clearControlLabel = _this$props11.clearControlLabel,
+        isDisabled = _this$props11.isDisabled,
+        isLoading = _this$props11.isLoading,
+        spacing = _this$props11.spacing,
+        testId = _this$props11.testId;
       var isFocused = this.state.isFocused;
       if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
         return null;
@@ -1436,11 +1439,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var _this$getComponents4 = this.getComponents(),
         LoadingIndicator = _this$getComponents4.LoadingIndicator;
       var commonProps = this.commonProps;
-      var _this$props11 = this.props,
-        isDisabled = _this$props11.isDisabled,
-        isLoading = _this$props11.isLoading,
-        spacing = _this$props11.spacing,
-        testId = _this$props11.testId;
+      var _this$props12 = this.props,
+        isDisabled = _this$props12.isDisabled,
+        isLoading = _this$props12.isLoading,
+        spacing = _this$props12.spacing,
+        testId = _this$props12.testId;
       var isFocused = this.state.isFocused;
       if (!LoadingIndicator || !isLoading) {
         return null;
@@ -1467,10 +1470,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         return null;
       }
       var commonProps = this.commonProps;
-      var _this$props12 = this.props,
-        isDisabled = _this$props12.isDisabled,
-        spacing = _this$props12.spacing,
-        testId = _this$props12.testId;
+      var _this$props13 = this.props,
+        isDisabled = _this$props13.isDisabled,
+        spacing = _this$props13.spacing,
+        testId = _this$props13.testId;
       var isFocused = this.state.isFocused;
       var isCompact = spacing === 'compact';
       var innerProps = _objectSpread({
@@ -1502,25 +1505,25 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         Option = _this$getComponents6.Option;
       var commonProps = this.commonProps;
       var focusedOption = this.state.focusedOption;
-      var _this$props13 = this.props,
-        captureMenuScroll = _this$props13.captureMenuScroll,
-        inputValue = _this$props13.inputValue,
-        isLoading = _this$props13.isLoading,
-        loadingMessage = _this$props13.loadingMessage,
-        minMenuHeight = _this$props13.minMenuHeight,
-        maxMenuHeight = _this$props13.maxMenuHeight,
-        menuIsOpen = _this$props13.menuIsOpen,
-        menuPlacement = _this$props13.menuPlacement,
-        menuPosition = _this$props13.menuPosition,
-        menuPortalTarget = _this$props13.menuPortalTarget,
-        menuShouldBlockScroll = _this$props13.menuShouldBlockScroll,
-        menuShouldScrollIntoView = _this$props13.menuShouldScrollIntoView,
-        noOptionsMessage = _this$props13.noOptionsMessage,
-        onMenuScrollToTop = _this$props13.onMenuScrollToTop,
-        onMenuScrollToBottom = _this$props13.onMenuScrollToBottom,
-        labelId = _this$props13.labelId,
-        label = _this$props13.label,
-        testId = _this$props13.testId;
+      var _this$props14 = this.props,
+        captureMenuScroll = _this$props14.captureMenuScroll,
+        inputValue = _this$props14.inputValue,
+        isLoading = _this$props14.isLoading,
+        loadingMessage = _this$props14.loadingMessage,
+        minMenuHeight = _this$props14.minMenuHeight,
+        maxMenuHeight = _this$props14.maxMenuHeight,
+        menuIsOpen = _this$props14.menuIsOpen,
+        menuPlacement = _this$props14.menuPlacement,
+        menuPosition = _this$props14.menuPosition,
+        menuPortalTarget = _this$props14.menuPortalTarget,
+        menuShouldBlockScroll = _this$props14.menuShouldBlockScroll,
+        menuShouldScrollIntoView = _this$props14.menuShouldScrollIntoView,
+        noOptionsMessage = _this$props14.noOptionsMessage,
+        onMenuScrollToTop = _this$props14.onMenuScrollToTop,
+        onMenuScrollToBottom = _this$props14.onMenuScrollToBottom,
+        labelId = _this$props14.labelId,
+        label = _this$props14.label,
+        testId = _this$props14.testId;
       if (!menuIsOpen) {
         return null;
       }
@@ -1673,6 +1676,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             },
             innerProps: _objectSpread(_objectSpread({
               role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+              'aria-label': _this4.props['UNSAFE_is_experimental_generic'] ? "".concat(_this4.props['aria-label'] || label, "-dialog") : null,
               'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, testId && {
@@ -1701,12 +1705,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     key: "renderFormField",
     value: function renderFormField() {
       var _this5 = this;
-      var _this$props14 = this.props,
-        delimiter = _this$props14.delimiter,
-        isDisabled = _this$props14.isDisabled,
-        isMulti = _this$props14.isMulti,
-        required = _this$props14.required,
-        name = _this$props14.name;
+      var _this$props15 = this.props,
+        delimiter = _this$props15.delimiter,
+        isDisabled = _this$props15.isDisabled,
+        isMulti = _this$props15.isMulti,
+        required = _this$props15.required,
+        name = _this$props15.name;
       var selectValue = this.state.selectValue;
       if (required && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/_react.default.createElement(_internal.RequiredInput, {
@@ -1793,17 +1797,17 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         IndicatorsContainer = _this$getComponents7.IndicatorsContainer,
         SelectContainer = _this$getComponents7.SelectContainer,
         ValueContainer = _this$getComponents7.ValueContainer;
-      var _this$props15 = this.props,
-        className = _this$props15.className,
-        id = _this$props15.id,
-        isDisabled = _this$props15.isDisabled,
-        menuIsOpen = _this$props15.menuIsOpen,
-        isInvalid = _this$props15.isInvalid,
-        testId = _this$props15.testId,
-        _this$props15$appeara = _this$props15.appearance,
-        appearance = _this$props15$appeara === void 0 ? 'default' : _this$props15$appeara,
-        _this$props15$spacing = _this$props15.spacing,
-        spacing = _this$props15$spacing === void 0 ? 'default' : _this$props15$spacing;
+      var _this$props16 = this.props,
+        className = _this$props16.className,
+        id = _this$props16.id,
+        isDisabled = _this$props16.isDisabled,
+        menuIsOpen = _this$props16.menuIsOpen,
+        isInvalid = _this$props16.isInvalid,
+        testId = _this$props16.testId,
+        _this$props16$appeara = _this$props16.appearance,
+        appearance = _this$props16$appeara === void 0 ? 'default' : _this$props16$appeara,
+        _this$props16$spacing = _this$props16.spacing,
+        spacing = _this$props16$spacing === void 0 ? 'default' : _this$props16$spacing;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
       var isCompact = spacing === 'compact';

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

@@ -13,7 +13,7 @@ const styles = {
   invalid: "_1h6d1bqt _16qsizbr _1u6lizbr _4cvx1bqt",
   focusedInvalid: "_16qsq049",
   disabled: "_1h6dsyzs _lcxvglyw _bfhksyzs _1u6llkwx",
-  focused: "_1h6d1p6i _bfhkr01l _1u6lq049 _4cvx1p6i _irr3r01l",
+  focused: "_1h6d1p6i _bfhkr01l _16qsq049 _1u6lq049 _4cvx1p6i _irr3r01l",
   subtle: "_1h6d1j28 _bfhk1j28 _1u6l3sij",
   subtleFocused: "_bfhkvuon",
   none: "_1h6d1j28 _bfhk1j28 _1u6l3sij _4cvx1j28 _irr31j28"

package/dist/es2019/select.js

@@ -56,7 +56,8 @@ export const defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
-  UNSAFE_is_experimental_generic: false
+  UNSAFE_is_experimental_generic: false,
+  shouldOmitDefaultDescription: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   const isDisabled = isOptionDisabled(props, option, selectValue);
@@ -1177,7 +1178,8 @@ export default class Select extends Component {
   calculateDescription(action) {
     const descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
     const {
-      isMulti
+      isMulti,
+      shouldOmitDefaultDescription
     } = this.props;
     const {
       selectValue
@@ -1189,7 +1191,7 @@ export default class Select extends Component {
     if (isMulti) {
       const multiMessage = this.getElementId('multi-message');
       return {
-        'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, multiMessage].join(' ') : [defaultDescription, multiMessage].join(' ')
+        'aria-describedby': [descriptionProp, !shouldOmitDefaultDescription && defaultDescription, multiMessage].filter(Boolean).join(' ')
       };
     } else {
       return {
@@ -1707,6 +1709,7 @@ export default class Select extends Component {
       },
       innerProps: {
         role: this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+        'aria-label': this.props['UNSAFE_is_experimental_generic'] ? `${this.props['aria-label'] || label}-dialog` : null,
         'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || this.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
         id: this.getElementId('listbox'),
         ...(testId && {

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

@@ -13,7 +13,7 @@ var styles = {
   invalid: "_1h6d1bqt _16qsizbr _1u6lizbr _4cvx1bqt",
   focusedInvalid: "_16qsq049",
   disabled: "_1h6dsyzs _lcxvglyw _bfhksyzs _1u6llkwx",
-  focused: "_1h6d1p6i _bfhkr01l _1u6lq049 _4cvx1p6i _irr3r01l",
+  focused: "_1h6d1p6i _bfhkr01l _16qsq049 _1u6lq049 _4cvx1p6i _irr3r01l",
   subtle: "_1h6d1j28 _bfhk1j28 _1u6l3sij",
   subtleFocused: "_bfhkvuon",
   none: "_1h6d1j28 _bfhk1j28 _1u6l3sij _4cvx1j28 _irr31j28"

package/dist/esm/select.js

@@ -72,7 +72,8 @@ export var defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
-  UNSAFE_is_experimental_generic: false
+  UNSAFE_is_experimental_generic: false,
+  shouldOmitDefaultDescription: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -1152,7 +1153,9 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "calculateDescription",
     value: function calculateDescription(action) {
       var descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
-      var isMulti = this.props.isMulti;
+      var _this$props8 = this.props,
+        isMulti = _this$props8.isMulti,
+        shouldOmitDefaultDescription = _this$props8.shouldOmitDefaultDescription;
       var selectValue = this.state.selectValue;
       var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
       if (!isMulti && selectValue.length && action !== 'initial-input-focus') {
@@ -1161,7 +1164,7 @@ var Select = /*#__PURE__*/function (_Component) {
       if (isMulti) {
         var multiMessage = this.getElementId('multi-message');
         return {
-          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, multiMessage].join(' ') : [defaultDescription, multiMessage].join(' ')
+          'aria-describedby': [descriptionProp, !shouldOmitDefaultDescription && defaultDescription, multiMessage].filter(Boolean).join(' ')
         };
       } else {
         return {
@@ -1230,22 +1233,22 @@ var Select = /*#__PURE__*/function (_Component) {
     // Renderers
     // ==============================
     function renderInput() {
-      var _this$props8 = this.props,
-        descriptionId = _this$props8.descriptionId,
-        form = _this$props8.form,
-        inputId = _this$props8.inputId,
-        inputValue = _this$props8.inputValue,
-        isDisabled = _this$props8.isDisabled,
-        isInvalid = _this$props8.isInvalid,
-        isRequired = _this$props8.isRequired,
-        isSearchable = _this$props8.isSearchable,
-        label = _this$props8.label,
-        labelId = _this$props8.labelId,
-        menuIsOpen = _this$props8.menuIsOpen,
-        required = _this$props8.required,
-        _this$props8$tabIndex = _this$props8.tabIndex,
-        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex,
-        testId = _this$props8.testId;
+      var _this$props9 = this.props,
+        descriptionId = _this$props9.descriptionId,
+        form = _this$props9.form,
+        inputId = _this$props9.inputId,
+        inputValue = _this$props9.inputValue,
+        isDisabled = _this$props9.isDisabled,
+        isInvalid = _this$props9.isInvalid,
+        isRequired = _this$props9.isRequired,
+        isSearchable = _this$props9.isSearchable,
+        label = _this$props9.label,
+        labelId = _this$props9.labelId,
+        menuIsOpen = _this$props9.menuIsOpen,
+        required = _this$props9.required,
+        _this$props9$tabIndex = _this$props9.tabIndex,
+        tabIndex = _this$props9$tabIndex === void 0 ? 0 : _this$props9$tabIndex,
+        testId = _this$props9.testId;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1320,13 +1323,13 @@ var Select = /*#__PURE__*/function (_Component) {
         SingleValue = _this$getComponents2.SingleValue,
         Placeholder = _this$getComponents2.Placeholder;
       var commonProps = this.commonProps;
-      var _this$props9 = this.props,
-        controlShouldRenderValue = _this$props9.controlShouldRenderValue,
-        isDisabled = _this$props9.isDisabled,
-        isMulti = _this$props9.isMulti,
-        inputValue = _this$props9.inputValue,
-        placeholder = _this$props9.placeholder,
-        testId = _this$props9.testId;
+      var _this$props10 = this.props,
+        controlShouldRenderValue = _this$props10.controlShouldRenderValue,
+        isDisabled = _this$props10.isDisabled,
+        isMulti = _this$props10.isMulti,
+        inputValue = _this$props10.inputValue,
+        placeholder = _this$props10.placeholder,
+        testId = _this$props10.testId;
       var _this$state5 = this.state,
         selectValue = _this$state5.selectValue,
         focusedValue = _this$state5.focusedValue,
@@ -1396,12 +1399,12 @@ var Select = /*#__PURE__*/function (_Component) {
       var _this$getComponents3 = this.getComponents(),
         ClearIndicator = _this$getComponents3.ClearIndicator;
       var commonProps = this.commonProps;
-      var _this$props10 = this.props,
-        clearControlLabel = _this$props10.clearControlLabel,
-        isDisabled = _this$props10.isDisabled,
-        isLoading = _this$props10.isLoading,
-        spacing = _this$props10.spacing,
-        testId = _this$props10.testId;
+      var _this$props11 = this.props,
+        clearControlLabel = _this$props11.clearControlLabel,
+        isDisabled = _this$props11.isDisabled,
+        isLoading = _this$props11.isLoading,
+        spacing = _this$props11.spacing,
+        testId = _this$props11.testId;
       var isFocused = this.state.isFocused;
       if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
         return null;
@@ -1427,11 +1430,11 @@ var Select = /*#__PURE__*/function (_Component) {
       var _this$getComponents4 = this.getComponents(),
         LoadingIndicator = _this$getComponents4.LoadingIndicator;
       var commonProps = this.commonProps;
-      var _this$props11 = this.props,
-        isDisabled = _this$props11.isDisabled,
-        isLoading = _this$props11.isLoading,
-        spacing = _this$props11.spacing,
-        testId = _this$props11.testId;
+      var _this$props12 = this.props,
+        isDisabled = _this$props12.isDisabled,
+        isLoading = _this$props12.isLoading,
+        spacing = _this$props12.spacing,
+        testId = _this$props12.testId;
       var isFocused = this.state.isFocused;
       if (!LoadingIndicator || !isLoading) {
         return null;
@@ -1458,10 +1461,10 @@ var Select = /*#__PURE__*/function (_Component) {
         return null;
       }
       var commonProps = this.commonProps;
-      var _this$props12 = this.props,
-        isDisabled = _this$props12.isDisabled,
-        spacing = _this$props12.spacing,
-        testId = _this$props12.testId;
+      var _this$props13 = this.props,
+        isDisabled = _this$props13.isDisabled,
+        spacing = _this$props13.spacing,
+        testId = _this$props13.testId;
       var isFocused = this.state.isFocused;
       var isCompact = spacing === 'compact';
       var innerProps = _objectSpread({
@@ -1493,25 +1496,25 @@ var Select = /*#__PURE__*/function (_Component) {
         Option = _this$getComponents6.Option;
       var commonProps = this.commonProps;
       var focusedOption = this.state.focusedOption;
-      var _this$props13 = this.props,
-        captureMenuScroll = _this$props13.captureMenuScroll,
-        inputValue = _this$props13.inputValue,
-        isLoading = _this$props13.isLoading,
-        loadingMessage = _this$props13.loadingMessage,
-        minMenuHeight = _this$props13.minMenuHeight,
-        maxMenuHeight = _this$props13.maxMenuHeight,
-        menuIsOpen = _this$props13.menuIsOpen,
-        menuPlacement = _this$props13.menuPlacement,
-        menuPosition = _this$props13.menuPosition,
-        menuPortalTarget = _this$props13.menuPortalTarget,
-        menuShouldBlockScroll = _this$props13.menuShouldBlockScroll,
-        menuShouldScrollIntoView = _this$props13.menuShouldScrollIntoView,
-        noOptionsMessage = _this$props13.noOptionsMessage,
-        onMenuScrollToTop = _this$props13.onMenuScrollToTop,
-        onMenuScrollToBottom = _this$props13.onMenuScrollToBottom,
-        labelId = _this$props13.labelId,
-        label = _this$props13.label,
-        testId = _this$props13.testId;
+      var _this$props14 = this.props,
+        captureMenuScroll = _this$props14.captureMenuScroll,
+        inputValue = _this$props14.inputValue,
+        isLoading = _this$props14.isLoading,
+        loadingMessage = _this$props14.loadingMessage,
+        minMenuHeight = _this$props14.minMenuHeight,
+        maxMenuHeight = _this$props14.maxMenuHeight,
+        menuIsOpen = _this$props14.menuIsOpen,
+        menuPlacement = _this$props14.menuPlacement,
+        menuPosition = _this$props14.menuPosition,
+        menuPortalTarget = _this$props14.menuPortalTarget,
+        menuShouldBlockScroll = _this$props14.menuShouldBlockScroll,
+        menuShouldScrollIntoView = _this$props14.menuShouldScrollIntoView,
+        noOptionsMessage = _this$props14.noOptionsMessage,
+        onMenuScrollToTop = _this$props14.onMenuScrollToTop,
+        onMenuScrollToBottom = _this$props14.onMenuScrollToBottom,
+        labelId = _this$props14.labelId,
+        label = _this$props14.label,
+        testId = _this$props14.testId;
       if (!menuIsOpen) {
         return null;
       }
@@ -1664,6 +1667,7 @@ var Select = /*#__PURE__*/function (_Component) {
             },
             innerProps: _objectSpread(_objectSpread({
               role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+              'aria-label': _this4.props['UNSAFE_is_experimental_generic'] ? "".concat(_this4.props['aria-label'] || label, "-dialog") : null,
               'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, testId && {
@@ -1692,12 +1696,12 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "renderFormField",
     value: function renderFormField() {
       var _this5 = this;
-      var _this$props14 = this.props,
-        delimiter = _this$props14.delimiter,
-        isDisabled = _this$props14.isDisabled,
-        isMulti = _this$props14.isMulti,
-        required = _this$props14.required,
-        name = _this$props14.name;
+      var _this$props15 = this.props,
+        delimiter = _this$props15.delimiter,
+        isDisabled = _this$props15.isDisabled,
+        isMulti = _this$props15.isMulti,
+        required = _this$props15.required,
+        name = _this$props15.name;
       var selectValue = this.state.selectValue;
       if (required && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/React.createElement(RequiredInput, {
@@ -1784,17 +1788,17 @@ var Select = /*#__PURE__*/function (_Component) {
         IndicatorsContainer = _this$getComponents7.IndicatorsContainer,
         SelectContainer = _this$getComponents7.SelectContainer,
         ValueContainer = _this$getComponents7.ValueContainer;
-      var _this$props15 = this.props,
-        className = _this$props15.className,
-        id = _this$props15.id,
-        isDisabled = _this$props15.isDisabled,
-        menuIsOpen = _this$props15.menuIsOpen,
-        isInvalid = _this$props15.isInvalid,
-        testId = _this$props15.testId,
-        _this$props15$appeara = _this$props15.appearance,
-        appearance = _this$props15$appeara === void 0 ? 'default' : _this$props15$appeara,
-        _this$props15$spacing = _this$props15.spacing,
-        spacing = _this$props15$spacing === void 0 ? 'default' : _this$props15$spacing;
+      var _this$props16 = this.props,
+        className = _this$props16.className,
+        id = _this$props16.id,
+        isDisabled = _this$props16.isDisabled,
+        menuIsOpen = _this$props16.menuIsOpen,
+        isInvalid = _this$props16.isInvalid,
+        testId = _this$props16.testId,
+        _this$props16$appeara = _this$props16.appearance,
+        appearance = _this$props16$appeara === void 0 ? 'default' : _this$props16$appeara,
+        _this$props16$spacing = _this$props16.spacing,
+        spacing = _this$props16$spacing === void 0 ? 'default' : _this$props16$spacing;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
       var isCompact = spacing === 'compact';

package/dist/types/select.d.ts

@@ -425,6 +425,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
     UNSAFE_is_experimental_generic?: boolean;
+    /**
+     * omit default description being set for "aria-describedby" attribute
+     */
+    shouldOmitDefaultDescription?: boolean;
 }
 export declare const defaultProps: {
     'aria-live': string | undefined;
@@ -468,6 +472,7 @@ export declare const defaultProps: {
     tabIndex: number;
     tabSelectsValue: boolean;
     UNSAFE_is_experimental_generic: boolean;
+    shouldOmitDefaultDescription: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -548,6 +553,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         tabIndex: number;
         tabSelectsValue: boolean;
         UNSAFE_is_experimental_generic: boolean;
+        shouldOmitDefaultDescription: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;

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

@@ -425,6 +425,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
     UNSAFE_is_experimental_generic?: boolean;
+    /**
+     * omit default description being set for "aria-describedby" attribute
+     */
+    shouldOmitDefaultDescription?: boolean;
 }
 export declare const defaultProps: {
     'aria-live': string | undefined;
@@ -468,6 +472,7 @@ export declare const defaultProps: {
     tabIndex: number;
     tabSelectsValue: boolean;
     UNSAFE_is_experimental_generic: boolean;
+    shouldOmitDefaultDescription: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -548,6 +553,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         tabIndex: number;
         tabSelectsValue: boolean;
         UNSAFE_is_experimental_generic: boolean;
+        shouldOmitDefaultDescription: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.5.0",
+	"version": "2.6.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,12 +30,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^26.0.0",
+		"@atlaskit/icon": "^26.3.0",
 		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.7.0",
+		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1",