GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-26 14:24:05 -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 let numExplorers = 0
export default () => { export default () => {
const id = `list-${numExplorers++}` const dataId = `list-${numExplorers++}`
return { return {
OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => ( OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (
<OverflowList {...props} id={id} /> <OverflowList {...props} data-list-id={dataId} />
), ),
overflowListAfterDOMLoaded: ` overflowListAfterDOMLoaded: `
document.addEventListener("nav", (e) => { 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 if (!ul) return
const end = ul.querySelector(".overflow-end") const end = ul.querySelector(".overflow-end")

5
quartz/components/TableOfContents.tsx
View File

@ -34,10 +34,11 @@ export default ((opts?: Partial<Options>) => {
<button <button
type="button" type="button"
class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"} class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"}
aria-labelledby="toc-heading"
aria-controls="toc-content" aria-controls="toc-content"
aria-expanded={!fileData.collapseToc} aria-expanded={!fileData.collapseToc}
> >
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3> <h3 id="toc-heading">{i18n(cfg.locale).components.tableOfContents.title}</h3>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@ -53,7 +54,7 @@ export default ((opts?: Partial<Options>) => {
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </button>
<OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}> <OverflowList id="toc-content" class={fileData.collapseToc ? "collapsed" : ""}>
{fileData.toc.map((tocEntry) => ( {fileData.toc.map((tocEntry) => (
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}> <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}> <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() { function setupToc() {
for (const toc of document.getElementsByClassName("toc")) { for (const toc of document.getElementsByClassName("toc")) {
const button = toc.querySelector(".toc-header") const button = toc.querySelector(".toc-header")
const content = toc.querySelector(".toc-content") const content = toc.querySelector("#toc-content")
if (!button || !content) return if (!button || !content) return
button.addEventListener("click", toggleToc) button.addEventListener("click", toggleToc)
window.addCleanup(() => button.removeEventListener("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; list-style: none;
position: relative; position: relative;
margin: 0.5rem 0; margin: 0.5rem 0;