@atlaskit/renderer 126.3.0 → 126.5.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/renderer
 
+## 126.5.0
+
+### Minor Changes
+
+- [`d88e2cfa7371b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d88e2cfa7371b) -
+  [ux] fix copy heading link button a11y behaviours by only having one button, that is outside the
+  heading element
+
+### Patch Changes
+
+- Updated dependencies
+
+## 126.4.0
+
+### Minor Changes
+
+- [`26a5ec6dab84e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26a5ec6dab84e) -
+  Adjust vertical spacing for inline extensions in the renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 126.3.0
 
 ### Minor Changes

package/dist/cjs/messages.js

@@ -14,6 +14,16 @@ var headingAnchorLinkMessages = exports.headingAnchorLinkMessages = (0, _reactIn
     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/cjs/react/nodes/heading-anchor.js

@@ -19,6 +19,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = require("../../messages");
 var _excluded = ["children"];
@@ -51,13 +52,10 @@ var copyAnchorButtonStyles = (0, _react2.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;
     (0, _classCallCheck2.default)(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]);
     (0, _defineProperty2.default)(_this, "state", {
       tooltipMessage: '',
       isClicked: false
@@ -104,30 +102,38 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       };
     }());
     (0, _defineProperty2.default)(_this, "resetMessage", function () {
-      _this.setTooltipState(_messages.headingAnchorLinkMessages.copyHeadingLinkToClipboard);
+      var tooltip = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? _messages.headingAnchorLinkMessages.copyLinkToClipboard : _messages.headingAnchorLinkMessages.copyHeadingLinkToClipboard;
+      _this.setTooltipState(tooltip);
     });
     (0, _defineProperty2.default)(_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 = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? _this.props.intl.formatMessage(_messages.headingAnchorLinkMessages.copyHeadingLinkLabelledBy, {
+        copyLink: _this.copyLinkId,
+        heading: headingId
+      }) : headingId;
+      var tabIndex = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
       return (0, _react2.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"
       }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
       }));
     });
+    _this.copyLinkId = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? crypto.randomUUID() : undefined;
     return _this;
   }
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);

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

@@ -6,12 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
 var _clipboard = require("../utils/clipboard");
 var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
+var _react2 = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -27,14 +37,18 @@ function hasRightAlignmentMark(marks) {
     return mark.type.name === 'alignment' && mark.attrs.align === 'end';
   });
 }
+var wrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'baseline'
+});
 function WrappedHeadingAnchor(_ref) {
   var enableNestedHeaderLinks = _ref.enableNestedHeaderLinks,
     level = _ref.level,
     headingId = _ref.headingId,
     hideFromScreenReader = _ref.hideFromScreenReader;
-  return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_analyticsContext.default.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return /*#__PURE__*/_react.default.createElement(_headingAnchor.default, {
+    return (0, _react2.jsx)(_headingAnchor.default, {
       enableNestedHeaderLinks: enableNestedHeaderLinks,
       level: level,
       onCopyText: function onCopyText() {
@@ -51,7 +65,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,
@@ -74,28 +95,132 @@ function Heading(props) {
       mouseEntered.current = true;
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HX, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.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.default.createElement(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
+  }, (0, _react2.jsx)(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
     hideFromScreenReader: true
-  }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
+  }), props.children, showAnchorLink && headingId && !isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
     hideFromScreenReader: true
-  }))), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+  }))), (0, _react2.jsx)(_visuallyHidden.default, {
     testId: "visually-hidden-heading-anchor"
-  }, showAnchorLink && headingId && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
+  }, showAnchorLink && headingId && (0, _react2.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.default.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.
+      (0, _interactionMetrics.abortAll)('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    (0, _react2.jsx)("div", {
+      className: "renderer-heading-wrapper",
+      "data-level": props.level,
+      css: wrapperStyles
+    }, showAnchorLink && headingId && isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+      level: props.level,
+      enableNestedHeaderLinks: enableNestedHeaderLinks,
+      headingId: headingId,
+      hideFromScreenReader: false
+    }), (0, _react2.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 && (0, _react2.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 ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true)) {
+    return (0, _react2.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 (0, _react2.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);
+}
 var _default = exports.default = Heading;