From 53d6e18e815be96a50270c4998175e9c10032330 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 04 Aug 2025 05:44:35 +0000
Subject: [PATCH] fix(a11y): aria-controls and role fixes
---
quartz/components/Explorer.tsx | 7 +++++--
quartz/components/OverflowList.tsx | 4 ++--
quartz/components/TableOfContents.tsx | 9 +++++++--
3 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index 56784f1..e4cbcab 100644
--- a/quartz/components/Explorer.tsx
+++ b/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">
diff --git a/quartz/components/OverflowList.tsx b/quartz/components/OverflowList.tsx
index 2cd1a75..12d97b6 100644
--- a/quartz/components/OverflowList.tsx
+++ b/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>) => (
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index f3dc905..bbccf82 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/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}>
--
Gitblit v1.10.0