From b029eeadabe0877df6ec11443c68743f1494bc40 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Wed, 20 Sep 2023 20:55:29 +0000
Subject: [PATCH] feat(explorer): improve accessibility and consistency (+ bug fix) (#488)
---
quartz/components/ExplorerNode.tsx | 10 +++++-----
quartz/components/Explorer.tsx | 4 ++--
package.json | 2 +-
quartz/components/styles/explorer.scss | 13 ++++++++-----
quartz/components/scripts/explorer.inline.ts | 8 +++++---
5 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/package.json b/package.json
index 0a2085c..11a68d3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "@jackyzha0/quartz",
"description": "🌱 publish your digital garden and notes as a website",
"private": true,
- "version": "4.0.11",
+ "version": "4.1.0",
"type": "module",
"author": "jackyzha0 <j.zhao2k19@gmail.com>",
"license": "MIT",
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index 8597075..bc4855e 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -79,7 +79,7 @@
data-savestate={opts.useSavedState}
data-tree={jsonTree}
>
- <h3>{opts.title}</h3>
+ <h1>{opts.title}</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
@@ -98,7 +98,7 @@
<div id="explorer-content">
<ul class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
- <div id="explorer-end" />
+ <li id="explorer-end" />
</ul>
</div>
</div>
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index fd0c082..c55a7a0 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -145,7 +145,7 @@
}
return (
- <div>
+ <li>
{node.file ? (
// Single file node
<li key={node.file.slug}>
@@ -174,17 +174,17 @@
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
- <li key={node.name} data-folderpath={folderPath}>
+ <div key={node.name} data-folderpath={folderPath}>
{folderBehavior === "link" ? (
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
{node.name}
</a>
) : (
<button class="folder-button">
- <h3 class="folder-title">{node.name}</h3>
+ <p class="folder-title">{node.name}</p>
</button>
)}
- </li>
+ </div>
</div>
)}
{/* Recursively render children of folder */}
@@ -210,6 +210,6 @@
</div>
</div>
)}
- </div>
+ </li>
)
}
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 2b7df7d..9fe1865 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -113,9 +113,11 @@
) as HTMLElement
// Get corresponding content <ul> tag and set state
- const folderUL = folderLi.parentElement?.nextElementSibling
- if (folderUL) {
- setFolderState(folderUL as HTMLElement, folderUl.collapsed)
+ if (folderLi) {
+ const folderUL = folderLi.parentElement?.nextElementSibling
+ if (folderUL) {
+ setFolderState(folderUL as HTMLElement, folderUl.collapsed)
+ }
}
})
} else {
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 776a5ae..955c269 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,4 +1,5 @@
button#explorer {
+ all: unset;
background-color: transparent;
border: none;
text-align: left;
@@ -8,7 +9,7 @@
display: flex;
align-items: center;
- & h3 {
+ & h1 {
font-size: 1rem;
display: inline-block;
margin: 0;
@@ -58,7 +59,7 @@
max-height 0.35s ease,
transform 0.35s ease,
opacity 0.2s ease;
- & div > li > a {
+ & li > a {
color: var(--dark);
opacity: 0.75;
pointer-events: all;
@@ -92,7 +93,7 @@
color: var(--tertiary) !important;
}
- & li > button {
+ & div > button {
color: var(--dark);
background-color: transparent;
border: none;
@@ -103,7 +104,7 @@
display: flex;
align-items: center;
- & h3 {
+ & p {
font-size: 0.95rem;
display: inline-block;
color: var(--secondary);
@@ -138,5 +139,7 @@
#explorer-end {
// needs height so IntersectionObserver gets triggered
- height: 1px;
+ height: 4px;
+ // remove default margin from li
+ margin: 0;
}
--
Gitblit v1.10.0