@atlaskit/renderer 126.4.0 → 126.5.1

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

@@ -70,7 +70,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.3.0";
+var packageVersion = "126.5.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/messages.js

@@ -8,6 +8,16 @@ export const 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/es2019/react/nodes/heading-anchor.js

@@ -10,6 +10,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 const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
@@ -36,8 +37,8 @@ const copyAnchorButtonStyles = css({
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class HeadingAnchor extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     _defineProperty(this, "state", {
       tooltipMessage: '',
       isClicked: false
@@ -64,35 +65,43 @@ class HeadingAnchor extends React.PureComponent {
       try {
         await this.props.onCopyText();
         this.setTooltipState(copiedHeadingLinkToClipboard, true);
-      } catch (e) {
+      } catch {
         this.setTooltipState(failedToCopyHeadingLink);
       }
     });
     _defineProperty(this, "resetMessage", () => {
-      this.setTooltipState(headingAnchorLinkMessages.copyHeadingLinkToClipboard);
+      const tooltip = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorLinkMessages.copyLinkToClipboard : headingAnchorLinkMessages.copyHeadingLinkToClipboard;
+      this.setTooltipState(tooltip);
     });
     _defineProperty(this, "renderAnchorButton", () => {
       const {
         hideFromScreenReader = false,
         headingId
       } = this.props;
+      const labelledBy = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? this.props.intl.formatMessage(headingAnchorLinkMessages.copyHeadingLinkLabelledBy, {
+        copyLink: this.copyLinkId,
+        heading: headingId
+      }) : headingId;
+      const 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;
   }
   componentDidMount() {
     this.resetMessage();

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

@@ -1,10 +1,19 @@
+/**
+ * @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';
+const RENDERER_HEADING_WRAPPER = 'renderer-heading-wrapper';
 const getCurrentUrlWithHash = (hash = '') => {
   const url = new URL(window.location.href);
   url.search = ''; // clear any query params so that the page will correctly scroll to the anchor
@@ -17,15 +26,22 @@ function hasRightAlignmentMark(marks) {
   }
   return marks.some(mark => mark.type.name === 'alignment' && mark.attrs.align === 'end');
 }
+const wrapperStyles = css({
+  // Important: do NOT use flex here.
+  // With flex + baseline alignment, the anchor aligns to the *first line* of a multi-line heading,
+  // which visually places it at the top-right. We want the anchor to sit immediately after the
+  // last character of the heading (i.e. after the final wrapped line), so we use normal inline flow.
+  display: 'block'
+});
 function WrappedHeadingAnchor({
   enableNestedHeaderLinks,
   level,
   headingId,
   hideFromScreenReader
 }) {
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
+  return jsx(AnalyticsContext.Consumer, null, ({
     fireAnalyticsEvent
-  }) => /*#__PURE__*/React.createElement(HeadingAnchor, {
+  }) => jsx(HeadingAnchor, {
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     level: level,
     onCopyText: () => {
@@ -41,7 +57,14 @@ function WrappedHeadingAnchor({
     headingId: headingId
   }));
 }
-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) {
   const {
     headingId,
     dataAttributes,
@@ -66,28 +89,134 @@ 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) {
+  const {
+    headingId,
+    dataAttributes,
+    allowHeadingAnchorLinks,
+    marks,
+    invisible,
+    localId,
+    asInline
+  } = props;
+  const HX = `h${props.level}`;
+  const mouseEntered = React.useRef(false);
+  const showAnchorLink = !!props.showAnchorLink;
+  const isRightAligned = hasRightAlignmentMark(marks);
+  const enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  const headingIdToUse = invisible ? undefined : headingId;
+  const 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 jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: RENDERER_HEADING_WRAPPER,
+    "data-testid": 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({
+  allowHeadingAnchorLinks,
+  children,
+  dataAttributes,
+  headingId,
+  invisible,
+  level,
+  localId,
+  marks,
+  nodeType,
+  showAnchorLink,
+  serializer,
+  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;