a11y: Fix missing buttons for explorer folders

quartz/components/Explorer.tsx

@@ -103,11 +103,10 @@ export default ((userOpts?: Partial<Options>) => {
           data-mobile={false}
           aria-expanded={true}
         >
-          <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
+            width="12"
+            height="12"
             viewBox="5 8 14 8"
             fill="none"
             stroke="currentColor"
@@ -118,6 +117,7 @@ export default ((userOpts?: Partial<Options>) => {
           >
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
+          <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
         </button>
         <div id={id} class="explorer-content" aria-expanded={false} role="group">
           <OverflowList class="explorer-ul" />
@@ -130,20 +130,22 @@ export default ((userOpts?: Partial<Options>) => {
         <template id="template-folder">
           <li>
             <div class="folder-container">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="12"
-                height="12"
-                viewBox="5 8 14 8"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="folder-icon"
-              >
-                <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
+              <button class="folder-expand">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  viewBox="5 8 14 8"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="folder-icon"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </button>
               <div>
                 <button class="folder-button">
                   <span class="folder-title"></span>

quartz/components/scripts/explorer.inline.ts

@@ -43,11 +43,11 @@ function toggleFolder(evt: MouseEvent) {
   if (!target) return
 
   // Check if target was svg icon or button
-  const isSvg = target.nodeName === "svg"
+  const isFolderExpand = target.classList.contains("folder-expand")
 
   // corresponding <ul> element relative to clicked button/folder
   const folderContainer = (
-    isSvg
+    isFolderExpand
       ? // svg -> div.folder-container
         target.parentElement
       : // button.folder-button -> div -> div.folder-container
@@ -248,12 +248,12 @@ async function setupExplorer(currentSlug: FullSlug) {
       }
     }
 
-    const folderIcons = explorer.getElementsByClassName(
-      "folder-icon",
+    const folderExpands = explorer.getElementsByClassName(
+      "folder-expand",
     ) as HTMLCollectionOf<HTMLElement>
-    for (const icon of folderIcons) {
-      icon.addEventListener("click", toggleFolder)
-      window.addCleanup(() => icon.removeEventListener("click", toggleFolder))
+    for (const expand of folderExpands) {
+      expand.addEventListener("click", toggleFolder)
+      window.addCleanup(() => expand.removeEventListener("click", toggleFolder))
     }
   }
 }

quartz/components/styles/explorer.scss

@@ -30,18 +30,19 @@
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
-
-  min-height: 1.2rem;
   flex: 0 1 auto;
   &.collapsed {
-    flex: 0 1 1.2rem;
+    & .explorer-content {
+      display: none;
+    }
+
     & .fold {
       transform: rotateZ(-90deg);
     }
   }
 
   & .fold {
-    margin-left: 0.5rem;
+    margin-inline: 0.375rem;
     transition: transform 0.3s ease;
     opacity: 0.8;
   }
@@ -120,14 +121,20 @@ button.desktop-explorer {
     padding: 0;
     overscroll-behavior: contain;
 
-    & li > a {
-      color: var(--dark);
-      opacity: 0.75;
-      pointer-events: all;
+    & li {
+      &:not(:has(.folder-container)) {
+        padding-left: 0.375rem;
+      }
 
-      &.active {
-        opacity: 1;
-        color: var(--tertiary);
+      & > a {
+        color: var(--dark);
+        opacity: 0.75;
+        pointer-events: all;
+
+        &.active {
+          opacity: 1;
+          color: var(--tertiary);
+        }
       }
     }
   }
@@ -144,9 +151,9 @@ button.desktop-explorer {
 
   .folder-outer > ul {
     overflow: hidden;
-    margin-left: 6px;
-    padding-left: 0.8rem;
-    border-left: 1px solid var(--lightgray);
+    margin-left: 0.6875rem;
+    padding-left: 0.375rem;
+    border-left: 0.0625rem solid var(--lightgray);
   }
 }
 
@@ -193,23 +200,26 @@ button.desktop-explorer {
   }
 }
 
-.folder-icon {
-  margin-right: 5px;
+.folder-expand {
+  background: unset;
+  border: unset;
   color: var(--secondary);
   cursor: pointer;
+  height: 1.5rem;
+  padding: 0.375rem;
   transition: transform 0.3s ease;
-  backface-visibility: visible;
-  flex-shrink: 0;
+  width: 1.5rem;
+
+  &:hover,
+  &:focus {
+    color: var(--tertiary);
+  }
 }
 
-li:has(> .folder-outer:not(.open)) > .folder-container > svg {
+li:has(> .folder-outer:not(.open)) .folder-icon {
   transform: rotate(-90deg);
 }
 
-.folder-icon:hover {
-  color: var(--tertiary);
-}
-
 .explorer {
   @media all and ($mobile) {
     &.collapsed {