fix: List item screen reader announcement for read-only editor (BLO-1217)

packages/core/src/api/exporters/html/internalHTMLSerializer.ts

@@ -8,40 +8,9 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../../schema/index.js";
+import { addListItemAttributes } from "./util/addListItemAttributes.js";
 import { serializeBlocksInternalHTML } from "./util/serializeBlocksInternalHTML.js";
 
-// This is normally handled using decorations in the
-// `NumberedListIndexingDecorationPlugin`. This does not run when exporting, so
-// we have to add the necessary HTML attributes ourselves.
-const addIndexToNumberedListItems = (element: HTMLElement) => {
-  const numberedListItems = element.querySelectorAll(
-    '[data-content-type="numberedListItem"]',
-  );
-  numberedListItems.forEach((numberedListItem) => {
-    const prevNumberedListItem = numberedListItem
-      .closest(".bn-block-outer")
-      ?.previousElementSibling?.querySelector(
-        '[data-content-type="numberedListItem"]',
-      );
-
-    if (!prevNumberedListItem) {
-      numberedListItem.setAttribute(
-        "data-index",
-        numberedListItem.getAttribute("data-start") || "1",
-      );
-    } else {
-      const prevNumberedListItemIndex =
-        prevNumberedListItem.getAttribute("data-index");
-      numberedListItem.setAttribute(
-        "data-index",
-        (parseInt(prevNumberedListItemIndex || "0") + 1).toString(),
-      );
-    }
-  });
-
-  return element;
-};
-
 // Makes the checkboxes in check list items read-only, as the HTML should be
 // static and therefore read-only when rendered.
 const makeCheckListItemsReadOnly = (element: HTMLElement) => {
@@ -152,7 +121,13 @@ export const createInternalHTMLSerializer = <
   // functionality so that the rendered HTML looks identical to that of a live
   // editor.
   const transforms: ((element: HTMLElement) => HTMLElement)[] = [
-    addIndexToNumberedListItems,
+    // Static exports need list semantics even when the source editor is editable.
+    (element) =>
+      addListItemAttributes(
+        element,
+        (type) =>
+          !!editor.schema.blockSpecs[type]?.implementation.meta.listItem,
+      ),
     makeCheckListItemsReadOnly,
     forceToggleBlocksShow,
     addTableMinCellWidths,

packages/core/src/api/exporters/html/util/addListItemAttributes.ts

@@ -0,0 +1,58 @@
+import {
+  createListOwner,
+  walkListSiblings,
+} from "../../../../extensions/ListItem/listItems.js";
+
+/** Mirrors ListItemExtension for static full HTML, where plugins do not run. */
+export function addListItemAttributes(
+  element: HTMLElement,
+  isListItem: (type: string) => boolean,
+) {
+  // A frame/layout can host siblings outside a blockGroup. Group by the actual
+  // parent instead of assuming all blocks are direct blockGroup children.
+  const parents = new Set(
+    Array.from(
+      element.querySelectorAll('[data-node-type="blockOuter"]'),
+      (block) => block.parentElement!,
+    ),
+  );
+  for (const parent of parents) {
+    const siblings = Array.from(parent.children, (block) => {
+      // Do not mistake a nested child's content for this block's content.
+      const content = block.matches('[data-node-type="blockOuter"]')
+        ? Array.from(
+            block.querySelectorAll<HTMLElement>(".bn-block-content"),
+          ).find(
+            (content) =>
+              content.closest('[data-node-type="blockOuter"]') === block,
+          )
+        : undefined;
+      const type = content?.getAttribute("data-content-type") ?? undefined;
+      const start = content?.getAttribute("data-start");
+      return {
+        item: { block, content },
+        type,
+        start: start ? Number(start) : undefined,
+        listItem: !!type && isListItem(type),
+      };
+    });
+    walkListSiblings(
+      siblings,
+      ({ content }, index) =>
+        content!.setAttribute("data-index", String(index)),
+      (items) => {
+        const ids = items.map(({ block }) => {
+          const id = encodeURIComponent(block.getAttribute("data-id")!);
+          block.setAttribute("id", id);
+          block.setAttribute("role", "listitem");
+          return id;
+        });
+        parent.insertBefore(
+          createListOwner(element.ownerDocument, ids),
+          items[0].block,
+        );
+      },
+    );
+  }
+  return element;
+}

packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -1,5 +1,6 @@
 import { DOMSerializer, Fragment, Node } from "prosemirror-model";
 
+import { UniqueID } from "../../../../extensions/tiptap-extensions/UniqueID/UniqueID.js";
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
 import {
@@ -156,7 +157,12 @@ function serializeBlock<
   const children = block.children || [];
 
   const impl = editor.blockImplementations[block.type as any].implementation;
-  const fullBlock = { ...block, props, children } as any;
+  const fullBlock = {
+    ...block,
+    id: block.id ?? UniqueID.options.generateID(),
+    props,
+    children,
+  } as any;
 
   if (isLayoutNode(editor.pmSchema.nodes[block.type as any])) {
     // A layout block is its frame. `renderFrameDOM` stamps the frame's root with
@@ -204,7 +210,7 @@ function serializeBlock<
   // wrap the block in a blockContainer
   const bc = BC_NODE.spec?.toDOM?.(
     BC_NODE.create({
-      id: block.id,
+      id: fullBlock.id,
       ...props,
     }),
   ) as {

packages/core/src/blocks/ListItem/BulletListItem/block.ts

@@ -33,6 +33,7 @@ export const createBulletListItemBlockSpec = createBlockSpec(
       emptyEnterResets: true,
     },
     meta: {
+      listItem: true,
       isolating: false,
     },
     parse(element) {

packages/core/src/blocks/ListItem/CheckListItem/block.ts

@@ -33,6 +33,7 @@ export const createCheckListItemBlockSpec = createBlockSpec(
       emptyEnterResets: true,
     },
     meta: {
+      listItem: true,
       isolating: false,
     },
     parse(element) {