@atlaskit/select 18.2.0 → 18.4.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/select
 
+## 18.4.0
+
+### Minor Changes
+
+- [#157818](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157818)
+  [`87c14ad1a3efa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/87c14ad1a3efa) -
+  Use semantic tags and arias for combobox and listbox and reduce aria-live
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.3.0
+
+### Minor Changes
+
+- [#156026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156026)
+  [`709b9c76673df`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/709b9c76673df) -
+  Add clearControlLabel to select component.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.2.0
 
 ### Minor Changes

package/codemods/18.3.0-select-props.tsx

@@ -0,0 +1,156 @@
+import type {
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	ImportSpecifier,
+	Options,
+} from 'jscodeshift';
+
+function getSpecifier(
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
+	imported?: string,
+) {
+	let specifiers;
+	if (imported) {
+		specifiers = source
+			.find(j.ImportDeclaration)
+			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+			.find(j.ImportSpecifier)
+			.filter((path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported);
+	} else {
+		specifiers = source
+			.find(j.ImportDeclaration)
+			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+			.find(j.ImportDefaultSpecifier);
+	}
+
+	if (!specifiers.length) {
+		return null;
+	}
+
+	return specifiers.nodes()[0]!.local!.name;
+}
+
+function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
+}
+
+function updateSelectProps(j: core.JSCodeshift, source: ReturnType<typeof j>, variant?: string) {
+	const specifier = getSpecifier(j, source, '@atlaskit/select', variant);
+
+	if (!specifier) {
+		return;
+	}
+
+	source.findJSXElements(specifier).forEach((element) => {
+		const propsToRemove = [
+			'aria-errormessage',
+			'aria-live',
+			'ariaLiveMessages',
+			'captureMenuOnScroll',
+			'delimiter',
+			'isRTL',
+			'menuShouldBlockScroll',
+			'screenReaderStatus',
+			'theme',
+		];
+
+		const propsToReplace = {
+			'aria-invalid': 'isInvalid',
+			'aria-label': 'label',
+			'aria-labelledby': 'labelId',
+			disabled: 'isDisabled',
+		} as const;
+
+		propsToRemove.forEach((propName) => getJSXAttributesByName(j, element, propName).remove());
+
+		(Object.keys(propsToReplace) as Array<keyof typeof propsToReplace>).forEach((key) =>
+			getJSXAttributesByName(j, element, key).forEach((attribute) => {
+				j(attribute).find(j.JSXIdentifier).replaceWith(j.jsxIdentifier(propsToReplace[key]));
+			}),
+		);
+
+		// This needs to switch error to true and remove if default/success are used
+		getJSXAttributesByName(j, element, 'validationState').forEach((attribute) => {
+			// If validationState is 'default' or 'success' just remove
+			j(attribute)
+				.filter((attr) => attr.node.value.value.match(/default|success/))
+				.remove();
+
+			// If validationState is 'error' replace with isInvalid
+			j(attribute)
+				.filter((attr) => attr.node.value && attr.node.value.value === 'error')
+				.replaceWith(j.jsxAttribute(j.jsxIdentifier('isInvalid')));
+
+			// TODO: In order to complete the deprecation of validationState, we need to clean up custom props name isInvalid
+			// j(attribute)
+			// 	.find(j.JSXExpressionContainer)
+			// 	.filter((container) => {
+			// 		return j(container).find(j.BooleanLiteral).length === 0;
+			// 	})
+			// 	.forEach((container) => {
+			// 		j(container).replaceWith(
+			// 			j.jsxExpressionContainer(
+			// 				// Type 'JSXEmptyExpression' is not assignable to type 'ExpressionKind'.
+			// 				// @ts-ignore TS2345
+			// 				j.unaryExpression('!', container.node.expression),
+			// 			),
+			// 		);
+			// 	});
+		});
+
+		// TODO: Probably need to wait until Select a11y improvements have shipped
+		// getJSXAttributesByName(j, element, 'escapeClearsValue').remove();
+
+		// TODO: Need to work out how isRequired is spread from Field
+		// getJSXAttributesByName(j, element, 'aria-required').forEach((attribute) => {
+		// 	j(attribute).find(j.JSXIdentifier).replaceWith(j.jsxIdentifier('isRequired'));
+		// });
+
+		// TODO: Need to work out how isRequired is spread from Field
+		// getJSXAttributesByName(j, element, 'required').forEach((attribute) => {
+		// 	j(attribute).find(j.JSXIdentifier).replaceWith(j.jsxIdentifier('isRequired'));
+		// });
+	});
+}
+
+function hasImportDeclaration(
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	importPath: string,
+) {
+	return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
+		.length;
+}
+
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(fileInfo.source);
+
+	if (hasImportDeclaration(j, source, '@atlaskit/select')) {
+		updateSelectProps(j, source);
+		[
+			'AsyncSelect',
+			'CheckboxSelect',
+			'CountrySelect',
+			'CreatableSelect',
+			'PopupSelect',
+			'RadioSelect',
+		].forEach((variant) => updateSelectProps(j, source, variant));
+
+		return source.toSource(options.printOptions || { quote: 'single' });
+	}
+
+	return fileInfo.source;
+}

package/codemods/__tests__/next-select-props.tsx

@@ -0,0 +1,307 @@
+jest.autoMockOff();
+
+import * as transformer from '../18.3.0-select-props';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Update Select props', () => {
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
+			import Foo from '@atlaskit/select';
+
+			const App = () => {
+				return (
+					<Foo
+						aria-errormessage={''}
+						aria-live={''}
+						ariaLiveMessages={''}
+						captureMenuOnScroll={true}
+						delimiter={''}
+						isRTL={true}
+						menuShouldBlockScroll={true}
+						screenReaderStatus={''}
+						theme={{}}
+					/>
+				);
+			};
+		`,
+		`
+			import Foo from '@atlaskit/select';
+
+			const App = () => {
+				return <Foo />;
+			};
+		`,
+		'should remove all deleted props with aliased import name',
+	);
+
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
+			import Select from '@foo/bar';
+
+			const App = () => {
+				return (
+					<Select
+						aria-errormessage={''}
+						aria-live={''}
+						ariaLiveMessages={''}
+						captureMenuOnScroll={true}
+						delimiter={''}
+						isRTL={true}
+						menuShouldBlockScroll={true}
+						screenReaderStatus={''}
+						theme={{}}
+					/>
+				);
+			};
+		`,
+		`
+			import Select from '@foo/bar';
+
+			const App = () => {
+				return (
+					<Select
+						aria-errormessage={''}
+						aria-live={''}
+						ariaLiveMessages={''}
+						captureMenuOnScroll={true}
+						delimiter={''}
+						isRTL={true}
+						menuShouldBlockScroll={true}
+						screenReaderStatus={''}
+						theme={{}}
+					/>
+				);
+			};
+		`,
+		'should not mutate if not from @atlaskit/select',
+	);
+
+	[
+		'Select',
+		'AsyncSelect',
+		'CheckboxSelect',
+		'CountrySelect',
+		'CreatableSelect',
+		'PopupSelect',
+		'RadioSelect',
+	].forEach((identifier) => {
+		const variant = identifier === `Select` ? 'Select' : `{ ${identifier} }`;
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return (
+						<${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+      		`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} />;
+				};
+      		`,
+			`should remove all deleted props for ${identifier} `,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} aria-invalid={true} aria-label={''} aria-labelledby={''} disabled={''} />;
+				};
+      		`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} isInvalid={true} label={''} labelId={''} isDisabled={''} />;
+				};
+      		`,
+			`should transform all replaced props for ${identifier}`,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} validationState='error' />;
+				};
+			`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} isInvalid />;
+				};
+			`,
+			`should transform validationState="error" to isInvalid for ${identifier}`,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} validationState = 'default' />;
+				};
+			`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} />;
+				};
+			`,
+			`should remove validationState when set to "default" for ${identifier}`,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} validationState = 'success' />;
+				};
+			`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} />;
+				};
+			`,
+			`should remove validationState when set to "success" for ${identifier}`,
+		);
+
+		// TODO: Enable once we have cleaned up validationState
+		// defineInlineTest(
+		// 	{ ...transformer, parser: 'tsx' },
+		// 	{},
+		// 	`
+		//       import Select from '@atlaskit/select';
+
+		//       const App = () => {
+		//         return (
+		//           <${identifier}
+		// 						validationState={value}
+		// 					/>
+		//         )
+		//       }
+		//     `,
+		// 	`
+		//       import Select from '@atlaskit/select';
+
+		//       const App = () => {
+		//         return (
+		//           <${identifier}
+		// 						validationState={!value}
+		// 					/>
+		//         );
+		//       }
+		//     `,
+		// 	'should transform validationState to isInvalid and negate when an expression is provided"',
+		// );
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				const App = () => {
+					return (
+						<${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+			`,
+			`
+				const App = () => {
+					return (
+						<${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+			`,
+			'should not mutate JSX if import is missing',
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${identifier === 'Select' ? `Ak${identifier}` : `{${identifier} as Ak${identifier}}`} from '@atlaskit/select';
+
+				const App = () => {
+					return (
+						<Ak${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+      		`,
+			`
+				import ${identifier === 'Select' ? `Ak${identifier}` : `{${identifier} as Ak${identifier}}`} from '@atlaskit/select';
+
+				const App = () => {
+					return <Ak${identifier} />;
+				};
+      		`,
+			`should handle named imports for ${identifier} `,
+		);
+	});
+});

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.2.0";
+var packageVersion = "18.4.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/indicators.js

@@ -7,17 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.LoadingIndicator = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _primitives = require("@atlaskit/primitives");
 var _reactSelect = require("@atlaskit/react-select");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-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 @repo/internal/react/require-jsdoc */ /**
+var _excluded = ["clearControlLabel"];
+/* eslint-disable @repo/internal/react/require-jsdoc */
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; }
 var iconContainerStyles = (0, _primitives.xcss)({
   all: 'unset',
   outline: 'revert',
@@ -29,16 +34,20 @@ var iconContainerStyles = (0, _primitives.xcss)({
 var dropdownWrapperStyles = (0, _primitives.xcss)({
   padding: 'space.075'
 });
-var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
+var ClearIndicator = exports.ClearIndicator = function ClearIndicator(_ref) {
+  var _ref$clearControlLabe = _ref.clearControlLabel,
+    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)(_reactSelect.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
   }), (0, _react.jsx)(_primitives.Pressable, {
     xcss: iconContainerStyles,
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-label": clearControlLabel
   }, (0, _react.jsx)(_crossCircleSelectClear.default, {
-    label: "clear",
+    label: "",
     color: "currentColor",
     LEGACY_size: "small",
     LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"

package/dist/cjs/components/no-options.js

@@ -12,10 +12,7 @@ var _reactSelect = require("@atlaskit/react-select");
  * __No options message__
  */
 var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(props) {
-  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.NoOptionsMessage, props, /*#__PURE__*/_react.default.createElement("span", {
-    id: "no-options",
-    role: "alert"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.NoOptionsMessage, props, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     color: "color.text.subtle"
-  }, props.children || "No options")));
+  }, props.children || "No options"));
 };

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import ReactSelect from '@atlaskit/react-select';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.2.0";
+const packageVersion = "18.4.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/indicators.js

@@ -22,20 +22,26 @@ const iconContainerStyles = xcss({
 const dropdownWrapperStyles = xcss({
   padding: 'space.075'
 });
-export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({}, props, {
-  innerProps: {
-    ...props.innerProps,
-    'aria-hidden': 'false'
-  }
-}), jsx(Pressable, {
-  xcss: iconContainerStyles,
-  tabIndex: -1
-}, jsx(CrossIcon, {
-  label: "clear",
-  color: "currentColor",
-  LEGACY_size: "small",
-  LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
-})));
+export const ClearIndicator = ({
+  clearControlLabel = 'clear',
+  ...props
+}) => {
+  return jsx(components.ClearIndicator, _extends({}, props, {
+    innerProps: {
+      ...props.innerProps,
+      'aria-hidden': 'false'
+    }
+  }), jsx(Pressable, {
+    xcss: iconContainerStyles,
+    tabIndex: -1,
+    "aria-label": clearControlLabel
+  }, jsx(CrossIcon, {
+    label: "",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
+  })));
+};
 export const DropdownIndicator = props =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(components.DropdownIndicator, props, jsx(Inline, {

package/dist/es2019/components/no-options.js

@@ -5,10 +5,7 @@ import { components } from '@atlaskit/react-select';
  * __No options message__
  */
 export const NoOptionsMessage = props => {
-  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement("span", {
-    id: "no-options",
-    role: "alert"
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, props.children || `No options`)));
+  }, props.children || `No options`));
 };

package/dist/esm/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import ReactSelect from '@atlaskit/react-select';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "18.2.0";
+var packageVersion = "18.4.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/indicators.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["clearControlLabel"];
 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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
@@ -25,16 +27,20 @@ var iconContainerStyles = xcss({
 var dropdownWrapperStyles = xcss({
   padding: 'space.075'
 });
-export var ClearIndicator = function ClearIndicator(props) {
+export var ClearIndicator = function ClearIndicator(_ref) {
+  var _ref$clearControlLabe = _ref.clearControlLabel,
+    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
+    props = _objectWithoutProperties(_ref, _excluded);
   return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
   }), jsx(Pressable, {
     xcss: iconContainerStyles,
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-label": clearControlLabel
   }, jsx(CrossIcon, {
-    label: "clear",
+    label: "",
     color: "currentColor",
     LEGACY_size: "small",
     LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"

package/dist/esm/components/no-options.js

@@ -5,10 +5,7 @@ import { components } from '@atlaskit/react-select';
  * __No options message__
  */
 export var NoOptionsMessage = function NoOptionsMessage(props) {
-  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement("span", {
-    id: "no-options",
-    role: "alert"
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, props.children || "No options")));
+  }, props.children || "No options"));
 };

package/dist/types/components/indicators.d.ts

@@ -4,6 +4,6 @@
  */
 import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>({ clearControlLabel, ...props }: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

package/dist/types-ts4.5/components/indicators.d.ts

@@ -4,6 +4,6 @@
  */
 import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>({ clearControlLabel, ...props }: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.2.0",
+	"version": "18.4.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,10 +40,10 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/ds-lib": "^3.1.0",
-		"@atlaskit/icon": "^22.23.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
-		"@atlaskit/react-select": "^1.0.1",
+		"@atlaskit/react-select": "^1.2.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.0.0",
@@ -110,6 +110,10 @@
 		},
 		"platform_dst_select-bump-react-focus-lock": {
 			"type": "boolean"
+		},
+		"design_system_select-a11y-improvement": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"homepage": "https://atlassian.design/components/select/"