From 0513ad4d15f3b789a68cce0dd5340a153553e86e Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Thu, 3 Oct 2024 19:54:31 +0200
Subject: [PATCH] Addressed feedback

---
 quartz/components/Explorer.tsx               |  4 ++++
 quartz/components/scripts/explorer.inline.ts | 13 +++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index c32446559..d3de6fa6e 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -100,6 +100,8 @@ export default ((userOpts?: Partial<Options>) => {
             data-pagepathstate={opts.usePagePath}
             data-tree={jsonTree}
             data-mobile={true}
+            aria-controls="explorer-content"
+            aria-expanded={false}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -126,6 +128,8 @@ export default ((userOpts?: Partial<Options>) => {
             data-pagepathstate={opts.usePagePath}
             data-tree={jsonTree}
             data-mobile={false}
+            aria-controls="explorer-content"
+            aria-expanded={true}
           >
             <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
             <svg
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 016d8ddeb..3532e3168 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -54,6 +54,13 @@ function toggleFolder(evt: MouseEvent) {
 function toggleExplorer(this: HTMLElement) {
   // Toggle collapsed state of entire explorer
   this.classList.toggle("collapsed")
+
+  // Toggle collapsed aria state of entire explorer
+  this.setAttribute(
+    "aria-expanded",
+    this.getAttribute("aria-expanded") === "true" ? "false" : "true",
+  )
+
   const content = (
     this.nextElementSibling?.nextElementSibling
       ? this.nextElementSibling.nextElementSibling
@@ -120,7 +127,10 @@ function setupExplorer() {
     currentExplorerState = []
 
     for (const { path, collapsed } of newExplorerState) {
-      currentExplorerState.push({ path, collapsed: usePagePathState ? oldIndex.get(path) ?? collapsed : collapsed })
+      currentExplorerState.push({
+        path,
+        collapsed: usePagePathState ? (oldIndex.get(path) ?? collapsed) : collapsed,
+      })
     }
 
     currentExplorerState.map((folderState) => {
@@ -166,7 +176,6 @@ document.addEventListener("nav", () => {
     }
   }
   setupExplorer()
-  //add collapsed class to all folders
 
   observer.disconnect()