@atlaskit/editor-plugin-show-diff 16.0.1 → 16.0.2

package/dist/esm/ui/ContributorTag/buildContributorTagDom.js

@@ -125,6 +125,19 @@ var srLabelStyle = convertToInlineCss({
   userSelect: 'none',
   whiteSpace: 'nowrap'
 });
+
+/**
+ * Ids for the hidden label that the tag's `aria-labelledby` points at. Namespaced and random because
+ * the tag renders inside the document and shares the host page's id space — the same reason
+ * `VanillaTooltip` does it this way. The counter is a fallback for non-secure contexts, where
+ * `crypto.randomUUID` is unavailable.
+ */
+var generateLabelId = function () {
+  var count = 0;
+  return function () {
+    return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "".concat(CONTRIBUTOR_TAG_CLASS, "-label-").concat(crypto.randomUUID()) : "".concat(CONTRIBUTOR_TAG_CLASS, "-label-").concat(count += 1);
+  };
+}();
 var createSpan = function createSpan(doc, style) {
   var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var span = doc.createElement('span');
@@ -144,21 +157,30 @@ var createSpan = function createSpan(doc, style) {
  * would need a cast per reference below.
  */
 export var buildContributorTagDom = function buildContributorTagDom(doc) {
+  var labelId = generateLabelId();
   var root = createSpan(doc, constraintStyle);
   var tag = createSpan(doc, tagStyle, {
     class: CONTRIBUTOR_TAG_CLASS,
     'data-testid': CONTRIBUTOR_TAG_TESTID,
-    // Deliberately no `aria-label`: it would be announced ahead of the element's contents, but
-    // design requires the contributor *after* the change — hence the visually hidden label.
+    // Named by the hidden label rather than `aria-label`, which would be a second copy of the same
+    // sentence. `role="note"` takes its name from the author, not its contents, so without this
+    // the tag is a focus stop with no accessible name.
+    'aria-labelledby': labelId,
     role: 'note',
-    // Focusable so keyboard and screen-reader users can reach the tag and its tooltip.
+    // Focusable so keyboard and screen-reader users can reach the tag and its tooltip. Its focus
+    // ring is drawn inward — see `contributorTagStyles` in editor-core.
     tabindex: '0'
   });
   var avatars = createSpan(doc, avatarsStyle);
+  // `aria-hidden`: the hidden label restates this name in a full sentence, so leaving it in the
+  // tree announced the contributor twice ("Priya Changed by Priya").
   var name = createSpan(doc, nameStyle, {
+    'aria-hidden': 'true',
     'data-testid': CONTRIBUTOR_TAG_NAME_TESTID
   });
-  var srLabel = createSpan(doc, srLabelStyle);
+  var srLabel = createSpan(doc, srLabelStyle, {
+    id: labelId
+  });
   tag.append(avatars, name, srLabel);
   root.appendChild(tag);
   return {

package/dist/esm/ui/ContributorTag/contributorLabel.js

@@ -0,0 +1,49 @@
+import { contributorTagMessages } from './messages';
+var getContributorName = function getContributorName(contributor, formatMessage) {
+  var _contributor$name, _contributor$agentKin;
+  var name = (_contributor$name = contributor.name) === null || _contributor$name === void 0 ? void 0 : _contributor$name.trim();
+  if (name) {
+    return name;
+  }
+
+  // `agentKind` defaults to `'external'` per the plugin type contract; an unidentified external
+  // agent falls back to a generic label rather than rendering a nameless tag.
+  if (contributor.kind === 'agent' && ((_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external') === 'external') {
+    return formatMessage(contributorTagMessages.externalAgentName);
+  }
+  return '';
+};
+
+/**
+ * Whether the label has to spell out that the contributor is an agent. A sighted user reads that off
+ * the `aria-hidden` avatar, so the label is the only other carrier.
+ *
+ * Excluded: a connected pair, which says it via `changedByConnected`, and an unnamed external agent,
+ * whose name `getContributorName` has already resolved to "External agent".
+ */
+var isUnaccompaniedNamedAgent = function isUnaccompaniedNamedAgent(model) {
+  var _model$contributor$na;
+  return !model.connectedContributor && model.contributor.kind === 'agent' && Boolean((_model$contributor$na = model.contributor.name) === null || _model$contributor$na === void 0 ? void 0 : _model$contributor$na.trim());
+};
+/**
+ * The two strings a tag's model resolves to. Shared with `getActiveDiffAnnouncement`, so stepping
+ * onto a change says the same sentence as the tag pinned to it rather than a copy free to drift.
+ */
+export var formatContributorLabel = function formatContributorLabel(model, formatMessage) {
+  var isPrimaryAgent = model.contributor.kind === 'agent';
+  var primaryName = getContributorName(model.contributor, formatMessage);
+  var secondaryName = model.connectedContributor ? getContributorName(model.connectedContributor, formatMessage) : '';
+  var agentName = isPrimaryAgent ? primaryName : secondaryName;
+  var userName = isPrimaryAgent ? secondaryName : primaryName;
+  return {
+    fullLabel: model.connectedContributor ? formatMessage(contributorTagMessages.changedByConnected, {
+      agentName: agentName,
+      userName: userName
+    }) : formatMessage(isUnaccompaniedNamedAgent(model) ? contributorTagMessages.changedByAgent : contributorTagMessages.changedBy, {
+      name: primaryName
+    }),
+    // A connected pair only ever shows the agent; the pair is spelled out in `fullLabel`, because
+    // the tag is capped at `MAX_TAG_WIDTH` and two names rarely fit inside it.
+    visibleName: model.connectedContributor ? agentName || primaryName : primaryName
+  };
+};

package/dist/esm/ui/ContributorTag/contributorTagController.js

@@ -8,22 +8,7 @@ import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/facto
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
-import { contributorTagMessages } from './messages';
-var getContributorName = function getContributorName(contributor, formatMessage) {
-  var _contributor$name, _contributor$agentKin;
-  var name = (_contributor$name = contributor.name) === null || _contributor$name === void 0 ? void 0 : _contributor$name.trim();
-  if (name) {
-    return name;
-  }
-
-  // `agentKind` defaults to `'external'` per the plugin type contract; an unidentified external
-  // agent falls back to a generic label rather than rendering a nameless tag.
-  if (contributor.kind === 'agent' && ((_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external') === 'external') {
-    return formatMessage(contributorTagMessages.externalAgentName);
-  }
-  return '';
-};
-
+import { formatContributorLabel } from './contributorLabel';
 /**
  * Resolves the tag's accent from the same scheme value the highlight was drawn from, so the colour
  * the two carry can never drift — only the tone does, which is `getAccentTokens`'s to pick.
@@ -106,8 +91,8 @@ var fadeTagOut = function fadeTagOut(tag, release) {
 /** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
 var identityOf = function identityOf(model) {
   return [model === null || model === void 0 ? void 0 : model.contributor, model === null || model === void 0 ? void 0 : model.connectedContributor].map(function (contributor) {
-    var _contributor$agentKin2, _contributor$avatarUr;
-    return contributor ? "".concat(contributor.kind, ":").concat((_contributor$agentKin2 = contributor.agentKind) !== null && _contributor$agentKin2 !== void 0 ? _contributor$agentKin2 : '', ":").concat(contributor.name, ":").concat((_contributor$avatarUr = contributor.avatarUrl) !== null && _contributor$avatarUr !== void 0 ? _contributor$avatarUr : '') : '';
+    var _contributor$agentKin, _contributor$avatarUr;
+    return contributor ? "".concat(contributor.kind, ":").concat((_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : '', ":").concat(contributor.name, ":").concat((_contributor$avatarUr = contributor.avatarUrl) !== null && _contributor$avatarUr !== void 0 ? _contributor$avatarUr : '') : '';
   }).join('|');
 };
 
@@ -348,24 +333,12 @@ export var ContributorTagController = /*#__PURE__*/function () {
       if (!this.dom) {
         return;
       }
-      var _this$options$getIntl = this.options.getIntl(),
-        formatMessage = _this$options$getIntl.formatMessage;
-      var isPrimaryAgent = model.contributor.kind === 'agent';
-      var primaryName = getContributorName(model.contributor, formatMessage);
-      var secondaryName = model.connectedContributor ? getContributorName(model.connectedContributor, formatMessage) : '';
-      var agentName = isPrimaryAgent ? primaryName : secondaryName;
-      var userName = isPrimaryAgent ? secondaryName : primaryName;
-
-      // A connected pair only ever shows the agent; the pair is spelled out in the label, because the
-      // tag is capped at `MAX_TAG_WIDTH` and two names rarely fit inside it.
-      this.dom.name.textContent = model.connectedContributor ? agentName || primaryName : primaryName;
-      this.fullLabel = model.connectedContributor ? formatMessage(contributorTagMessages.changedByConnected, {
-        agentName: agentName,
-        userName: userName
-      }) : formatMessage(contributorTagMessages.changedBy, {
-        name: primaryName
-      });
-      this.dom.srLabel.textContent = this.fullLabel;
+      var _formatContributorLab = formatContributorLabel(model, this.options.getIntl().formatMessage),
+        fullLabel = _formatContributorLab.fullLabel,
+        visibleName = _formatContributorLab.visibleName;
+      this.dom.name.textContent = visibleName;
+      this.fullLabel = fullLabel;
+      this.dom.srLabel.textContent = fullLabel;
     }
   }, {
     key: "accentOf",
@@ -420,7 +393,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
   }, {
     key: "syncTooltip",
     value: function syncTooltip() {
-      var _this$tooltip2;
+      var _this$tooltip2, _this$dom$tag$querySe;
       var content = this.dom ? this.fullLabel : undefined;
       if (content === this.tooltipContent) {
         return;
@@ -437,9 +410,11 @@ export var ContributorTagController = /*#__PURE__*/function () {
       // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
       'ak-editor-vanilla-tooltip-default');
       // `VanillaTooltip` sets `aria-describedby` on its trigger, which would announce the label a
-      // second time — the visually hidden child already announces it, after the change as design
-      // requires.
+      // second time — the hidden child already announces it, and names the tag with it.
       this.dom.tag.removeAttribute('aria-describedby');
+      // The popover is a child of the trigger, so its text would be a third copy of the same
+      // sentence. It stays visible for sighted users, who need the part of the name the tag clipped.
+      (_this$dom$tag$querySe = this.dom.tag.querySelector(':scope > [role="tooltip"]')) === null || _this$dom$tag$querySe === void 0 || _this$dom$tag$querySe.setAttribute('aria-hidden', 'true');
     }
 
     /**

package/dist/esm/ui/ContributorTag/messages.js

@@ -5,6 +5,11 @@ export var contributorTagMessages = defineMessages({
     defaultMessage: 'Changed by {name}',
     description: 'Screen-reader label and tooltip for the tag pinned to a highlighted change in the version-history diff, naming the single person or agent that made the change. The name placeholder is the contributor display name.'
   },
+  changedByAgent: {
+    id: 'editor-plugin-show-diff.ContributorTag.changedByAgent',
+    defaultMessage: 'Changed by {name}, an AI agent',
+    description: 'Screen-reader label and tooltip for the tag pinned to a highlighted change in the version-history diff, when a named AI agent made the change rather than a person. The name placeholder is the agent display name.'
+  },
   changedByConnected: {
     id: 'editor-plugin-show-diff.ContributorTag.changedByConnected',
     defaultMessage: 'Changed by {agentName} with {userName}',

package/dist/esm/ui/DiffNavigation/announceActiveDiff.js

@@ -0,0 +1,48 @@
+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; }
+import { isDiffDecoration } from '../../pm-plugins/decorations/decorationKeys';
+import { formatContributorLabel } from '../ContributorTag/contributorLabel';
+import { diffNavigationMessages } from './messages';
+
+/**
+ * The tag that captions the given decoration, if any. `linkedDiffIds` is checked as well as
+ * `diffId`, because a replacement's two decorations share one tag and navigation can land on either.
+ */
+var findTagFor = function findTagFor(decoration, contributorTags) {
+  if (!(contributorTags !== null && contributorTags !== void 0 && contributorTags.length) || !isDiffDecoration(decoration)) {
+    return undefined;
+  }
+  var diffId = decoration.spec.diffId;
+  return contributorTags.find(function (tag) {
+    var _tag$linkedDiffIds;
+    return tag.diffId === diffId || ((_tag$linkedDiffIds = tag.linkedDiffIds) === null || _tag$linkedDiffIds === void 0 ? void 0 : _tag$linkedDiffIds.includes(diffId));
+  });
+};
+
+/**
+ * What a screen reader should say once the reader has stepped onto a change: where they are in the
+ * diff, and — when the plugin can credit the change — who made it. Stepping otherwise only scrolls,
+ * which is silent.
+ *
+ * Returns `undefined` for an index that resolves no change, so the caller says nothing at all
+ * rather than "Change 4 of 3".
+ */
+export var getActiveDiffAnnouncement = function getActiveDiffAnnouncement(_ref) {
+  var activeIndex = _ref.activeIndex,
+    contributorTags = _ref.contributorTags,
+    decorations = _ref.decorations,
+    intl = _ref.intl;
+  var activeDecoration = decorations[activeIndex];
+  if (!activeDecoration) {
+    return undefined;
+  }
+  var position = {
+    index: activeIndex + 1,
+    total: decorations.length
+  };
+  var tag = findTagFor(activeDecoration, contributorTags);
+  return tag ? intl.formatMessage(diffNavigationMessages.activeChangeWithContributor, _objectSpread(_objectSpread({}, position), {}, {
+    contributor: formatContributorLabel(tag, intl.formatMessage).fullLabel
+  })) : intl.formatMessage(diffNavigationMessages.activeChange, position);
+};

package/dist/esm/ui/DiffNavigation/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export var diffNavigationMessages = defineMessages({
+  activeChange: {
+    id: 'editor-plugin-show-diff.DiffNavigation.activeChange',
+    defaultMessage: 'Change {index} of {total}',
+    description: 'Announced to screen readers when the reader steps to the next or previous change in the version-history diff. The index placeholder is the position of the change stepped to, counting from 1; total is how many changes the diff has.'
+  },
+  activeChangeWithContributor: {
+    id: 'editor-plugin-show-diff.DiffNavigation.activeChangeWithContributor',
+    defaultMessage: 'Change {index} of {total}. {contributor}',
+    description: 'Announced to screen readers when the reader steps to the next or previous change in the version-history diff and that change is credited to someone. The index and total placeholders are as in activeChange. The contributor placeholder is an already-translated sentence (changedBy, changedByAgent or changedByConnected), so it must be kept whole and only repositioned.'
+  }
+});

package/dist/types/pm-plugins/decorations/utils/getAttrChangeRanges.d.ts

@@ -5,6 +5,7 @@ import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 export type InlineAttrChangeNodeName = 'date' | 'emoji' | 'mention' | 'status';
 type AttrChangeStep = AttrStep | SetAttrsStep;
 export type AttrStepContext = {
+    attributionKey?: string;
     afterNode: PMNode | null;
     beforeNode: PMNode | null;
     finalPos: number;
@@ -12,6 +13,8 @@ export type AttrStepContext = {
     step: AttrChangeStep;
 };
 type StepRange = {
+    /** Attribution key for the step that produced this range. */
+    attributionKey?: string;
     /**
      * Position of the original (before) node in the original doc.
      * Populated for inline attr changes (e.g. emoji, date) so the caller can

package/dist/types/pm-plugins/decorations/utils/getMarkChangeRanges.d.ts

@@ -1,7 +1,10 @@
 import type { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform-override';
+import { type StepMap } from '@atlaskit/editor-prosemirror/transform';
+import type { DiffStepAttribution } from '../../../showDiffPluginType';
 type StepRange = {
+    attributionKey?: string;
     fromB: number;
     toB: number;
 };
-export declare const getMarkChangeRanges: (steps: ProseMirrorStep[]) => StepRange[];
+export declare const getMarkChangeRanges: (steps: ProseMirrorStep[], stepAttributions?: Array<DiffStepAttribution | undefined>, stepMaps?: StepMap[]) => StepRange[];
 export {};

package/dist/types/pm-plugins/decorations/utils/mapStepRangeToFinal.d.ts

@@ -0,0 +1,8 @@
+import { type StepMap } from '@atlaskit/editor-prosemirror/transform';
+type StepRange = {
+    fromB: number;
+    toB: number;
+};
+/** Maps a step's range into final-document coordinates when the rollout path supplies step maps. */
+export declare const mapStepRangeToFinal: (from: number, to: number, stepIndex: number, stepMaps?: StepMap[]) => StepRange | undefined;
+export {};

package/dist/types/showDiffPluginType.d.ts

@@ -1,6 +1,7 @@
 import type { StepJson } from '@atlaskit/editor-common/collab';
 import type { NextEditorPlugin, EditorCommand, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer/types';
+import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
@@ -226,7 +227,12 @@ export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
         scrollToPrevious: EditorCommand;
         showDiff: (config: ShowDiffParams) => EditorCommand;
     };
-    dependencies: [OptionalPlugin<AnalyticsPlugin>, OptionalPlugin<UserIntentPlugin>];
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<UserIntentPlugin>,
+        /** Carries the live-region announcement made when stepping between changes. */
+        OptionalPlugin<AccessibilityUtilsPlugin>
+    ];
     pluginConfiguration: DiffParams | undefined;
     sharedState: {
         /**

package/dist/types/ui/ContributorTag/buildContributorTagDom.d.ts

@@ -39,8 +39,11 @@ export type ContributorTagDom = {
     name: HTMLSpanElement;
     root: HTMLSpanElement;
     /**
-     * Announced after the name, which is the order design requires. `VanillaTooltip` appends its
-     * popover to the tag as well, so this is the last *content* child rather than the last node.
+     * The tag's single announcement: it names the tag via `aria-labelledby` and is the only child
+     * left in the accessibility tree.
+     *
+     * `VanillaTooltip` appends its popover to the tag as well, so this is the last *content* child
+     * rather than the last node.
      */
     srLabel: HTMLSpanElement;
     tag: HTMLSpanElement;

package/dist/types/ui/ContributorTag/contributorLabel.d.ts

@@ -0,0 +1,13 @@
+import type { IntlShape } from 'react-intl';
+import type { ContributorTagModel } from '../../showDiffPluginType';
+export type ContributorLabel = {
+    /** One sentence crediting everyone the change is attributed to — the tag's announcement. */
+    fullLabel: string;
+    /** The name the tag paints, which `MAX_TAG_WIDTH` may ellipsise. */
+    visibleName: string;
+};
+/**
+ * The two strings a tag's model resolves to. Shared with `getActiveDiffAnnouncement`, so stepping
+ * onto a change says the same sentence as the tag pinned to it rather than a copy free to drift.
+ */
+export declare const formatContributorLabel: (model: ContributorTagModel, formatMessage: IntlShape['formatMessage']) => ContributorLabel;

package/dist/types/ui/ContributorTag/messages.d.ts

@@ -1,6 +1,7 @@
 import { type MessageDescriptor } from 'react-intl';
 export declare const contributorTagMessages: {
     changedBy: MessageDescriptor;
+    changedByAgent: MessageDescriptor;
     changedByConnected: MessageDescriptor;
     externalAgentName: MessageDescriptor;
 };

package/dist/types/ui/DiffNavigation/announceActiveDiff.d.ts

@@ -0,0 +1,18 @@
+import type { IntlShape } from 'react-intl';
+import type { Decoration } from '@atlaskit/editor-prosemirror/view';
+import type { ContributorTagModel } from '../../showDiffPluginType';
+/**
+ * What a screen reader should say once the reader has stepped onto a change: where they are in the
+ * diff, and — when the plugin can credit the change — who made it. Stepping otherwise only scrolls,
+ * which is silent.
+ *
+ * Returns `undefined` for an index that resolves no change, so the caller says nothing at all
+ * rather than "Change 4 of 3".
+ */
+export declare const getActiveDiffAnnouncement: ({ activeIndex, contributorTags, decorations, intl, }: {
+    activeIndex: number;
+    contributorTags: ContributorTagModel[] | undefined;
+    /** The navigable changes, in document order — `getScrollableDecorations`'s result. */
+    decorations: Decoration[];
+    intl: IntlShape;
+}) => string | undefined;

package/dist/types/ui/DiffNavigation/messages.d.ts

@@ -0,0 +1,5 @@
+import { type MessageDescriptor } from 'react-intl';
+export declare const diffNavigationMessages: {
+    activeChange: MessageDescriptor;
+    activeChangeWithContributor: MessageDescriptor;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.0.1",
+	"version": "16.0.2",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,6 +23,7 @@
 		"@atlaskit/adf-schema": "^57.4.0",
 		"@atlaskit/avatar": "^28.0.0",
 		"@atlaskit/custom-steps": "^1.1.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^18.0.0",
 		"@atlaskit/editor-plugin-analytics": "^18.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^16.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
@@ -31,7 +32,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^188.0.0",
+		"@atlaskit/tmp-editor-statsig": "^189.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",