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", "name": "@jackyzha0/quartz",
"description": "🌱 publish your digital garden and notes as a website", "description": "🌱 publish your digital garden and notes as a website",
"private": true, "private": true,
"version": "4.0.11", "version": "4.1.0",
"type": "module", "type": "module",
"author": "jackyzha0 <j.zhao2k19@gmail.com>", "author": "jackyzha0 <j.zhao2k19@gmail.com>",
"license": "MIT", "license": "MIT",

View file

@ -79,7 +79,7 @@ export default ((userOpts?: Partial<Options>) => {
data-savestate={opts.useSavedState} data-savestate={opts.useSavedState}
data-tree={jsonTree} data-tree={jsonTree}
> >
<h3>{opts.title}</h3> <h1>{opts.title}</h1>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="14" width="14"
@ -98,7 +98,7 @@ export default ((userOpts?: Partial<Options>) => {
<div id="explorer-content"> <div id="explorer-content">
<ul class="overflow" id="explorer-ul"> <ul class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} /> <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<div id="explorer-end" /> <li id="explorer-end" />
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -145,7 +145,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
} }
return ( return (
<div> <li>
{node.file ? ( {node.file ? (
// Single file node // Single file node
<li key={node.file.slug}> <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> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */} {/* 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" ? ( {folderBehavior === "link" ? (
<a href={`${folderPath}`} data-for={node.name} class="folder-title"> <a href={`${folderPath}`} data-for={node.name} class="folder-title">
{node.name} {node.name}
</a> </a>
) : ( ) : (
<button class="folder-button"> <button class="folder-button">
<h3 class="folder-title">{node.name}</h3> <p class="folder-title">{node.name}</p>
</button> </button>
)} )}
</li> </div>
</div> </div>
)} )}
{/* Recursively render children of folder */} {/* Recursively render children of folder */}
@ -210,6 +210,6 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
</div> </div>
</div> </div>
)} )}
</div> </li>
) )
} }

View file

@ -113,9 +113,11 @@ function setupExplorer() {
) as HTMLElement ) as HTMLElement
// Get corresponding content <ul> tag and set state // Get corresponding content <ul> tag and set state
const folderUL = folderLi.parentElement?.nextElementSibling if (folderLi) {
if (folderUL) { const folderUL = folderLi.parentElement?.nextElementSibling
setFolderState(folderUL as HTMLElement, folderUl.collapsed) if (folderUL) {
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
}
} }
}) })
} else { } else {

View file

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