Suffix the ids in the cloned body TOC

news/changelog-1.11.md

@@ -8,6 +8,7 @@ All changes included in 1.11:
 
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Add a distinct, localizable `aria-label` to each navigation landmark of websites and books: the navbar, the sidebar, the mobile secondary nav, the previous/next page navigation, and the breadcrumbs (previously hardcoded English `breadcrumb`). The new `navigation-*-label` language keys can be overridden with `language:` metadata.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Label the table of contents `<nav>` with its localized title (`aria-labelledby`), in `html` and `revealjs` output, so assistive technology can tell it apart from other navigation landmarks.
+- ([#14844](https://github.com/quarto-dev/quarto-cli/issues/14844)): With `toc-location: left-body` or `right-body`, give the ids in the cloned body table of contents a `-body` suffix. The clone previously repeated every id from the sidebar copy, including the `toc-title` heading that `aria-labelledby` now points at.
 
 ## Engines
 

src/format/html/format-html-bootstrap.ts

@@ -354,6 +354,21 @@ function bootstrapHtmlPostprocessor(
         // Leave it where it is in the document, and just mutate it
         const clonedToc = toc.cloneNode(true) as Element;
         clonedToc.id = "TOC-body";
+
+        // Ids must be unique, so the clone can't keep the originals: suffix
+        // every id it carries, and repoint its aria-labelledby at the renamed
+        // heading. Nothing outside the nav references these ids, and the
+        // originals stay on `toc`, so existing lookups resolve as before.
+        const clonedLabelId = clonedToc.getAttribute("aria-labelledby");
+        const clonedIdEls = clonedToc.querySelectorAll("[id]");
+        for (let i = 0; i < clonedIdEls.length; i++) {
+          const clonedIdEl = clonedIdEls[i] as Element;
+          clonedIdEl.id = `${clonedIdEl.id}-body`;
+        }
+        if (clonedLabelId) {
+          clonedToc.setAttribute("aria-labelledby", `${clonedLabelId}-body`);
+        }
+
         const tocActionsEl = clonedToc.querySelector(".toc-actions");
         if (tocActionsEl) {
           tocActionsEl.remove();

tests/docs/smoke-all/issues/3473-toc-side-body/left-body.qmd

@@ -13,7 +13,16 @@ _quarto:
       ensureHtmlElements:
         -
           - "nav#TOC.toc-active"
+          - "nav#TOC h2#toc-title"
+          - 'nav#TOC[aria-labelledby="toc-title"]'
           - "nav#TOC-body"
+          - "nav#TOC-body h2#toc-title-body"
+          - 'nav#TOC-body[aria-labelledby="toc-title-body"]'
+          - "nav#TOC-body a#toc-section-1-body"
+        -
+          - "nav#TOC-body h2#toc-title"
+          - 'nav#TOC-body[aria-labelledby="toc-title"]'
+          - "nav#TOC-body a#toc-section-1"
 ---
 
 # Section 1

tests/docs/smoke-all/issues/3473-toc-side-body/right-body.qmd

@@ -13,7 +13,16 @@ _quarto:
       ensureHtmlElements:
         -
           - "nav#TOC.toc-active"
+          - "nav#TOC h2#toc-title"
+          - 'nav#TOC[aria-labelledby="toc-title"]'
           - "nav#TOC-body"
+          - "nav#TOC-body h2#toc-title-body"
+          - 'nav#TOC-body[aria-labelledby="toc-title-body"]'
+          - "nav#TOC-body a#toc-section-1-body"
+        -
+          - "nav#TOC-body h2#toc-title"
+          - 'nav#TOC-body[aria-labelledby="toc-title"]'
+          - "nav#TOC-body a#toc-section-1"
 ---
 
 # Section 1