fix a11y for explorer

quartz/components/Explorer.tsx

@@ -61,7 +61,7 @@ export default ((userOpts?: Partial<Options>) => {
 
   const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
     return (
-      <div
+      <nav
         class={classNames(displayClass, "explorer")}
         data-behavior={opts.folderClickBehavior}
         data-collapsed={opts.folderDefaultState}
@@ -78,6 +78,7 @@ export default ((userOpts?: Partial<Options>) => {
           class="explorer-toggle mobile-explorer hide-until-loaded"
           data-mobile={true}
           aria-controls="explorer-content"
+          aria-label="Explorer"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +117,7 @@ export default ((userOpts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div class="explorer-content" aria-expanded={false}>
+        <div id="explorer-content">
           <OverflowList class="explorer-ul" />
         </div>
         <template id="template-file">
@@ -152,7 +153,7 @@ export default ((userOpts?: Partial<Options>) => {
             </div>
           </li>
         </template>
-      </div>
+      </nav>
     )
   }
 

quartz/components/scripts/explorer.inline.ts

@@ -151,7 +151,7 @@ function createFolderNode(
 }
 
 async function setupExplorer(currentSlug: FullSlug) {
-  const allExplorers = document.querySelectorAll("div.explorer") as NodeListOf<HTMLElement>
+  const allExplorers = document.querySelectorAll("nav.explorer") as NodeListOf<HTMLElement>
 
   for (const explorer of allExplorers) {
     const dataFns = JSON.parse(explorer.dataset.dataFns || "{}")

quartz/components/styles/explorer.scss

@@ -2,10 +2,12 @@
 
 @media all and ($mobile) {
   .page>#quartz-body {
+
     // Shift page position when toggling Explorer on mobile.
     &> :not(.sidebar.left:has(.explorer)) {
       transition: transform 300ms ease-in-out;
     }
+
     &.lock-scroll> :not(.sidebar.left:has(.explorer)) {
       transform: translateX(100dvw);
       transition: transform 300ms ease-in-out;
@@ -20,7 +22,7 @@
       margin: 0;
     }
 
-    .hide-until-loaded ~ .explorer-content {
+    .hide-until-loaded~#explorer-content {
       display: none;
     }
   }
@@ -33,8 +35,10 @@
 
   min-height: 1.2rem;
   flex: 0 1 auto;
+
   &.collapsed {
     flex: 0 1 1.2rem;
+
     & .fold {
       transform: rotateZ(-90deg);
     }
@@ -108,7 +112,7 @@ button.desktop-explorer {
   }
 }
 
-.explorer-content {
+#explorer-content {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
@@ -215,7 +219,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
     &.collapsed {
       flex: 0 0 34px;
 
-      & > .explorer-content {
+      &>#explorer-content {
         transform: translateX(-100vw);
         visibility: hidden;
       }
@@ -224,13 +228,13 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
     &:not(.collapsed) {
       flex: 0 0 34px;
 
-      & > .explorer-content {
+      &>#explorer-content {
         transform: translateX(0);
         visibility: visible;
       }
     }
 
-    .explorer-content {
+    #explorer-content {
       box-sizing: border-box;
       z-index: 100;
       position: absolute;