@atlaskit/renderer 126.3.0 → 126.5.0

package/dist/es2019/ui/Renderer/index.js

@@ -56,7 +56,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "0.0.0-development";
+const packageVersion = "126.4.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/messages.js

@@ -8,6 +8,16 @@ export var headingAnchorLinkMessages = defineMessages({
     defaultMessage: 'Copy link to heading',
     description: 'Copy heading link to clipboard'
   },
+  copyLinkToClipboard: {
+    id: 'fabric.editor.headingLink.copyAnchorLinkTo',
+    defaultMessage: 'Copy link to',
+    description: 'Copy heading link to clipboard. Will be used as part of a 2-part a11y label ("Copy link to", "{heading text}")'
+  },
+  copyHeadingLinkLabelledBy: {
+    id: 'fabric.editor.headingLink.copyAnchorLinkLabelledBy',
+    defaultMessage: '{copyLink} {heading}',
+    description: 'The order in which to read the parts of the aria-labelledby for the copy heading link button depending on the grammar of the language. {copyLink} will be replaced with the "Copy link to" text and {heading} will be replaced with the actual heading text'
+  },
   copiedHeadingLinkToClipboard: {
     id: 'fabric.editor.headingLink.copied',
     defaultMessage: 'Copied!',

package/dist/esm/react/nodes/heading-anchor.js

@@ -21,6 +21,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import LinkIcon from '@atlaskit/icon/core/link';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
 import { headingAnchorLinkMessages } from '../../messages';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
@@ -45,13 +46,10 @@ var copyAnchorButtonStyles = css({
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
-  function HeadingAnchor() {
+  function HeadingAnchor(props) {
     var _this;
     _classCallCheck(this, HeadingAnchor);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, HeadingAnchor, [].concat(args));
+    _this = _callSuper(this, HeadingAnchor, [props]);
     _defineProperty(_this, "state", {
       tooltipMessage: '',
       isClicked: false
@@ -98,30 +96,38 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       };
     }());
     _defineProperty(_this, "resetMessage", function () {
-      _this.setTooltipState(headingAnchorLinkMessages.copyHeadingLinkToClipboard);
+      var tooltip = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorLinkMessages.copyLinkToClipboard : headingAnchorLinkMessages.copyHeadingLinkToClipboard;
+      _this.setTooltipState(tooltip);
     });
     _defineProperty(_this, "renderAnchorButton", function () {
       var _this$props = _this.props,
         _this$props$hideFromS = _this$props.hideFromScreenReader,
         hideFromScreenReader = _this$props$hideFromS === void 0 ? false : _this$props$hideFromS,
         headingId = _this$props.headingId;
+      var labelledBy = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? _this.props.intl.formatMessage(headingAnchorLinkMessages.copyHeadingLinkLabelledBy, {
+        copyLink: _this.copyLinkId,
+        heading: headingId
+      }) : headingId;
+      var tabIndex = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
       return jsx("button", {
         "data-testid": "anchor-button",
+        id: _this.copyLinkId,
         css: copyAnchorButtonStyles
         // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
         ,
         onMouseLeave: _this.resetMessage,
         onClick: _this.copyToClipboard,
         "aria-hidden": hideFromScreenReader,
-        tabIndex: hideFromScreenReader ? undefined : -1,
+        tabIndex: tabIndex,
         "aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
-        "aria-labelledby": hideFromScreenReader ? undefined : headingId,
+        "aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
         type: "button"
       }, jsx(LinkIcon, {
         label: _this.getCopyAriaLabel(),
         color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
       }));
     });
+    _this.copyLinkId = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? crypto.randomUUID() : undefined;
     return _this;
   }
   _inherits(HeadingAnchor, _React$PureComponent);

package/dist/esm/react/nodes/heading.js

@@ -1,10 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
 import React from 'react';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { copyTextToClipboard } from '../utils/clipboard';
 import HeadingAnchor from './heading-anchor';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -20,14 +28,18 @@ function hasRightAlignmentMark(marks) {
     return mark.type.name === 'alignment' && mark.attrs.align === 'end';
   });
 }
+var wrapperStyles = css({
+  display: 'flex',
+  alignItems: 'baseline'
+});
 function WrappedHeadingAnchor(_ref) {
   var enableNestedHeaderLinks = _ref.enableNestedHeaderLinks,
     level = _ref.level,
     headingId = _ref.headingId,
     hideFromScreenReader = _ref.hideFromScreenReader;
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {
+  return jsx(AnalyticsContext.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return /*#__PURE__*/React.createElement(HeadingAnchor, {
+    return jsx(HeadingAnchor, {
       enableNestedHeaderLinks: enableNestedHeaderLinks,
       level: level,
       onCopyText: function onCopyText() {
@@ -44,7 +56,14 @@ function WrappedHeadingAnchor(_ref) {
     });
   });
 }
-function Heading(props) {
+/**
+ * Old heading structure (before a11y fix):
+ * - headning anchor is rendered INSIDE the heading element
+ * - A duplicate anchor is rendered in VisuallyHidden for screen readers
+ * - The visible button has hideFromScreenReader={true}
+ *
+ */
+function HeadingWithDuplicateAnchor(props) {
   var headingId = props.headingId,
     dataAttributes = props.dataAttributes,
     allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
@@ -67,28 +86,132 @@ function Heading(props) {
       mouseEntered.current = true;
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
+  return jsx(React.Fragment, null, jsx(HX, {
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
+  }, jsx(React.Fragment, null, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
     hideFromScreenReader: true
-  }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
+  }), props.children, showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
     hideFromScreenReader: true
-  }))), /*#__PURE__*/React.createElement(VisuallyHidden, {
+  }))), jsx(VisuallyHidden, {
     testId: "visually-hidden-heading-anchor"
-  }, showAnchorLink && headingId && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
+  }, showAnchorLink && headingId && jsx(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId
   })));
 }
+
+/**
+ * New heading structure (a11y fix):
+ * - Heading anchor is rendered OUTSIDE the heading element in a .renderer-heading-wrapper div
+ * - Uses data-level attribute for CSS styling
+ * - Better accessibility: heading contains only text, button is a sibling
+ */
+function HeadingWithWrapper(props) {
+  var headingId = props.headingId,
+    dataAttributes = props.dataAttributes,
+    allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
+    marks = props.marks,
+    invisible = props.invisible,
+    localId = props.localId,
+    asInline = props.asInline;
+  var HX = "h".concat(props.level);
+  var mouseEntered = React.useRef(false);
+  var showAnchorLink = !!props.showAnchorLink;
+  var isRightAligned = hasRightAlignmentMark(marks);
+  var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  var headingIdToUse = invisible ? undefined : headingId;
+  var mouseEnterHandler = function mouseEnterHandler() {
+    if (showAnchorLink && !mouseEntered.current) {
+      // Abort TTVC calculation when the mouse hovers over heading. Hovering over
+      // heading render heading anchor and inline comment buttons. These user-induced
+      // DOM changes are valid reasons to abort the TTVC calculation.
+      abortAll('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    jsx("div", {
+      className: "renderer-heading-wrapper",
+      "data-level": props.level,
+      css: wrapperStyles
+    }, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
+      level: props.level,
+      enableNestedHeaderLinks: enableNestedHeaderLinks,
+      headingId: headingId,
+      hideFromScreenReader: false
+    }), jsx(HX, {
+      id: headingIdToUse,
+      "data-local-id": localId,
+      "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+      "data-as-inline": asInline,
+      onMouseEnter: mouseEnterHandler
+    }, props.children), showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
+      level: props.level,
+      enableNestedHeaderLinks: enableNestedHeaderLinks,
+      headingId: headingId,
+      hideFromScreenReader: false
+    }))
+  );
+}
+
+/**
+ * Gated Heading component:
+ * - When platform_editor_copy_link_a11y_inconsistency_fix experiment is enabled,
+ *   returns HeadingWithWrapper (new a11y-improved structure)
+ * - Otherwise returns HeadingWithDuplicateAnchor (old structure)
+ */
+function Heading(_ref3) {
+  var allowHeadingAnchorLinks = _ref3.allowHeadingAnchorLinks,
+    children = _ref3.children,
+    dataAttributes = _ref3.dataAttributes,
+    headingId = _ref3.headingId,
+    invisible = _ref3.invisible,
+    level = _ref3.level,
+    localId = _ref3.localId,
+    marks = _ref3.marks,
+    nodeType = _ref3.nodeType,
+    showAnchorLink = _ref3.showAnchorLink,
+    serializer = _ref3.serializer,
+    asInline = _ref3.asInline;
+  if (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true)) {
+    return jsx(HeadingWithWrapper, {
+      allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+      dataAttributes: dataAttributes,
+      headingId: headingId,
+      invisible: invisible,
+      level: level,
+      localId: localId,
+      marks: marks,
+      nodeType: nodeType,
+      serializer: serializer,
+      showAnchorLink: showAnchorLink,
+      asInline: asInline
+    }, children);
+  }
+  return jsx(HeadingWithDuplicateAnchor, {
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    dataAttributes: dataAttributes,
+    headingId: headingId,
+    invisible: invisible,
+    level: level,
+    localId: localId,
+    marks: marks,
+    nodeType: nodeType,
+    serializer: serializer,
+    showAnchorLink: showAnchorLink,
+    asInline: asInline
+  }, children);
+}
 export default Heading;