From c0f80b6d6124918a72ae89196a24cdb080ffb9c2 Mon Sep 17 00:00:00 2001
From: MathieuDR <mathieu@deraedt.dev>
Date: Sun, 11 May 2025 00:27:45 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20TOC=20&=20overflow=20list?=
 =?UTF-8?q?=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 quartz/components/OverflowList.tsx      | 6 +++---
 quartz/components/TableOfContents.tsx   | 5 +++--
 quartz/components/scripts/toc.inline.ts | 2 +-
 quartz/components/styles/toc.scss       | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/quartz/components/OverflowList.tsx b/quartz/components/OverflowList.tsx
index 2cd1a75ba..f68de2d55 100644
--- a/quartz/components/OverflowList.tsx
+++ b/quartz/components/OverflowList.tsx
@@ -14,11 +14,11 @@ const OverflowList = ({
 
 let numExplorers = 0
 export default () => {
-  const id = `list-${numExplorers++}`
+  const dataId = `list-${numExplorers++}`
 
   return {
     OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (
-      <OverflowList {...props} id={id} />
+      <OverflowList {...props} data-list-id={dataId} />
     ),
     overflowListAfterDOMLoaded: `
 document.addEventListener("nav", (e) => {
@@ -34,7 +34,7 @@ document.addEventListener("nav", (e) => {
     }
   })
 
-  const ul = document.getElementById("${id}")
+  const ul = document.querySelector("ul[data-list-number='${dataId}']")
   if (!ul) return
 
   const end = ul.querySelector(".overflow-end")
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index f3dc9050f..1daf7b523 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -34,10 +34,11 @@ export default ((opts?: Partial<Options>) => {
         <button
           type="button"
           class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"}
+          aria-labelledby="toc-heading"
           aria-controls="toc-content"
           aria-expanded={!fileData.collapseToc}
         >
-          <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
+          <h3 id="toc-heading">{i18n(cfg.locale).components.tableOfContents.title}</h3>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -53,7 +54,7 @@ export default ((opts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
+        <OverflowList id="toc-content" class={fileData.collapseToc ? "collapsed" : ""}>
           {fileData.toc.map((tocEntry) => (
             <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
               <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index 4148fa235..7d88183c6 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -27,7 +27,7 @@ function toggleToc(this: HTMLElement) {
 function setupToc() {
   for (const toc of document.getElementsByClassName("toc")) {
     const button = toc.querySelector(".toc-header")
-    const content = toc.querySelector(".toc-content")
+    const content = toc.querySelector("#toc-content")
     if (!button || !content) return
     button.addEventListener("click", toggleToc)
     window.addCleanup(() => button.removeEventListener("click", toggleToc))
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 6a7723bdc..f277d6d61 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -38,7 +38,7 @@ button.toc-header {
   }
 }
 
-ul.toc-content.overflow {
+ul#toc-content.overflow {
   list-style: none;
   position: relative;
   margin: 0.5rem 0;