Anson/brain-quartz
1
0
Fork 0
mirror of https://gitlab.com/MisterBiggs/brain-quartz.git synced 2025-09-12 16:55:01 +00:00
Code Releases Activity

fix(a11y): aria-controls and role fixes

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
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 collapsed: boolean
} }
let numExplorers = 0
export default ((userOpts?: Partial<Options>) => { export default ((userOpts?: Partial<Options>) => {
const opts: Options = { ...defaultOptions, ...userOpts } const opts: Options = { ...defaultOptions, ...userOpts }
const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory() const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => { const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
const id = `explorer-${numExplorers++}`
return ( return (
<div <div
class={classNames(displayClass, "explorer")} class={classNames(displayClass, "explorer")}
@@ -77,7 +80,7 @@ export default ((userOpts?: Partial<Options>) => {
type="button" type="button"
class="explorer-toggle mobile-explorer hide-until-loaded" class="explorer-toggle mobile-explorer hide-until-loaded"
data-mobile={true} data-mobile={true}
aria-controls="explorer-content" aria-controls={id}
> >
<svg <svg
xmlns="http://www.w3.org/2000/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> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </button>
<div class="explorer-content" aria-expanded={false}> <div id={id} class="explorer-content" aria-expanded={false} role="group">
<OverflowList class="explorer-ul" /> <OverflowList class="explorer-ul" />
</div> </div>
<template id="template-file"> <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 () => { export default () => {
const id = `list-${numExplorers++}` const id = `list-${numLists++}`
return { return {
OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => ( OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (

9
quartz/components/TableOfContents.tsx
View File

@@ -17,6 +17,7 @@ const defaultOptions: Options = {
layout: "modern", layout: "modern",
} }
let numTocs = 0
export default ((opts?: Partial<Options>) => { export default ((opts?: Partial<Options>) => {
const layout = opts?.layout ?? defaultOptions.layout const layout = opts?.layout ?? defaultOptions.layout
const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory() const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
@@ -29,12 +30,13 @@ export default ((opts?: Partial<Options>) => {
return null return null
} }
const id = `toc-${numTocs++}`
return ( return (
<div class={classNames(displayClass, "toc")}> <div class={classNames(displayClass, "toc")}>
<button <button
type="button" type="button"
class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"} class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"}
aria-controls="toc-content" aria-controls={id}
aria-expanded={!fileData.collapseToc} aria-expanded={!fileData.collapseToc}
> >
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3> <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> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </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) => ( {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}>