feat(explorer): improve accessibility and consistency (+ bug fix) (#488)

* feat(consistency): use `all: unset` on button

* style: improve accessibility and consistency for explorer

* fix: localStorage bug with folder name changes

* chore: bump quartz version
This commit is contained in:
Ben Schlegel 2023-09-20 22:55:29 +02:00 committed by GitHub
parent 6a9e6352e8
commit b029eeadab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 16 deletions

View file

@ -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",

View file

@ -79,7 +79,7 @@ export default ((userOpts?: Partial<Options>) => {
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 @@ export default ((userOpts?: Partial<Options>) => {
<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>

View file

@ -145,7 +145,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
}
return (
<div>
<li>
{node.file ? (
// Single file node
<li key={node.file.slug}>
@ -174,17 +174,17 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
<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 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
</div>
</div>
)}
</div>
</li>
)
}

View file

@ -113,9 +113,11 @@ function setupExplorer() {
) 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 {

View file

@ -1,4 +1,5 @@
button#explorer {
all: unset;
background-color: transparent;
border: none;
text-align: left;
@ -8,7 +9,7 @@ button#explorer {
display: flex;
align-items: center;
& h3 {
& h1 {
font-size: 1rem;
display: inline-block;
margin: 0;
@ -58,7 +59,7 @@ button#explorer {
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 @@ svg {
color: var(--tertiary) !important;
}
& li > button {
& div > button {
color: var(--dark);
background-color: transparent;
border: none;
@ -103,7 +104,7 @@ svg {
display: flex;
align-items: center;
& h3 {
& p {
font-size: 0.95rem;
display: inline-block;
color: var(--secondary);
@ -138,5 +139,7 @@ div:has(> .folder-outer:not(.open)) > .folder-container > svg {
#explorer-end {
// needs height so IntersectionObserver gets triggered
height: 1px;
height: 4px;
// remove default margin from li
margin: 0;
}