fix(a11y): aria-controls and role fixes

Jacky Zhao

2025-08-04 53d6e18e815be96a50270c4998175e9c10032330

 quartz/components/Explorer.tsx

@@ -6,7 +6,8 @@
import { classNames } from "../util/lang"
import { i18n } from "../i18n"
import { FileTrieNode } from "../util/fileTrie"
import OverflowList from "./OverflowList"
import OverflowListFactory from "./OverflowList"
import { concatenateResources } from "../util/resources"

type OrderEntries = "sort" | "filter" | "map"

@@ -23,7 +24,7 @@

const defaultOptions: Options = {
  folderDefaultState: "collapsed",
  folderClickBehavior: "collapse",
  folderClickBehavior: "link",
  useSavedState: true,
  mapFn: (node) => {
    return node
@@ -54,10 +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")}
@@ -73,10 +78,9 @@
      >
        <button
          type="button"
          id="mobile-explorer"
          class="explorer-toggle hide-until-loaded"
          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"
@@ -95,8 +99,7 @@
        </button>
        <button
          type="button"
          id="desktop-explorer"
          class="title-button explorer-toggle"
          class="title-button explorer-toggle desktop-explorer"
          data-mobile={false}
          aria-expanded={true}
        >
@@ -116,8 +119,8 @@
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div id="explorer-content" aria-expanded={false}>
          <OverflowList id="explorer-ul" />
        <div id={id} class="explorer-content" aria-expanded={false} role="group">
          <OverflowList class="explorer-ul" />
        </div>
        <template id="template-file">
          <li>
@@ -157,6 +160,6 @@
  }

  Explorer.css = style
  Explorer.afterDOMLoaded = script + OverflowList.afterDOMLoaded("explorer-ul")
  Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
  return Explorer
}) satisfies QuartzComponentConstructor