smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-08-21 03:51:27 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(a11y): aria-controls and role fixes
Some checks failed
Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped
Details
Build and Test / publish-tag (push) Has been skipped
Details
Build and Test / build-and-test (macos-latest) (push) Has been cancelled
Details
Build and Test / build-and-test (windows-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Jacky Zhao 2025-08-03 22:44:35 -07:00
parent 91059843ae
commit 53d6e18e81
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
quartz/components/Explorer.tsx
View File

@ -55,11 +55,14 @@ export type FolderState = {
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 @@ export default ((userOpts?: Partial<Options>) => {
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 @@ export default ((userOpts?: Partial<Options>) => {
<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">

4
quartz/components/OverflowList.tsx
View File

@ -12,9 +12,9 @@ const OverflowList = ({
)
}
let numExplorers = 0
let numLists = 0
export default () => {
const id = `list-${numExplorers++}`
const id = `list-${numLists++}`
return {
OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (

9
quartz/components/TableOfContents.tsx
View File

@ -17,6 +17,7 @@ const defaultOptions: Options = {
layout: "modern",
}
let numTocs = 0
export default ((opts?: Partial<Options>) => {
const layout = opts?.layout ?? defaultOptions.layout
const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
@ -29,12 +30,13 @@ export default ((opts?: Partial<Options>) => {
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 @@ 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={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}>