@atlaskit/tooltip 18.1.0 → 18.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 18.1.2
+
+### Patch Changes
+
+- [#75714](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75714) [`33f4a64132a3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/33f4a64132a3) - Remove duplicate accessible labels on Icon buttons, which were unnecessarily added through the `aria-label` attribute.
+
+## 18.1.1
+
+### Patch Changes
+
+- [#64251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64251) [`92b280e734a7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92b280e734a7) - Add a hidden tooltip content when tooltip is in a modal for screen reader announcement
+
 ## 18.1.0
 
 ### Minor Changes

package/dist/cjs/Tooltip.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -28,12 +27,12 @@ var _utilities = require("./utilities");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; } /** @jsx jsx */
+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 tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.0"
+  packageVersion: "18.1.2"
 };
 
 // Inverts motion direction
@@ -413,19 +412,25 @@ function Tooltip(_ref) {
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ?
+  var hiddenContent = /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": testId ? "".concat(testId, "-hidden") : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+  _react.default.createElement(_react.default.Fragment, null, children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  })) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
+  })), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/_react.default.createElement(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: tooltipZIndex
-  }, (0, _react2.jsx)(_popper.Popper, {
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -438,9 +443,9 @@ function Tooltip(_ref) {
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return (0, _react2.jsx)(_motion.ExitingPersistence, {
+    return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && (0, _react2.jsx)(_motion.FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -448,7 +453,7 @@ function Tooltip(_ref) {
       duration: state === 'show-immediate' ? 0 : _durations.mediumDurationMs
     }, function (_ref6) {
       var className = _ref6.className;
-      return (0, _react2.jsx)(Container, {
+      return /*#__PURE__*/_react.default.createElement(Container, {
         ref: ref
         /**
          * "Tooltip" classname is a hook used by tests to manipulate
@@ -460,8 +465,7 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip,
-        id: tooltipId
+        onMouseOver: onMouseOverTooltip
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

package/dist/es2019/Tooltip.js

@@ -1,8 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -21,7 +18,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.0"
+  packageVersion: "18.1.2"
 };
 
 // Inverts motion direction
@@ -391,20 +388,26 @@ function Tooltip({
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return jsx(React.Fragment, null, typeof children === 'function' ?
+  const hiddenContent = /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId ? `${testId}-hidden` : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children({
+  React.createElement(React.Fragment, null, children({
     ...tooltipTriggerProps,
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  }) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+  }), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex
-  }, jsx(Popper, {
+  }, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -418,9 +421,9 @@ function Tooltip({
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     const direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return jsx(ExitingPersistence, {
+    return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -428,7 +431,7 @@ function Tooltip({
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
     }, ({
       className
-    }) => jsx(Container, {
+    }) => /*#__PURE__*/React.createElement(Container, {
       ref: ref
       /**
        * "Tooltip" classname is a hook used by tests to manipulate
@@ -440,8 +443,7 @@ function Tooltip({
       placement: tooltipPosition,
       testId: getReferenceElement() ? testId : testId && `${testId}--unresolved`,
       onMouseOut: onMouseOut,
-      onMouseOver: onMouseOverTooltip,
-      id: tooltipId
+      onMouseOver: onMouseOverTooltip
     }, typeof content === 'function' ? content({
       update
     }) : content)));

package/dist/esm/Tooltip.js

@@ -3,10 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-/** @jsx jsx */
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -25,7 +22,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.0"
+  packageVersion: "18.1.2"
 };
 
 // Inverts motion direction
@@ -405,19 +402,25 @@ function Tooltip(_ref) {
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return jsx(React.Fragment, null, typeof children === 'function' ?
+  var hiddenContent = /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId ? "".concat(testId, "-hidden") : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+  React.createElement(React.Fragment, null, children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  })) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+  })), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex
-  }, jsx(Popper, {
+  }, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -430,9 +433,9 @@ function Tooltip(_ref) {
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return jsx(ExitingPersistence, {
+    return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -440,7 +443,7 @@ function Tooltip(_ref) {
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
     }, function (_ref6) {
       var className = _ref6.className;
-      return jsx(Container, {
+      return /*#__PURE__*/React.createElement(Container, {
         ref: ref
         /**
          * "Tooltip" classname is a hook used by tests to manipulate
@@ -452,8 +455,7 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip,
-        id: tooltipId
+        onMouseOver: onMouseOverTooltip
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

package/dist/types/Tooltip.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/dist/types/types.d.ts

@@ -25,10 +25,10 @@ export interface TooltipProps {
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
     content: ReactNode | (({ update }: {
-        update: () => void;
+        update?: () => void;
     }) => ReactNode);
     /**
-     * Extend `TooltipPrimitive` to create your own tooltip and pass it as component
+     * Extend `TooltipPrimitive` to create your own tooltip and pass it as component.
      */
     component?: ComponentType<TooltipPrimitiveProps>;
     /**
@@ -38,13 +38,13 @@ export interface TooltipProps {
     /**
      * Hide the tooltip when the click event is triggered. This should be
      * used when tooltip should be hidden if `onClick` react synthetic event
-     * is triggered, which happens after `onMouseDown` event
+     * is triggered, which happens after `onMouseDown` event.
      */
     hideTooltipOnClick?: boolean;
     /**
      * Hide the tooltip when the mousedown event is triggered. This should be
      * used when tooltip should be hidden if `onMouseDown` react synthetic event
-     * is triggered, which happens before `onClick` event
+     * is triggered, which happens before `onClick` event.
      */
     hideTooltipOnMouseDown?: boolean;
     /**
@@ -72,13 +72,13 @@ export interface TooltipProps {
     /**
      * Replace the wrapping element. This accepts the name of a html tag which will
      * be used to wrap the element.
-     * If you provide a component it needs to support a ref prop which is used by popper for positioning
+     * If you provide a component it needs to support a ref prop which is used by popper for positioning.
      */
     tag?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
         ref: React.Ref<HTMLElement>;
     }>;
     /**
-     * Show only one line of text, and truncate when too long
+     * Used to show only one line of text, and truncate when too long. Avoid this wherever possible, as any important information that is truncated will be visually hidden to the person reading the tooltip.
      */
     truncate?: boolean;
     /**
@@ -91,9 +91,9 @@ export interface TooltipProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests */
+     * serving as a hook for automated tests. */
     testId?: string;
-    /** Analytics context metadata */
+    /** Analytics context metadata. */
     analyticsContext?: Record<string, any>;
     /**
      * Used to define the strategy of popper.

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

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

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

@@ -25,10 +25,10 @@ export interface TooltipProps {
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
     content: ReactNode | (({ update }: {
-        update: () => void;
+        update?: () => void;
     }) => ReactNode);
     /**
-     * Extend `TooltipPrimitive` to create your own tooltip and pass it as component
+     * Extend `TooltipPrimitive` to create your own tooltip and pass it as component.
      */
     component?: ComponentType<TooltipPrimitiveProps>;
     /**
@@ -38,13 +38,13 @@ export interface TooltipProps {
     /**
      * Hide the tooltip when the click event is triggered. This should be
      * used when tooltip should be hidden if `onClick` react synthetic event
-     * is triggered, which happens after `onMouseDown` event
+     * is triggered, which happens after `onMouseDown` event.
      */
     hideTooltipOnClick?: boolean;
     /**
      * Hide the tooltip when the mousedown event is triggered. This should be
      * used when tooltip should be hidden if `onMouseDown` react synthetic event
-     * is triggered, which happens before `onClick` event
+     * is triggered, which happens before `onClick` event.
      */
     hideTooltipOnMouseDown?: boolean;
     /**
@@ -72,13 +72,13 @@ export interface TooltipProps {
     /**
      * Replace the wrapping element. This accepts the name of a html tag which will
      * be used to wrap the element.
-     * If you provide a component it needs to support a ref prop which is used by popper for positioning
+     * If you provide a component it needs to support a ref prop which is used by popper for positioning.
      */
     tag?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
         ref: React.Ref<HTMLElement>;
     }>;
     /**
-     * Show only one line of text, and truncate when too long
+     * Used to show only one line of text, and truncate when too long. Avoid this wherever possible, as any important information that is truncated will be visually hidden to the person reading the tooltip.
      */
     truncate?: boolean;
     /**
@@ -91,9 +91,9 @@ export interface TooltipProps {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests */
+     * serving as a hook for automated tests. */
     testId?: string;
-    /** Analytics context metadata */
+    /** Analytics context metadata. */
     analyticsContext?: Record<string, any>;
     /**
      * Used to define the strategy of popper.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "18.1.0",
+  "version": "18.1.2",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,13 +42,13 @@
     "./utilities": "./src/utilities.ts"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^17.1.0",
+    "@atlaskit/button": "^17.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",