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

Author: benschlegel

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 <[email protected]>",
   "license": "MIT",

quartz/components/Explorer.tsx

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

quartz/components/ExplorerNode.tsx

@@ -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>
   )
 }

quartz/components/scripts/explorer.inline.ts

@@ -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 {

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 @@ 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;
 }