@atlaskit/button 17.17.2 → 17.18.0

package/codemods/optimistic-15.0.0-lite-mode.tsx

@@ -1,81 +1,72 @@
 import { type NodePath } from 'ast-types/lib/node-path';
-import type {
-  API,
-  default as core,
-  FileInfo,
-  JSXElement,
-  Node,
-  Options,
-} from 'jscodeshift';
+import type { API, default as core, FileInfo, JSXElement, Node, Options } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
 import { convertButtonType, transformButton } from './helpers/15.0.0-runner';
 import {
-  addCommentBefore,
-  addCommentToStartOfFile,
-  addToImport,
-  changeImportFor,
-  getDefaultSpecifierName,
-  getSafeImportName,
-  isOnlyUsingNameForJSX,
-  isUsingProp,
-  isUsingSupportedSpread,
-  type Nullable,
-  tryCreateImport,
+	addCommentBefore,
+	addCommentToStartOfFile,
+	addToImport,
+	changeImportFor,
+	getDefaultSpecifierName,
+	getSafeImportName,
+	isOnlyUsingNameForJSX,
+	isUsingProp,
+	isUsingSupportedSpread,
+	type Nullable,
+	tryCreateImport,
 } from './helpers/helpers-generic';
 
 function changeUsage({
-  j,
-  base,
-  packageName,
+	j,
+	base,
+	packageName,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<Node>;
-  packageName: string;
+	j: core.JSCodeshift;
+	base: Collection<Node>;
+	packageName: string;
 }): void {
-  // 1. Are we using the default export?
-  // If not: we can exit early!
-  const defaultName: Nullable<string> = getDefaultSpecifierName({
-    j,
-    base,
-    packageName,
-  });
-  if (defaultName == null) {
-    return;
-  }
+	// 1. Are we using the default export?
+	// If not: we can exit early!
+	const defaultName: Nullable<string> = getDefaultSpecifierName({
+		j,
+		base,
+		packageName,
+	});
+	if (defaultName == null) {
+		return;
+	}
 
-  // Only supporting cases where default identifier is only used in JSX
-  const isSupported: boolean = isOnlyUsingNameForJSX({
-    j,
-    base,
-    name: defaultName,
-  });
+	// Only supporting cases where default identifier is only used in JSX
+	const isSupported: boolean = isOnlyUsingNameForJSX({
+		j,
+		base,
+		name: defaultName,
+	});
 
-  if (!isSupported) {
-    tryCreateImport({
-      j,
-      base,
-      relativeToPackage: '@atlaskit/button',
-      packageName: '@atlaskit/button/standard-button',
-    });
-    addToImport({
-      j,
-      base,
-      // we can safely use the default name, because it was being used before
-      importSpecifier: j.importDefaultSpecifier(j.identifier(defaultName)),
-      packageName: '@atlaskit/button/standard-button',
-    });
+	if (!isSupported) {
+		tryCreateImport({
+			j,
+			base,
+			relativeToPackage: '@atlaskit/button',
+			packageName: '@atlaskit/button/standard-button',
+		});
+		addToImport({
+			j,
+			base,
+			// we can safely use the default name, because it was being used before
+			importSpecifier: j.importDefaultSpecifier(j.identifier(defaultName)),
+			packageName: '@atlaskit/button/standard-button',
+		});
 
-    addCommentBefore({
-      j,
-      target: base
-        .find(j.ImportDeclaration)
-        .filter(
-          (declaration) =>
-            declaration.value.source.value ===
-            '@atlaskit/button/standard-button',
-        ),
-      message: `
+		addCommentBefore({
+			j,
+			target: base
+				.find(j.ImportDeclaration)
+				.filter(
+					(declaration) => declaration.value.source.value === '@atlaskit/button/standard-button',
+				),
+			message: `
         This file does not exclusively use Button in JSX.
         The codemod is unable to know which button variant, so it is using
         the standard button: "@atlaskit/button/standard-button".
@@ -83,203 +74,189 @@ function changeUsage({
         Please validate this decision.
         You might need to change the usage of Button to either LoadingButton or CustomThemeButton
       `,
-    });
-    return;
-  }
+		});
+		return;
+	}
 
-  // Find usages of the Button component
-  // There are three possible import statements:
-  //  1. import Button from '@atlaskit/button/standard';
-  //  2. import LoadingButton from '@atlaskit/button/loading-button';
-  //  3. import CustomThemeButton from '@atlaskit/button/custom-theme-button';
+	// Find usages of the Button component
+	// There are three possible import statements:
+	//  1. import Button from '@atlaskit/button/standard';
+	//  2. import LoadingButton from '@atlaskit/button/loading-button';
+	//  3. import CustomThemeButton from '@atlaskit/button/custom-theme-button';
 
-  // What to do if any of the names clash?
-  // - In the case of clash: prefix with 'DS' (eg import DSLoadingButton from '@atlaskit/button/loading-button';)
+	// What to do if any of the names clash?
+	// - In the case of clash: prefix with 'DS' (eg import DSLoadingButton from '@atlaskit/button/loading-button';)
 
-  // What to do if old Button was aliased? eg "AkButton"
-  // - We cannot use that existing alias as we might have three different Button imports in the file
-  // - We automatically will be be swapping to the standard names with 'DS' prefix for all imports
+	// What to do if old Button was aliased? eg "AkButton"
+	// - We cannot use that existing alias as we might have three different Button imports in the file
+	// - We automatically will be be swapping to the standard names with 'DS' prefix for all imports
 
-  type Groups = {
-    standard: NodePath<JSXElement, JSXElement>[];
-    loading: NodePath<JSXElement, JSXElement>[];
-    customTheme: NodePath<JSXElement, JSXElement>[];
-  };
+	type Groups = {
+		standard: NodePath<JSXElement, JSXElement>[];
+		loading: NodePath<JSXElement, JSXElement>[];
+		customTheme: NodePath<JSXElement, JSXElement>[];
+	};
 
-  const groups: Groups = {
-    standard: [],
-    loading: [],
-    customTheme: [],
-  };
+	const groups: Groups = {
+		standard: [],
+		loading: [],
+		customTheme: [],
+	};
 
-  base.findJSXElements(defaultName).forEach((path) => {
-    const hasThemeProp: boolean = isUsingProp({
-      j,
-      base,
-      element: path,
-      propName: 'theme',
-    });
+	base.findJSXElements(defaultName).forEach((path) => {
+		const hasThemeProp: boolean = isUsingProp({
+			j,
+			base,
+			element: path,
+			propName: 'theme',
+		});
 
-    if (hasThemeProp) {
-      groups.customTheme.push(path);
-      return;
-    }
+		if (hasThemeProp) {
+			groups.customTheme.push(path);
+			return;
+		}
 
-    if (!isUsingSupportedSpread({ j, base, element: path })) {
-      addCommentToStartOfFile({
-        j,
-        base,
-        message: `
+		if (!isUsingSupportedSpread({ j, base, element: path })) {
+			addCommentToStartOfFile({
+				j,
+				base,
+				message: `
           Detected spreading props (<Button {...props} />) that was too complex for our codemod to understand
           Our codemod will only look at inline objects, or objects defined in the same file (ObjectExpression's)
           We have opted for our safest upgrade component in this file: '<CustomThemeButton />'
         `,
-      });
-      groups.customTheme.push(path);
-      return;
-    }
+			});
+			groups.customTheme.push(path);
+			return;
+		}
 
-    const isUsingThemeInFile: boolean =
-      base
-        .find(j.ImportDeclaration)
-        .filter(
-          (declaration) =>
-            declaration.value.source.value ===
-            '@atlaskit/button/custom-theme-button',
-        )
-        .find(j.ImportSpecifier)
-        .filter((specifier) => specifier.value.imported.name === 'Theme')
-        .length > 0;
+		const isUsingThemeInFile: boolean =
+			base
+				.find(j.ImportDeclaration)
+				.filter(
+					(declaration) =>
+						declaration.value.source.value === '@atlaskit/button/custom-theme-button',
+				)
+				.find(j.ImportSpecifier)
+				.filter((specifier) => specifier.value.imported.name === 'Theme').length > 0;
 
-    if (isUsingThemeInFile) {
-      addCommentToStartOfFile({
-        j,
-        base,
-        message: `
+		if (isUsingThemeInFile) {
+			addCommentToStartOfFile({
+				j,
+				base,
+				message: `
           Using "import { Theme } from '@atlaskit/button/custom-theme-button" in a file
           will cause all buttons in that file to be safely converted to a <CustomThemeButton/>
         `,
-      });
+			});
 
-      groups.customTheme.push(path);
-      return;
-    }
+			groups.customTheme.push(path);
+			return;
+		}
 
-    const hasIsLoadingProp: boolean = isUsingProp({
-      j,
-      base,
-      element: path,
-      propName: 'isLoading',
-    });
+		const hasIsLoadingProp: boolean = isUsingProp({
+			j,
+			base,
+			element: path,
+			propName: 'isLoading',
+		});
 
-    if (hasIsLoadingProp) {
-      groups.loading.push(path);
-      return;
-    }
+		if (hasIsLoadingProp) {
+			groups.loading.push(path);
+			return;
+		}
 
-    groups.standard.push(path);
-    return;
-  });
+		groups.standard.push(path);
+		return;
+	});
 
-  convertButtonType({
-    j,
-    base,
-    elements: groups.standard,
-    name: getSafeImportName({
-      j,
-      base,
-      currentDefaultSpecifierName: defaultName,
-      desiredName: 'Button',
-      fallbackName: 'DSButton',
-    }),
-    newPackageName: '@atlaskit/button/standard-button',
-  });
+	convertButtonType({
+		j,
+		base,
+		elements: groups.standard,
+		name: getSafeImportName({
+			j,
+			base,
+			currentDefaultSpecifierName: defaultName,
+			desiredName: 'Button',
+			fallbackName: 'DSButton',
+		}),
+		newPackageName: '@atlaskit/button/standard-button',
+	});
 
-  convertButtonType({
-    j,
-    base,
-    elements: groups.loading,
-    newPackageName: '@atlaskit/button/loading-button',
-    name: getSafeImportName({
-      j,
-      base,
-      desiredName: 'LoadingButton',
-      fallbackName: 'DSLoadingButton',
-      currentDefaultSpecifierName: defaultName,
-    }),
-  });
-  convertButtonType({
-    j,
-    base,
-    elements: groups.customTheme,
-    newPackageName: '@atlaskit/button/custom-theme-button',
-    name: getSafeImportName({
-      j,
-      base,
-      currentDefaultSpecifierName: defaultName,
-      desiredName: 'CustomThemeButton',
-      fallbackName: 'DSCustomThemeButton',
-    }),
-  });
+	convertButtonType({
+		j,
+		base,
+		elements: groups.loading,
+		newPackageName: '@atlaskit/button/loading-button',
+		name: getSafeImportName({
+			j,
+			base,
+			desiredName: 'LoadingButton',
+			fallbackName: 'DSLoadingButton',
+			currentDefaultSpecifierName: defaultName,
+		}),
+	});
+	convertButtonType({
+		j,
+		base,
+		elements: groups.customTheme,
+		newPackageName: '@atlaskit/button/custom-theme-button',
+		name: getSafeImportName({
+			j,
+			base,
+			currentDefaultSpecifierName: defaultName,
+			desiredName: 'CustomThemeButton',
+			fallbackName: 'DSCustomThemeButton',
+		}),
+	});
 }
 
-export default function transformer(
-  file: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  return transformButton({
-    j,
-    file,
-    custom: (base: Collection<any>) => {
-      changeImportFor({
-        j,
-        base,
-        option: {
-          type: 'keep-name',
-          name: 'ButtonProps',
-          behaviour: 'keep-as-named-import',
-        },
-        oldPackagePath: '@atlaskit/button',
-        newPackagePath: '@atlaskit/button/types',
-      });
+export default function transformer(file: FileInfo, { jscodeshift: j }: API, options: Options) {
+	return transformButton({
+		j,
+		file,
+		custom: (base: Collection<any>) => {
+			changeImportFor({
+				j,
+				base,
+				option: {
+					type: 'keep-name',
+					name: 'ButtonProps',
+					behaviour: 'keep-as-named-import',
+				},
+				oldPackagePath: '@atlaskit/button',
+				newPackagePath: '@atlaskit/button/types',
+			});
 
-      const isUsingButtonPropsType: boolean =
-        base
-          .find(j.ImportDeclaration)
-          .filter(
-            (declaration) =>
-              declaration.value.source.value === '@atlaskit/button/types',
-          )
-          .find(j.ImportSpecifier)
-          .filter(
-            (specifier) => specifier.value.imported.name === 'ButtonProps',
-          ).length > 0;
+			const isUsingButtonPropsType: boolean =
+				base
+					.find(j.ImportDeclaration)
+					.filter((declaration) => declaration.value.source.value === '@atlaskit/button/types')
+					.find(j.ImportSpecifier)
+					.filter((specifier) => specifier.value.imported.name === 'ButtonProps').length > 0;
 
-      if (isUsingButtonPropsType) {
-        const target = base
-          .find(j.ImportDeclaration)
-          .filter(
-            (declaration) =>
-              declaration.value.source.value === '@atlaskit/button/types',
-          );
-        addCommentBefore({
-          j,
-          target,
-          message: `
+			if (isUsingButtonPropsType) {
+				const target = base
+					.find(j.ImportDeclaration)
+					.filter((declaration) => declaration.value.source.value === '@atlaskit/button/types');
+				addCommentBefore({
+					j,
+					target,
+					message: `
       Verify ButtonProps is the right prop type
       You might need the LoadingButtonProps, CustomButtonProps types which can be imported from '@atlaskit/button/types'
     `,
-        });
-      }
+				});
+			}
 
-      changeUsage({
-        j,
-        base,
-        packageName: '@atlaskit/button',
-      });
-    },
-  });
+			changeUsage({
+				j,
+				base,
+				packageName: '@atlaskit/button',
+			});
+		},
+	});
 }
 
 // Note: not exporting a 'parser' because doing so

package/dist/cjs/containers/button-group.js

@@ -11,10 +11,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var buttonGroupStyles = (0, _react2.css)({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> *': {
     flex: '1 0 auto'
   }

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -10,6 +10,8 @@ var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var fontSize = (0, _constants.fontSize)();
 var heights = {
   default: "".concat(32 / fontSize, "em"),
@@ -23,9 +25,11 @@ var baseDividerStyles = (0, _react.css)({
   zIndex: 2
 });
 var defaultDividerStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: heights.default
 });
 var compactDividerStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: heights.compact
 });
 var dividerDisabledStyles = (0, _react.css)({
@@ -75,14 +79,14 @@ var splitButtonStyles = (0, _react.css)({
   whiteSpace: 'nowrap'
 });
 var primaryButtonStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'button,a': {
     borderEndEndRadius: 0,
     borderStartEndRadius: 0
   }
 });
 var secondaryButtonStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'button,a': {
     borderEndStartRadius: 0,
     borderStartStartRadius: 0

package/dist/cjs/new-button/variants/default/button.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
 /**
  * __Button__
  *
@@ -23,6 +23,8 @@ var _excluded = ["analyticsContext", "appearance", "autoFocus", "children", "ico
 var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     autoFocus = _ref.autoFocus,
     children = _ref.children,
     iconAfter = _ref.iconAfter,
@@ -51,6 +53,8 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var baseProps = (0, _useDefaultButton.default)({
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -76,12 +80,15 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
+    testId: testId,
     UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size: UNSAFE_iconBefore_size
   });
   return /*#__PURE__*/_react.default.createElement(_pressable.default
   // TODO: Remove spread props
   , (0, _extends2.default)({}, rest, {
+    "aria-label": baseProps['aria-label'],
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     isDisabled: baseProps.isDisabled,

package/dist/cjs/new-button/variants/default/link.js

@@ -11,12 +11,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     autoFocus = _ref.autoFocus,
     children = _ref.children,
     href = _ref.href,
@@ -43,6 +45,8 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var baseProps = (0, _useDefaultButton.default)({
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -67,12 +71,15 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
+    testId: testId,
     UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size: UNSAFE_iconBefore_size
   });
   return /*#__PURE__*/_react.default.createElement(_anchor.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, rest, {
+    "aria-label": baseProps['aria-label'],
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     onClick: baseProps.onClick,