@atlaskit/primitives 7.0.3 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/primitives
 
+## 7.1.0
+
+### Minor Changes
+
+- [#110702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110702)
+  [`b8c2eefeb195b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8c2eefeb195b) - -
+  Anchor and Pressable primitives no longer require `children`, so labels can be supplied through
+  aria attributes if required
+
+### Patch Changes
+
+- [#110702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110702)
+  [`b8c2eefeb195b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8c2eefeb195b) - -
+  Fixed a bug with Anchor, where the "(opens new window)" label was not being automatically appended
+  to `aria-label` or `aria-labelledby`.
+
 ## 7.0.3
 
 ### Patch Changes

package/dist/cjs/components/anchor.js

@@ -11,6 +11,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _appProvider = require("@atlaskit/app-provider");
@@ -19,7 +20,7 @@ var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _xcss = require("../xcss/xcss");
 var _box = _interopRequireDefault(require("./box"));
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"];
+var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
 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" != _typeof3(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; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -46,6 +47,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
 var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
@@ -65,18 +67,25 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     interactionName = _ref.interactionName,
     componentName = _ref.componentName,
     analyticsContext = _ref.analyticsContext,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var interactionContext = (0, _react.useContext)(_interactionContext.default);
   var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
     interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
     providedOnClick(e, analyticsEvent);
   }, [providedOnClick, interactionContext, interactionName]);
+  // TODO: Use React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  var opensNewWindowLabelId = (0, _reactUid.uid)({
+    ariaLabelledBy: ariaLabelledBy
+  });
   var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
     fn: handleClick,
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.3",
+    packageVersion: "7.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -117,11 +126,15 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
-  }), children, target === '_blank' && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "(opens new window)"));
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    id: opensNewWindowLabelId
+  }, OPENS_NEW_WINDOW_LABEL));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/cjs/components/pressable.js

@@ -78,7 +78,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.3",
+    packageVersion: "7.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useContext } from 'react';
+import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useRouterLink } from '@atlaskit/app-provider';
@@ -32,6 +33,7 @@ const focusRingStyles = xcss({
 });
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
 const AnchorNoRef = ({
   href,
   children,
@@ -50,6 +52,8 @@ const AnchorNoRef = ({
   interactionName,
   componentName,
   analyticsContext,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   ...htmlAttributes
 }, ref) => {
   const interactionContext = useContext(InteractionContext);
@@ -57,12 +61,17 @@ const AnchorNoRef = ({
     interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
     providedOnClick(e, analyticsEvent);
   }, [providedOnClick, interactionContext, interactionName]);
+  // TODO: Use React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  const opensNewWindowLabelId = uid({
+    ariaLabelledBy
+  });
   const onClick = usePlatformLeafEventHandler({
     fn: handleClick,
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.3",
+    packageVersion: "7.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -103,11 +112,15 @@ const AnchorNoRef = ({
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
-  }), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)"));
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: opensNewWindowLabelId
+  }, OPENS_NEW_WINDOW_LABEL));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/es2019/components/pressable.js

@@ -64,7 +64,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.3",
+    packageVersion: "7.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"];
+var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
 import React, { forwardRef, useCallback, useContext } from 'react';
+import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useRouterLink } from '@atlaskit/app-provider';
@@ -36,6 +37,7 @@ var focusRingStyles = xcss({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
 var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
@@ -55,18 +57,25 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     interactionName = _ref.interactionName,
     componentName = _ref.componentName,
     analyticsContext = _ref.analyticsContext,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   var interactionContext = useContext(InteractionContext);
   var handleClick = useCallback(function (e, analyticsEvent) {
     interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
     providedOnClick(e, analyticsEvent);
   }, [providedOnClick, interactionContext, interactionName]);
+  // TODO: Use React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  var opensNewWindowLabelId = uid({
+    ariaLabelledBy: ariaLabelledBy
+  });
   var onClick = usePlatformLeafEventHandler({
     fn: handleClick,
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.3",
+    packageVersion: "7.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -107,11 +116,15 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
-  }), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)"));
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: opensNewWindowLabelId
+  }, OPENS_NEW_WINDOW_LABEL));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/esm/components/pressable.js

@@ -68,7 +68,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.3",
+    packageVersion: "7.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -1,12 +1,8 @@
-import React, { type ReactNode, type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
-    /**
-     * `children` should be defined to ensure links have text.
-     */
-    children: ReactNode;
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
     /**
      * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
@@ -26,7 +22,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     analyticsContext?: Record<string, any>;
 };
-declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Anchor__
  *

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

@@ -1,12 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type BoxProps } from './box';
-export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'style' | 'onClick'> & {
-    /**
-     * `children` should be defined to ensure buttons are not empty,
-     * because they should have labels.
-     */
-    children: ReactNode;
+export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
     isDisabled?: boolean;
     /**
      * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
@@ -34,12 +29,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "onClick"> & {
-    /**
-     * `children` should be defined to ensure buttons are not empty,
-     * because they should have labels.
-     */
-    children: ReactNode;
+declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
     isDisabled?: boolean | undefined;
     /**
      * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.

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

@@ -1,12 +1,8 @@
-import React, { type ReactNode, type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
-    /**
-     * `children` should be defined to ensure links have text.
-     */
-    children: ReactNode;
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
     /**
      * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
@@ -26,7 +22,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     analyticsContext?: Record<string, any>;
 };
-declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Anchor__
  *

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

@@ -1,12 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type BoxProps } from './box';
-export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'style' | 'onClick'> & {
-    /**
-     * `children` should be defined to ensure buttons are not empty,
-     * because they should have labels.
-     */
-    children: ReactNode;
+export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
     isDisabled?: boolean;
     /**
      * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
@@ -34,12 +29,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "onClick"> & {
-    /**
-     * `children` should be defined to ensure buttons are not empty,
-     * because they should have labels.
-     */
-    children: ReactNode;
+declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
     isDisabled?: boolean | undefined;
     /**
      * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "7.0.3",
+  "version": "7.1.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -134,6 +134,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
     "bind-event-listener": "^3.0.0",
+    "react-uid": "^2.2.0",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {