@atlaskit/button 17.17.3 → 17.18.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @atlaskit/button
 
+## 17.18.0
+
+### Minor Changes
+
+- [#111486](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111486)
+  [`f848f651ef678`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f848f651ef678) - ###
+  Accessibility improvement
+
+  New buttons now adds ", Loading" to the accessible name of loading buttons regardless of how they
+  are labelled. This supports labelling by text content (`children`), `aria-label`, and
+  `aria-labelledby`.
+
+  The ", Loading" label was previously part of the loading spinner `<svg>`, which has been relocated
+  because this does not support `aria-label` or `aria-labelledby`. Any test locators for loading
+  buttons may need to be updated.
+
+  The most robust way to find loading buttons is by role and accessible name. This accounts for
+  label precedence. For example:
+
+  ```
+  screen.findByRole("button", {
+    name: /, Loading/,
+  })
+  ```
+
+  To validate a loading button that is already located, use `toHaveAccessibleName()`:
+
+  ```
+  render(<Button testId="foo" isLoading>My label</Button>);
+
+  const button = screen.getByTestId("foo");
+  expect(button).toHaveAccessibleName(`My label , Loading`);
+  ```
+
+  For locating loading spinners, a test ID has been added that is based on the button `testId`. For
+  example:
+
+  ```
+  render(<Button isLoading testId="bar">My label</Button>);
+
+
+  const spinner = screen.getByTestId("bar--loading-spinner-wrapper");
+  expect(spinner).toBeInTheDocument();
+
+  ```
+
 ## 17.17.3
 
 ### Patch Changes

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,

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

@@ -24,6 +24,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var useDefaultButton = function useDefaultButton(_ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     children = _ref.children,
@@ -48,6 +50,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
+    testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size;
   var hasOverlay = Boolean(overlay || isLoading);
@@ -55,6 +58,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, IconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
@@ -93,7 +98,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
       spacing: spacing,
       appearance: appearance,
       isDisabled: isDisabled,
-      isSelected: isSelected
+      isSelected: isSelected,
+      testId: testId
     }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
 /**
  * __Icon Button__
  *
@@ -23,6 +23,7 @@ var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "i
  */
 var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
@@ -60,6 +61,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   var baseProps = (0, _useIconButton.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'button',
     icon: icon,
@@ -82,6 +84,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     ref: ref,
     shape: shape,
     spacing: spacing,
+    testId: testId,
     UNSAFE_size: UNSAFE_size
   });
   if (!isTooltipDisabled) {
@@ -105,6 +108,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       return /*#__PURE__*/_react.default.createElement(_pressable.default
       // Top level props
       , (0, _extends2.default)({}, rest, {
+        "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,
         componentName: "IconButton",
@@ -171,6 +175,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     });
   }
   return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     isDisabled: baseProps.isDisabled,

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

@@ -12,11 +12,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_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 LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
@@ -48,6 +49,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var baseProps = (0, _useIconButton.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     icon: icon,
@@ -69,6 +71,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     ref: ref,
     shape: shape,
     spacing: spacing,
+    testId: testId,
     UNSAFE_size: UNSAFE_size
   });
   if (!isTooltipDisabled) {
@@ -92,6 +95,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
       return /*#__PURE__*/_react.default.createElement(_anchor.default
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       , (0, _extends2.default)({}, rest, {
+        "aria-labelledby": baseProps['aria-labelledby'],
         testId: testId,
         componentName: "LinkIconButton",
         analyticsContext: analyticsContext,
@@ -167,6 +171,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   return /*#__PURE__*/_react.default.createElement(_anchor.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, rest, {
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     onClick: baseProps.onClick,

package/dist/cjs/new-button/variants/icon/use-icon-button.js

@@ -22,6 +22,8 @@ var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base")
 var useIconButton = function useIconButton(_ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     Icon = _ref.icon,
@@ -45,6 +47,7 @@ var useIconButton = function useIconButton(_ref) {
     shape = _ref.shape,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
+    testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size;
   var hasOverlay = Boolean(overlay || isLoading);
   var isCircle = shape === 'circle';
@@ -52,6 +55,8 @@ var useIconButton = function useIconButton(_ref) {
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
     children: /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
@@ -81,7 +86,8 @@ var useIconButton = function useIconButton(_ref) {
       spacing: spacing,
       appearance: appearance,
       isDisabled: isDisabled,
-      isSelected: isSelected
+      isSelected: isSelected,
+      testId: testId
     }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,

package/dist/cjs/new-button/variants/shared/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LOADING_LABEL = void 0;
+var LOADING_LABEL = exports.LOADING_LABEL = ', Loading';

package/dist/cjs/new-button/variants/shared/loading-overlay.js

@@ -33,14 +33,15 @@ function renderLoadingOverlay(_ref2) {
   var appearance = _ref2.appearance,
     spacing = _ref2.spacing,
     isDisabled = _ref2.isDisabled,
-    isSelected = _ref2.isSelected;
+    isSelected = _ref2.isSelected,
+    testId = _ref2.testId;
   return /*#__PURE__*/_react.default.createElement(_spinner.default, {
-    label: ", Loading",
     size: getIconSpacing(spacing),
     appearance: getSpinnerAppearance({
       appearance: appearance,
       isDisabled: isDisabled,
       isSelected: isSelected
-    })
+    }),
+    testId: testId ? "".concat(testId, "--loading-spinner") : undefined
   });
 }

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -8,14 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactUid = require("react-uid");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _constants = require("@atlaskit/theme/constants");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
+var _constants2 = require("./constants");
 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; }
 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; }
@@ -30,10 +33,12 @@ var buttonStyles = (0, _primitives.xcss)({
   alignItems: 'baseline',
   justifyContent: 'center',
   columnGap: 'space.050',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text, ".concat(colors.N500, ")"),
   flexShrink: 0,
   height: "".concat(32 / fontSize, "em"),
@@ -44,6 +49,7 @@ var buttonStyles = (0, _primitives.xcss)({
   verticalAlign: 'middle',
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text, ".concat(colors.N500, ")")
   }
 });
@@ -64,12 +70,15 @@ var defaultInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text, ".concat(colors.N500, ")"),
     transitionDuration: '0s, 0.15s'
   },
   ':active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text, ".concat(colors.B400, ")"),
     transitionDuration: '0s, 0s'
   }
@@ -173,11 +182,13 @@ var subtleInteractiveStyles = (0, _primitives.xcss)({
 });
 var linkStyles = (0, _primitives.xcss)({
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-link, ".concat(colors.B400, ")"),
   background: "var(--ds-background-neutral-subtle, transparent)",
   textDecoration: 'none',
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-link, ".concat(colors.B300, ")"),
     background: "var(--ds-background-neutral-subtle, transparent)"
   },
@@ -188,26 +199,31 @@ var linkStyles = (0, _primitives.xcss)({
   },
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-link, ".concat(colors.B400, ")")
   }
 });
 var subtleLinkStyles = (0, _primitives.xcss)({
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
   background: "var(--ds-background-neutral-subtle, transparent)",
   textDecoration: 'none',
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
     background: "var(--ds-background-neutral-subtle, transparent)"
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text, ".concat(colors.N400, ")"),
     background: "var(--ds-background-neutral-subtle, transparent)"
   },
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-subtle, ".concat(colors.N200, ")")
   }
 });
@@ -234,72 +250,94 @@ var linkDecorationStyles = (0, _primitives.xcss)({
   }
 });
 var disabledStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
   // @ts-expect-error
   color: "var(--ds-text-disabled, #091E424F)",
   ':hover': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
   },
   ':active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
   }
 });
 var selectedStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-selected, ".concat(colors.N700, ")"),
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")")
   }
 });
 var selectedInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")")
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
   }
 });
 
 // TODO: Remove me once we kill color fallbacks
 var selectedWarningStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-selected, ".concat(colors.N800, ")"),
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
   }
 });
 
 // TODO: Remove me once we kill color fallbacks
 var selectedDangerStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-selected, ".concat(colors.R500, ")"),
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-selected, ".concat(colors.R500, ")")
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-selected, ".concat(colors.R500, ")")
   }
 });
@@ -308,14 +346,17 @@ var selectedDangerStyles = (0, _primitives.xcss)({
 var selectedDiscoveryStyles = (0, _primitives.xcss)({
   background: "var(--ds-background-selected, #403294)",
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
     background: "var(--ds-background-selected, #403294)"
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
     background: "var(--ds-background-selected, #403294)"
   }
@@ -442,9 +483,16 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
-    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
+    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy;
   var localRef = (0, _react.useRef)(null);
   var splitButtonContext = (0, _splitButtonContext.useSplitButtonContext)();
+  // TODO: Use React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  var loadingLabelId = (0, _reactUid.uid)({
+    ariaLabelledBy: ariaLabelledBy
+  });
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
@@ -468,7 +516,11 @@ var useButtonBase = function useButtonBase(_ref) {
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       as: "span",
       xcss: overlayStyles
-    }, overlay) : null)
+    }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+      id: loadingLabelId
+    }, ", Loading")),
+    'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(_constants2.LOADING_LABEL) : ariaLabel,
+    'aria-labelledby': isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy
   }, (0, _blockEvents.default)(isEffectivelyDisabled, {
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

package/dist/cjs/old-button/button.js

@@ -15,7 +15,7 @@ var _components = require("@atlaskit/theme/components");
 var _buttonBase = _interopRequireDefault(require("./shared/button-base"));
 var _css = require("./shared/css");
 var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
-var _excluded = ["appearance", "children", "iconBefore", "iconAfter", "isSelected", "onMouseDown", "onMouseUp", "shouldFitContainer", "spacing"];
+var _excluded = ["appearance", "children", "iconBefore", "iconAfter", "isSelected", "onMouseDown", "onMouseUp", "shouldFitContainer", "spacing"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;