Merge ac1c0a24a2 into 8d19bc3f4a

quartz/components/Explorer.tsx

@@ -61,7 +61,7 @@ export default ((userOpts?: Partial<Options>) => {
 
   const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
     return (
-      <div
+      <nav
         class={classNames(displayClass, "explorer")}
         data-behavior={opts.folderClickBehavior}
         data-collapsed={opts.folderDefaultState}
@@ -78,6 +78,7 @@ export default ((userOpts?: Partial<Options>) => {
           class="explorer-toggle mobile-explorer hide-until-loaded"
           data-mobile={true}
           aria-controls="explorer-content"
+          aria-label="Explorer"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +117,7 @@ export default ((userOpts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div class="explorer-content" aria-expanded={false}>
+        <div id="explorer-content">
           <OverflowList class="explorer-ul" />
         </div>
         <template id="template-file">
@@ -152,7 +153,7 @@ export default ((userOpts?: Partial<Options>) => {
             </div>
           </li>
         </template>
-      </div>
+      </nav>
     )
   }
 

quartz/components/OverflowList.tsx

@@ -1,11 +1,8 @@
 import { JSX } from "preact"
 
-const OverflowList = ({
-  children,
-  ...props
-}: JSX.HTMLAttributes<HTMLUListElement> & { id: string }) => {
+const OverflowList = ({ children, ...props }: JSX.HTMLAttributes<HTMLUListElement>) => {
   return (
-    <ul {...props} class={[props.class, "overflow"].filter(Boolean).join(" ")} id={props.id}>
+    <ul {...props} class={[props.class, "overflow"].filter(Boolean).join(" ")}>
       {children}
       <li class="overflow-end" />
     </ul>
@@ -14,11 +11,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 +31,7 @@ document.addEventListener("nav", (e) => {
     }
   })
 
-  const ul = document.getElementById("${id}")
+  const ul = document.querySelector("ul[data-list-id='${dataId}']")
   if (!ul) return
 
   const end = ul.querySelector(".overflow-end")

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}>

quartz/components/scripts/explorer.inline.ts

@@ -151,7 +151,7 @@ function createFolderNode(
 }
 
 async function setupExplorer(currentSlug: FullSlug) {
-  const allExplorers = document.querySelectorAll("div.explorer") as NodeListOf<HTMLElement>
+  const allExplorers = document.querySelectorAll("nav.explorer") as NodeListOf<HTMLElement>
 
   for (const explorer of allExplorers) {
     const dataFns = JSON.parse(explorer.dataset.dataFns || "{}")

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))

quartz/components/styles/explorer.scss

@@ -20,7 +20,7 @@
       margin: 0;
     }
 
-    .hide-until-loaded ~ .explorer-content {
+    .hide-until-loaded ~ #explorer-content {
       display: none;
     }
   }
@@ -108,7 +108,7 @@ button.desktop-explorer {
   }
 }
 
-.explorer-content {
+#explorer-content {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
@@ -215,7 +215,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
     &.collapsed {
       flex: 0 0 34px;
 
-      & > .explorer-content {
+      & > #explorer-content {
         transform: translateX(-100vw);
         visibility: hidden;
       }
@@ -224,13 +224,13 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
     &:not(.collapsed) {
       flex: 0 0 34px;
 
-      & > .explorer-content {
+      & > #explorer-content {
         transform: translateX(0);
         visibility: visible;
       }
     }
 
-    .explorer-content {
+    #explorer-content {
       box-sizing: border-box;
       z-index: 100;
       position: absolute;

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;