From 27a41abb62cc9005ed4234bdb02f38b6cfeedec3 Mon Sep 17 00:00:00 2001
From: Andrew <80933354+ndrooo@users.noreply.github.com>
Date: Fri, 09 Aug 2024 01:07:47 +0000
Subject: [PATCH] feat(toc,explorer): add accessibility for toggle (#1327)
---
quartz/components/Explorer.tsx | 2 ++
quartz/components/TableOfContents.tsx | 8 +++++++-
quartz/components/styles/toc.scss | 12 +++++++++++-
quartz/components/styles/explorer.scss | 13 +++++++++++--
quartz/components/scripts/explorer.inline.ts | 4 ++++
quartz/components/scripts/toc.inline.ts | 4 ++++
6 files changed, 39 insertions(+), 4 deletions(-)
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index 24583a1..e4c3dfa 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -91,6 +91,8 @@
data-collapsed={opts.folderDefaultState}
data-savestate={opts.useSavedState}
data-tree={jsonTree}
+ aria-controls="explorer-content"
+ aria-expanded={opts.folderDefaultState === "open"}
>
<h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
<svg
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 77ff0eb..f3d8d7f 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -26,7 +26,13 @@
return (
<div class={classNames(displayClass, "toc")}>
- <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
+ <button
+ type="button"
+ id="toc"
+ class={fileData.collapseToc ? "collapsed" : ""}
+ aria-controls="toc-content"
+ aria-expanded={!fileData.collapseToc}
+ >
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 3eb25ea..584de6c 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -17,6 +17,10 @@
function toggleExplorer(this: HTMLElement) {
this.classList.toggle("collapsed")
+ this.setAttribute(
+ "aria-expanded",
+ this.getAttribute("aria-expanded") === "true" ? "false" : "true",
+ )
const content = this.nextElementSibling as MaybeHTMLElement
if (!content) return
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index 546859e..acc81b2 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -16,6 +16,10 @@
function toggleToc(this: HTMLElement) {
this.classList.toggle("collapsed")
+ this.setAttribute(
+ "aria-expanded",
+ this.getAttribute("aria-expanded") === "true" ? "false" : "true",
+ )
const content = this.nextElementSibling as HTMLElement | undefined
if (!content) return
content.classList.toggle("collapsed")
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index d4875e7..2f94b15 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,7 +1,6 @@
@use "../../styles/variables.scss" as *;
button#explorer {
- all: unset;
background-color: transparent;
border: none;
text-align: left;
@@ -46,8 +45,18 @@
list-style: none;
overflow: hidden;
max-height: none;
- transition: max-height 0.35s ease;
+ transition:
+ max-height 0.35s ease,
+ visibility 0s linear 0s;
margin-top: 0.5rem;
+ visibility: visible;
+
+ &.collapsed {
+ transition:
+ max-height 0.35s ease,
+ visibility 0s linear 0.35s;
+ visibility: hidden;
+ }
&.collapsed > .overflow::after {
opacity: 0;
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 27ff62a..6845812 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -29,8 +29,18 @@
list-style: none;
overflow: hidden;
max-height: none;
- transition: max-height 0.5s ease;
+ transition:
+ max-height 0.5s ease,
+ visibility 0s linear 0s;
position: relative;
+ visibility: visible;
+
+ &.collapsed {
+ transition:
+ max-height 0.5s ease,
+ visibility 0s linear 0.5s;
+ visibility: hidden;
+ }
&.collapsed > .overflow::after {
opacity: 0;
--
Gitblit v1.10.0