GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 21:34:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

♿️ TOC & overflow list accessibility

Browse Source
This commit is contained in:
MathieuDR 2025-05-11 00:27:45 +02:00
parent f23ee32b11
commit c0f80b6d61
No known key found for this signature in database
GPG Key ID: BB1B6AEC733F6F80
4 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
quartz/components/OverflowList.tsx
View File

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

5
quartz/components/TableOfContents.tsx
View File

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

2
quartz/components/scripts/toc.inline.ts
View File

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

2
quartz/components/styles/toc.scss
View File

@ -38,7 +38,7 @@ button.toc-header {
}
}
ul.toc-content.overflow {
ul#toc-content.overflow {
list-style: none;
position: relative;
margin: 0.5rem 0;