fixup! fixup! fixup! ♿️(frontend) make html export accessible to screen reader users

Author: Ovgodd

src/frontend/apps/impress/src/features/docs/doc-export/assets/export-html-styles.txt

@@ -184,6 +184,75 @@ s {
   margin: 0;
 }
 
+/* Remove bullet points from checkbox lists */
+ul.checklist,
+ul:has(li input[type='checkbox']) {
+  list-style: none;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+ul.checklist li,
+ul:has(li input[type='checkbox']) li {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+ul.checklist li input[type='checkbox'],
+ul:has(li input[type='checkbox']) li input[type='checkbox'] {
+  margin: 0;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+ul.checklist li p,
+ul:has(li input[type='checkbox']) li p {
+  margin: 0;
+  flex: 1;
+}
+
+/* Native HTML Lists - remove default margins */
+ol,
+ul {
+  margin: 0;
+  padding-left: 24px;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+/* Nested lists */
+ul ul {
+  list-style-type: circle;
+}
+
+/* Keep decimal numbering for nested ol (remove this if you want letters) */
+ol ol {
+  list-style-type: decimal;
+}
+
+li {
+  margin: 0;
+  padding: 0;
+  line-height: 24px;
+}
+
+li p {
+  margin: 0;
+  display: inline;
+}
+
+
+
 /* Quotes */
 blockquote,
 .bn-block-content[data-content-type='quote'] blockquote {

src/frontend/apps/impress/src/features/docs/doc-export/utils_html.ts

@@ -142,38 +142,121 @@ export const improveHtmlAccessibility = (
     block.replaceWith(heading);
   });
 
-  // 2) Lists: group consecutive list items into UL/OL with LI children
+  // 2) Lists: convert to semantic OL/UL/LI elements for accessibility
   const listItemSelector =
     "[data-content-type='bulletListItem'], [data-content-type='numberedListItem']";
-  const listItems = Array.from(
-    body.querySelectorAll<HTMLElement>(listItemSelector),
+
+  // Helper function to get nesting level by counting block-group ancestors
+  const getNestingLevel = (blockOuter: HTMLElement): number => {
+    let level = 0;
+    let parent = blockOuter.parentElement;
+    while (parent) {
+      if (parent.classList.contains('bn-block-group')) {
+        level++;
+      }
+      parent = parent.parentElement;
+    }
+    return level;
+  };
+
+  // Find all block-outer elements in document order
+  const allBlockOuters = Array.from(
+    body.querySelectorAll<HTMLElement>('.bn-block-outer'),
   );
 
-  listItems.forEach((item) => {
-    const parent = item.parentElement;
-    if (!parent) {
-      return;
+  // Collect list items with their info before modifying DOM
+  interface ListItemInfo {
+    blockOuter: HTMLElement;
+    listItem: HTMLElement;
+    contentType: string;
+    level: number;
+  }
+
+  const listItemsInfo: ListItemInfo[] = [];
+  allBlockOuters.forEach((blockOuter) => {
+    const listItem = blockOuter.querySelector<HTMLElement>(listItemSelector);
+    if (listItem) {
+      const contentType = listItem.getAttribute('data-content-type');
+      if (contentType) {
+        const level = getNestingLevel(blockOuter);
+        listItemsInfo.push({
+          blockOuter,
+          listItem,
+          contentType,
+          level,
+        });
+      }
     }
+  });
+
+  // Stack to track lists at each nesting level
+  const listStack: Array<{ list: HTMLElement; type: string; level: number }> =
+    [];
 
-    const isBullet =
-      item.getAttribute('data-content-type') === 'bulletListItem';
+  listItemsInfo.forEach((info, idx) => {
+    const { blockOuter, listItem, contentType, level } = info;
+    const isBullet = contentType === 'bulletListItem';
     const listTag = isBullet ? 'ul' : 'ol';
 
-    // If the previous sibling is already the right list, reuse it; otherwise create a new one.
-    let previousSibling = item.previousElementSibling;
-    let listContainer: HTMLElement | null = null;
+    // Check if previous item continues the same list (same type and level)
+    const previousInfo = idx > 0 ? listItemsInfo[idx - 1] : null;
+    const continuesPreviousList =
+      previousInfo &&
+      previousInfo.contentType === contentType &&
+      previousInfo.level === level;
 
-    if (previousSibling?.tagName.toLowerCase() === listTag) {
-      listContainer = previousSibling as HTMLElement;
-    } else {
-      listContainer = parsedDocument.createElement(listTag);
-      parent.insertBefore(listContainer, item);
+    // Find or create the appropriate list
+    let targetList: HTMLElement | null = null;
+
+    if (continuesPreviousList) {
+      // Continue with the list at this level from stack
+      const listAtLevel = listStack.find((item) => item.level === level);
+      targetList = listAtLevel?.list || null;
+    }
+
+    // If no list found, create a new one
+    if (!targetList) {
+      targetList = parsedDocument.createElement(listTag);
+
+      // Remove lists from stack that are at same or deeper level
+      while (
+        listStack.length > 0 &&
+        listStack[listStack.length - 1].level >= level
+      ) {
+        listStack.pop();
+      }
+
+      // If we have a parent list, nest this list inside its last li
+      if (
+        listStack.length > 0 &&
+        listStack[listStack.length - 1].level < level
+      ) {
+        const parentList = listStack[listStack.length - 1].list;
+        const lastLi = parentList.querySelector('li:last-child');
+        if (lastLi) {
+          lastLi.appendChild(targetList);
+        } else {
+          // No li yet, create one and add the nested list
+          const li = parsedDocument.createElement('li');
+          parentList.appendChild(li);
+          li.appendChild(targetList);
+        }
+      } else {
+        // Top-level list
+        blockOuter.parentElement?.insertBefore(targetList, blockOuter);
+      }
+
+      // Add to stack
+      listStack.push({ list: targetList, type: contentType, level });
     }
 
+    // Create list item and add content
     const li = parsedDocument.createElement('li');
-    li.innerHTML = item.innerHTML;
-    listContainer.appendChild(li);
-    parent.removeChild(item);
+    li.innerHTML = listItem.innerHTML;
+    targetList.appendChild(li);
+
+    // Remove original block-outer
+    blockOuter.remove();
   });
 
   // 3) Quotes -> <blockquote>
@@ -215,6 +298,7 @@ export const improveHtmlAccessibility = (
     } else {
       listContainer = parsedDocument.createElement('ul');
       listContainer.setAttribute('role', 'list');
+      listContainer.classList.add('checklist');
       parent.insertBefore(listContainer, item);
     }