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

package/dist/es2019/pm-plugins/decorations/createContributorTagWidget.js

@@ -39,7 +39,24 @@ export const mountContributorTag = ({
     diffId
   });
   controller.mount(host);
-  return controller;
+
+  /**
+   * Kept alive when ProseMirror only rebuilt the widget desc around this same host: a document
+   * change remaps the decoration and fires `destroy`, but an element `toDOM` is reused verbatim
+   * and runs no mount callback, so tearing down here left an active change with no tag
+   * (EDITOR-8971).
+   *
+   * Deferred, because the host is still attached while that update is in flight. A host outside a
+   * live editor root is a real removal — including the view being destroyed, which drops the root.
+   */
+  return {
+    destroy: () => queueMicrotask(() => {
+      var _mountContext$getEdit;
+      if (!host.isConnected || !((_mountContext$getEdit = mountContext.getEditorRoot()) !== null && _mountContext$getEdit !== void 0 && _mountContext$getEdit.contains(host))) {
+        controller.destroy();
+      }
+    })
+  };
 };
 export const unmountContributorTag = mount => {
   mount === null || mount === void 0 ? void 0 : mount.destroy();

package/dist/es2019/pm-plugins/decorations/extractContributorTags.js

@@ -34,12 +34,44 @@ const leadsReplacement = widget => fg('confluence_ncs_step_diffing_version_histo
  */
 const isSameBlockChange = (inner, block) => inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
 
+/**
+ * Which of two changes in the same range leads, and so is the one a tag captions. Position first,
+ * then `side`, since deleted content shares its `from` with the content that replaced it and paints
+ * above; then the narrower range, so a change nested in another captions itself.
+ */
+const byLeadingPosition = (a, b) => {
+  var _a$decoration$spec$si, _b$decoration$spec$si;
+  return a.decoration.from - b.decoration.from || ((_a$decoration$spec$si = a.decoration.spec.side) !== null && _a$decoration$spec$si !== void 0 ? _a$decoration$spec$si : 0) - ((_b$decoration$spec$si = b.decoration.spec.side) !== null && _b$decoration$spec$si !== void 0 ? _b$decoration$spec$si : 0) || a.decoration.to - a.decoration.from - (b.decoration.to - b.decoration.from);
+};
+
+/** The targets a navigation range wholly covers, leader first. */
+const containedBy = (targets, {
+  from,
+  to
+}) => targets.filter(({
+  decoration
+}) => from <= decoration.from && decoration.to <= to).sort(byLeadingPosition);
+
+/**
+ * The one tag a navigation step reveals. `spec.isActive` is no use here: it covers everything the
+ * group's union range touches, so several tags revealed over each other (EDITOR-8971). Hence
+ * containment, and the leading change of what it covers.
+ */
+const resolveActiveTarget = (surviving, activeIndexPos) => containedBy(surviving, activeIndexPos)[0];
+
 /**
  * One model per diff decoration whose attribution resolves to a supplied contributor; anything
  * unattributed, untaggable or unresolved is skipped. A replacement's two decorations are collapsed
  * into a single tag, on whichever half renders first — see `isSameChange` and `leadsReplacement`.
+ *
+ * `activeIndexPos`, when given, reveals exactly one of the tags — see `resolveActiveTarget`.
+ * Absent, each tag keeps the active state its own decoration was drawn with.
+ *
+ * `stops`, when given, is the navigation stop list the step buttons walk
+ * (`getScrollableDecorations`). One contributor cannot hold two tags in one stop, since only the
+ * leading one would ever be reachable. Absent, every decoration keeps its own tag.
  */
-export const extractContributorTags = (decorations, contributors) => {
+export const extractContributorTags = (decorations, contributors, activeIndexPos, stops) => {
   if (!contributors) {
     return [];
   }
@@ -77,10 +109,15 @@ export const extractContributorTags = (decorations, contributors) => {
   const linkedDiffIds = new Map();
   const folded = new Set();
   const fold = (host, target) => {
-    var _linkedDiffIds$get;
+    var _linkedDiffIds$get, _linkedDiffIds$get2;
     folded.add(target);
     const hostDiffId = host.decoration.spec.diffId;
-    linkedDiffIds.set(hostDiffId, [...((_linkedDiffIds$get = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : []), target.decoration.spec.diffId]);
+    const targetDiffId = target.decoration.spec.diffId;
+    // A target that already hosts folded tags hands them up, so no hover target is orphaned when
+    // one host folds into another.
+    const inherited = (_linkedDiffIds$get = linkedDiffIds.get(targetDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : [];
+    linkedDiffIds.delete(targetDiffId);
+    linkedDiffIds.set(hostDiffId, [...((_linkedDiffIds$get2 = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get2 !== void 0 ? _linkedDiffIds$get2 : []), targetDiffId, ...inherited]);
   };
   for (const target of targets) {
     const {
@@ -120,15 +157,38 @@ export const extractContributorTags = (decorations, contributors) => {
       fold(host, target);
     }
   }
-  return targets.filter(target => !folded.has(target)).map(({
-    contributor,
-    decoration: {
-      spec
+
+  // One tag per contributor per navigation stop. The folds above only catch a replacement's two
+  // halves and a block's own highlights; two of one contributor's changes that merely touch are a
+  // single stop (`groupTouchingDecorations`) yet kept a tag each, so the stop's trailing tag was
+  // drawn but could never be stepped to (EDITOR-8971). It folds into the leading tag of its
+  // contributor, staying a hover target. Contributors are kept apart: a stop spanning two of them
+  // still captions each, rather than crediting one for the other's change.
+  for (const stop of stops !== null && stops !== void 0 ? stops : []) {
+    const byContributor = new Map();
+    for (const target of containedBy(targets.filter(target => !folded.has(target)), stop)) {
+      var _target$decoration$sp, _byContributor$get;
+      const key = (_target$decoration$sp = target.decoration.spec.attributionKey) !== null && _target$decoration$sp !== void 0 ? _target$decoration$sp : '';
+      byContributor.set(key, [...((_byContributor$get = byContributor.get(key)) !== null && _byContributor$get !== void 0 ? _byContributor$get : []), target]);
     }
-  }) => {
+    for (const [leader, ...trailing] of byContributor.values()) {
+      trailing.forEach(target => fold(leader, target));
+    }
+  }
+  const surviving = targets.filter(target => !folded.has(target));
+  const activeTarget = activeIndexPos === undefined ? undefined : resolveActiveTarget(surviving, activeIndexPos);
+  return surviving.map(target => {
+    const {
+      contributor,
+      decoration: {
+        spec
+      }
+    } = target;
     const connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     const connectedContributor = connected ? toTagContributor(connected) : undefined;
     const linked = linkedDiffIds.get(spec.diffId);
+    // Only the navigated tag reveals; with no active range, the decoration's own state stands.
+    const isActive = activeIndexPos === undefined ? spec.isActive : target === activeTarget;
     return {
       contributor: toTagContributor(contributor),
       diffId: spec.diffId,
@@ -138,8 +198,8 @@ export const extractContributorTags = (decorations, contributors) => {
       ...(spec.colorScheme ? {
         colorScheme: spec.colorScheme
       } : {}),
-      ...(spec.isActive !== undefined ? {
-        isActive: spec.isActive
+      ...(isActive !== undefined ? {
+        isActive
       } : {}),
       ...(spec.isInserted !== undefined ? {
         isInserted: spec.isInserted

package/dist/es2019/pm-plugins/decorations/utils/getAttrChangeRanges.js

@@ -49,6 +49,7 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
   return attrStepContexts.map(attrStepContext => {
     const {
       afterNode,
+      attributionKey,
       beforeNode,
       finalPos,
       originalPos,
@@ -74,6 +75,9 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
         const watchedAttrs = inlineNodeAttrMap[nodeName];
         if (attrsToCheck.some(v => watchedAttrs.includes(v))) {
           return {
+            ...(attributionKey ? {
+              attributionKey
+            } : {}),
             fromB: finalPos,
             toB: finalPos + nodeAtPos.nodeSize,
             isInline: true,
@@ -90,6 +94,9 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
     // taskItem node: state attribute change — highlight the taskItem node
     if (attrsToCheck.some(v => taskItemAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
       return {
+        ...(attributionKey ? {
+          attributionKey
+        } : {}),
         fromB: finalPos,
         toB: finalPos + nodeAtPos.nodeSize
       };
@@ -101,6 +108,9 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
     // panel as a "deleted" widget for a before/after comparison.
     if (attrsToCheck.some(v => panelAttrs.includes(v)) && nodeAtPos && getBaseNodeTypeName(nodeAtPos.type) === 'panel') {
       return {
+        ...(attributionKey ? {
+          attributionKey
+        } : {}),
         fromB: finalPos,
         toB: finalPos + nodeAtPos.nodeSize,
         ...(originalPos !== undefined && originalNodeAtPos && {
@@ -118,6 +128,9 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
       }
       const isInline = nodeAtPos.type.name === 'inlineExtension';
       return {
+        ...(attributionKey ? {
+          attributionKey
+        } : {}),
         fromB: finalPos,
         toB: finalPos + nodeAtPos.nodeSize,
         isInline
@@ -128,6 +141,9 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
     if (attrsToCheck.some(v => mediaAttrs.includes(v)) && $pos.parent.type === doc.type.schema.nodes.mediaSingle) {
       const startPos = $pos.pos + $pos.parentOffset;
       return {
+        ...(attributionKey ? {
+          attributionKey
+        } : {}),
         fromB: startPos,
         toB: startPos + $pos.parent.nodeSize - 1
       };

package/dist/es2019/pm-plugins/decorations/utils/getMarkChangeRanges.js

@@ -1,4 +1,6 @@
 import { AddMarkStep, RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
+import { getAttributionKey } from '../colorSchemes/attributions';
+import { mapStepRangeToFinal } from './mapStepRangeToFinal';
 const extractMarkStep = step => {
   if (step instanceof AddMarkStep) {
     return {
@@ -18,10 +20,10 @@ const extractMarkStep = step => {
   }
   return undefined;
 };
-export const getMarkChangeRanges = steps => {
+export const getMarkChangeRanges = (steps, stepAttributions = [], stepMaps = []) => {
   const resultRanges = [];
   let lastOp;
-  for (const step of steps) {
+  for (const [stepIndex, step] of steps.entries()) {
     const op = extractMarkStep(step);
     if (!op) {
       continue;
@@ -31,9 +33,15 @@ export const getMarkChangeRanges = steps => {
     if (lastOp && lastOp.from === op.from && lastOp.to === op.to && lastOp.markName === op.markName && lastOp.type !== op.type) {
       resultRanges.pop();
     } else {
+      const finalRange = mapStepRangeToFinal(op.from, op.to, stepIndex, stepMaps);
+      if (!finalRange) {
+        lastOp = op;
+        continue;
+      }
       resultRanges.push({
-        fromB: op.from,
-        toB: op.to
+        attributionKey: getAttributionKey(stepAttributions[stepIndex]),
+        fromB: finalRange.fromB,
+        toB: finalRange.toB
       });
     }
     lastOp = op;

package/dist/es2019/pm-plugins/decorations/utils/mapStepRangeToFinal.js

@@ -0,0 +1,28 @@
+import { Mapping } from '@atlaskit/editor-prosemirror/transform';
+// ProseMirror's assoc value chooses which side of an insertion a mapped boundary stays on.
+const FROM_ASSOC = -1;
+const TO_ASSOC = 1;
+
+/** Maps a step's range into final-document coordinates when the rollout path supplies step maps. */
+export const mapStepRangeToFinal = (from, to, stepIndex, stepMaps) => {
+  if (!stepMaps) {
+    return {
+      fromB: from,
+      toB: to
+    };
+  }
+
+  // The range is already in the document immediately after this step, so skip its own map and
+  // apply only the maps from subsequent steps.
+  const firstSubsequentStepIndex = stepIndex + 1;
+  const finalRange = new Mapping(stepMaps.slice(firstSubsequentStepIndex));
+  const fromB = finalRange.mapResult(from, FROM_ASSOC);
+  const toB = finalRange.mapResult(to, TO_ASSOC);
+  if (fromB.deleted && toB.deleted) {
+    return undefined;
+  }
+  return {
+    fromB: fromB.pos,
+    toB: toB.pos
+  };
+};

package/dist/es2019/pm-plugins/main.js

@@ -4,6 +4,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform-override';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getActiveDiffAnnouncement } from '../ui/DiffNavigation/announceActiveDiff';
 import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecorations';
 import { isDiffDecoration, isDiffDecorationSpec } from './decorations/decorationKeys';
 import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
@@ -285,6 +286,23 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleExpandRange(activeDecoration.from, activeDecoration.to, true));
             }
             cancelPendingScrollToDecoration = scrollToDecoration(view, scrollableDecorations, pluginState.activeIndex);
+
+            // Stepping only scrolls — no focus moves and no content changes — so without this a
+            // screen-reader user gets silence. Announced through the live region rather than by
+            // focusing the change, since the "next change" control has to stay focused to be
+            // pressed again. After the scroll above, so the announcement never precedes it.
+            if (isExtendedEnabled(pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType)) {
+              const announcement = getActiveDiffAnnouncement({
+                activeIndex: pluginState.activeIndex,
+                contributorTags: pluginState.contributorTags,
+                decorations: scrollableDecorations,
+                intl: getIntl()
+              });
+              if (announcement) {
+                var _api$accessibilityUti;
+                api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(announcement);
+              }
+            }
           }
         },
         destroy() {

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

@@ -41,6 +41,30 @@ export const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = 'data-revealed';
  */
 export const TAG_EXIT_FALLBACK_MS = 1200;
 
+/**
+ * The tooltip's look, inline rather than through `VANILLA_TOOLTIP_DEFAULT_CLASS`: this tooltip is
+ * hoisted out of the tag, and that class's rule is scoped under `.ProseMirror` — see
+ * `resolveTooltipContainer`. Otherwise `vanillaTooltipDefaultStyles` in editor-core, which is the
+ * look every other vanilla tooltip has; keep the two in step.
+ */
+export const CONTRIBUTOR_TAG_TOOLTIP_STYLES = {
+  boxSizing: 'border-box',
+  maxWidth: '240px',
+  backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+  // A `popover` is given one by the UA stylesheet.
+  border: 'none',
+  borderRadius: "var(--ds-radius-small, 3px)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  overflowWrap: 'break-word',
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-075, 6px)",
+  whiteSpace: 'normal',
+  // A tooltip is never a hit target — it hangs over the document's own content.
+  pointerEvents: 'none'
+};
+
 // Positioned against the host widget its decoration renders on the change's first character:
 // `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
 // character.
@@ -124,6 +148,17 @@ const 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.
+ */
+const generateLabelId = (() => {
+  let count = 0;
+  return () => typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `${CONTRIBUTOR_TAG_CLASS}-label-${crypto.randomUUID()}` : `${CONTRIBUTOR_TAG_CLASS}-label-${count += 1}`;
+})();
 const createSpan = (doc, style, attributes = {}) => {
   const span = doc.createElement('span');
   span.setAttribute('style', style);
@@ -139,21 +174,30 @@ const createSpan = (doc, style, attributes = {}) => {
  * would need a cast per reference below.
  */
 export const buildContributorTagDom = doc => {
+  const labelId = generateLabelId();
   const root = createSpan(doc, constraintStyle);
   const 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'
   });
   const 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").
   const name = createSpan(doc, nameStyle, {
+    'aria-hidden': 'true',
     'data-testid': CONTRIBUTOR_TAG_NAME_TESTID
   });
-  const srLabel = createSpan(doc, srLabelStyle);
+  const srLabel = createSpan(doc, srLabelStyle, {
+    id: labelId
+  });
   tag.append(avatars, name, srLabel);
   root.appendChild(tag);
   return {

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

@@ -0,0 +1,49 @@
+import { contributorTagMessages } from './messages';
+const getContributorName = (contributor, formatMessage) => {
+  var _contributor$name, _contributor$agentKin;
+  const 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".
+ */
+const 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 const formatContributorLabel = (model, formatMessage) => {
+  const isPrimaryAgent = model.contributor.kind === 'agent';
+  const primaryName = getContributorName(model.contributor, formatMessage);
+  const secondaryName = model.connectedContributor ? getContributorName(model.connectedContributor, formatMessage) : '';
+  const agentName = isPrimaryAgent ? primaryName : secondaryName;
+  const userName = isPrimaryAgent ? secondaryName : primaryName;
+  return {
+    fullLabel: model.connectedContributor ? formatMessage(contributorTagMessages.changedByConnected, {
+      agentName,
+      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/es2019/ui/ContributorTag/contributorTagController.js

@@ -3,24 +3,9 @@ import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
+import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, CONTRIBUTOR_TAG_TOOLTIP_STYLES, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
-import { contributorTagMessages } from './messages';
-const getContributorName = (contributor, formatMessage) => {
-  var _contributor$name, _contributor$agentKin;
-  const 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.
@@ -99,8 +84,8 @@ const fadeTagOut = (tag, release) => {
 
 /** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
 const identityOf = model => [model === null || model === void 0 ? void 0 : model.contributor, model === null || model === void 0 ? void 0 : model.connectedContributor].map(contributor => {
-  var _contributor$agentKin2, _contributor$avatarUr;
-  return contributor ? `${contributor.kind}:${(_contributor$agentKin2 = contributor.agentKind) !== null && _contributor$agentKin2 !== void 0 ? _contributor$agentKin2 : ''}:${contributor.name}:${(_contributor$avatarUr = contributor.avatarUrl) !== null && _contributor$avatarUr !== void 0 ? _contributor$avatarUr : ''}` : '';
+  var _contributor$agentKin, _contributor$avatarUr;
+  return contributor ? `${contributor.kind}:${(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : ''}:${contributor.name}:${(_contributor$avatarUr = contributor.avatarUrl) !== null && _contributor$avatarUr !== void 0 ? _contributor$avatarUr : ''}` : '';
 }).join('|');
 
 /**
@@ -322,24 +307,12 @@ export class ContributorTagController {
       return;
     }
     const {
-      formatMessage
-    } = this.options.getIntl();
-    const isPrimaryAgent = model.contributor.kind === 'agent';
-    const primaryName = getContributorName(model.contributor, formatMessage);
-    const secondaryName = model.connectedContributor ? getContributorName(model.connectedContributor, formatMessage) : '';
-    const agentName = isPrimaryAgent ? primaryName : secondaryName;
-    const 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,
-      userName
-    }) : formatMessage(contributorTagMessages.changedBy, {
-      name: primaryName
-    });
-    this.dom.srLabel.textContent = this.fullLabel;
+      fullLabel,
+      visibleName
+    } = formatContributorLabel(model, this.options.getIntl().formatMessage);
+    this.dom.name.textContent = visibleName;
+    this.fullLabel = fullLabel;
+    this.dom.srLabel.textContent = fullLabel;
   }
   accentOf(model) {
     var _model$isInserted;
@@ -395,15 +368,37 @@ export class ContributorTagController {
     if (!content || !this.dom) {
       return;
     }
-    this.tooltip = new VanillaTooltip(this.dom.tag, content, undefined,
-    // `ak-editor-vanilla-tooltip-default` opts into the shared `VanillaTooltip` look, defined as
-    // `vanillaTooltipDefaultStyles` in both EditorContentContainer stylesheets — keep in sync when
-    // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
-    'ak-editor-vanilla-tooltip-default');
+    this.tooltip = new VanillaTooltip(this.dom.tag, content,
+    // Generated id.
+    undefined,
+    // No class: the look is inline, because a hoisted tooltip is outside the `.ProseMirror`
+    // scope `VANILLA_TOOLTIP_DEFAULT_CLASS` is keyed on — see `CONTRIBUTOR_TAG_TOOLTIP_STYLES`.
+    '',
+    // Default delay, no `onShow`, and the default `top` placement.
+    undefined, CONTRIBUTOR_TAG_TOOLTIP_STYLES, undefined, undefined, this.resolveTooltipContainer());
     // `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');
+    // Out of the tag but still in the document, so its text would otherwise 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.tooltip.element.setAttribute('aria-hidden', 'true');
+  }
+
+  /**
+   * Where the tooltip is appended, rather than inside the tag.
+   *
+   * Popper and the browser only agree on a top-layer popover's origin when nothing above it is
+   * transformed, and the tag hangs under the editor's own transformed nodes — inside a wide image
+   * that is `.rich-media-item`, whose `translateX(-50%)` threw the tooltip off screen
+   * (EDITOR-8971). The content area is the nearest ancestor with none of that above it, and keeps
+   * the tooltip inside the editor it belongs to; the document body covers an appearance that has
+   * no content area.
+   */
+  resolveTooltipContainer() {
+    var _editorRoot$closest;
+    const editorRoot = this.options.getEditorRoot();
+    return (_editorRoot$closest = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.closest('.ak-editor-content-area')) !== null && _editorRoot$closest !== void 0 ? _editorRoot$closest : editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.ownerDocument.body;
   }
 
   /**

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

@@ -5,6 +5,11 @@ export const 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/es2019/ui/DiffNavigation/announceActiveDiff.js

@@ -0,0 +1,49 @@
+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.
+ */
+const findTagFor = (decoration, contributorTags) => {
+  if (!(contributorTags !== null && contributorTags !== void 0 && contributorTags.length) || !isDiffDecoration(decoration)) {
+    return undefined;
+  }
+  const {
+    diffId
+  } = decoration.spec;
+  return contributorTags.find(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 const getActiveDiffAnnouncement = ({
+  activeIndex,
+  contributorTags,
+  decorations,
+  intl
+}) => {
+  const activeDecoration = decorations[activeIndex];
+  if (!activeDecoration) {
+    return undefined;
+  }
+  const position = {
+    index: activeIndex + 1,
+    total: decorations.length
+  };
+  const tag = findTagFor(activeDecoration, contributorTags);
+  return tag ? intl.formatMessage(diffNavigationMessages.activeChangeWithContributor, {
+    ...position,
+    contributor: formatContributorLabel(tag, intl.formatMessage).fullLabel
+  }) : intl.formatMessage(diffNavigationMessages.activeChange, position);
+};

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

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export const 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.'
+  }
+});