fix(a11y): aria-controls and role fixes

Jacky Zhao

2025-08-04 53d6e18e815be96a50270c4998175e9c10032330

fix(a11y): aria-controls and role fixes

 quartz/components/Explorer.tsx

@@ -55,11 +55,14 @@
  collapsed: boolean
}

let numExplorers = 0
export default ((userOpts?: Partial<Options>) => {
  const opts: Options = { ...defaultOptions, ...userOpts }
  const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()

  const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
    const id = `explorer-${numExplorers++}`

    return (
      <div
        class={classNames(displayClass, "explorer")}
@@ -77,7 +80,7 @@
          type="button"
          class="explorer-toggle mobile-explorer hide-until-loaded"
          data-mobile={true}
          aria-controls="explorer-content"
          aria-controls={id}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +119,7 @@
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div class="explorer-content" aria-expanded={false}>
        <div id={id} class="explorer-content" aria-expanded={false} role="group">
          <OverflowList class="explorer-ul" />
        </div>
        <template id="template-file">

 quartz/components/OverflowList.tsx

@@ -12,9 +12,9 @@
  )
}

let numExplorers = 0
let numLists = 0
export default () => {
  const id = `list-${numExplorers++}`
  const id = `list-${numLists++}`

  return {
    OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (

 quartz/components/TableOfContents.tsx

@@ -17,6 +17,7 @@
  layout: "modern",
}

let numTocs = 0
export default ((opts?: Partial<Options>) => {
  const layout = opts?.layout ?? defaultOptions.layout
  const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
@@ -29,12 +30,13 @@
      return null
    }

    const id = `toc-${numTocs++}`
    return (
      <div class={classNames(displayClass, "toc")}>
        <button
          type="button"
          class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"}
          aria-controls="toc-content"
          aria-controls={id}
          aria-expanded={!fileData.collapseToc}
        >
          <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
@@ -53,7 +55,10 @@
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
        <OverflowList
          id={id}
          class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}
        >
          {fileData.toc.map((tocEntry) => (
            <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
              <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>