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

@@ -1,12 +1,14 @@
 @use "../../styles/variables.scss" as *;
 
 @media all and ($mobile) {
-  .page > #quartz-body {
+  .page>#quartz-body {
+
     // Shift page position when toggling Explorer on mobile.
-    & > :not(.sidebar.left:has(.explorer)) {
+    &> :not(.sidebar.left:has(.explorer)) {
       transition: transform 300ms ease-in-out;
     }
-    &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
+
+    &.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);
     }
@@ -84,7 +88,7 @@
     pointer-events: all;
     transition: transform 0.35s ease;
 
-    & > polyline {
+    &>polyline {
       pointer-events: none;
     }
   }
@@ -108,7 +112,7 @@ button.desktop-explorer {
   }
 }
 
-.explorer-content {
+#explorer-content {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
@@ -120,7 +124,7 @@ button.desktop-explorer {
     padding: 0;
     overscroll-behavior: contain;
 
-    & li > a {
+    & li>a {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
@@ -142,7 +146,7 @@ button.desktop-explorer {
     grid-template-rows: 1fr;
   }
 
-  .folder-outer > ul {
+  .folder-outer>ul {
     overflow: hidden;
     margin-left: 6px;
     padding-left: 0.8rem;
@@ -156,7 +160,7 @@ button.desktop-explorer {
   align-items: center;
   user-select: none;
 
-  & div > a {
+  & div>a {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
@@ -165,11 +169,11 @@ button.desktop-explorer {
     display: inline-block;
   }
 
-  & div > a:hover {
+  & div>a:hover {
     color: var(--tertiary);
   }
 
-  & div > button {
+  & div>button {
     color: var(--dark);
     background-color: transparent;
     border: none;
@@ -202,7 +206,7 @@ button.desktop-explorer {
   flex-shrink: 0;
 }
 
-li:has(> .folder-outer:not(.open)) > .folder-container > svg {
+li:has(> .folder-outer:not(.open))>.folder-container>svg {
   transform: rotate(-90deg);
 }
 
@@ -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;