Fixes

Author: rojvv

_config.ts

@@ -189,6 +189,15 @@ site.preprocess([".html"], (pages) => {
 
   for (const page of pages) {
     delete page.data.walkthroughProgress;
+    if (page.data.walkthrough !== undefined && !getWalkthroughData(page)) {
+      console.error(
+        "The page",
+        page.src.path,
+        "has invalid walkthrough metadata.",
+      );
+      error = true;
+      ++errorCount;
+    }
   }
 
   const trackLabels: Record<WalkthroughTrack, string> = {
@@ -532,11 +541,11 @@ site.helper("walkthrough", (track: string) => {
 
   return `<div class="walkthrough-group" data-walkthrough-collapsed>
   <ol class="walkthrough-list" aria-label="${label}">\n${visibleItems.join("\n")}\n  </ol>
-  <button class="walkthrough-more" type="button" aria-expanded="false">
+  <button class="walkthrough-more" type="button" aria-expanded="false" aria-controls="walkthrough-${track}-remainder">
     <span class="walkthrough-more-collapsed">Show More</span>
     <span class="walkthrough-more-expanded">Show Less</span>
   </button>
-  <div class="walkthrough-remainder">
+  <div class="walkthrough-remainder" id="walkthrough-${track}-remainder">
     <div class="walkthrough-remainder-inner">
       <ol class="walkthrough-list walkthrough-list-continuation" start="11" aria-label="${label}, continued">\n${remainingItems.join("\n")}\n      </ol>
     </div>

src/_includes/style/walkthrough.scss

@@ -70,9 +70,8 @@ ol.walkthrough-list {
 
 .walkthrough-remainder {
   display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
-  transform: translateY(-0.5rem);
+  grid-template-rows: 1fr;
+  opacity: 1;
   transition:
     grid-template-rows 560ms cubic-bezier(0.16, 1, 0.3, 1),
     opacity 240ms ease,
@@ -86,17 +85,61 @@ ol.walkthrough-list {
 
     > .walkthrough-list {
       margin-top: 0;
-      margin-bottom: 0;
+      margin-bottom: 1rem;
     }
   }
 }
 
 .walkthrough-list-continuation > li {
-  opacity: 0;
-  transform: translateY(-0.3rem);
+  opacity: 1;
   transition: opacity 220ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.walkthrough-group.is-enhanced {
+  > .walkthrough-more {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    margin: 0.2rem 0 0.2rem 1.15rem;
+    padding: 0.2rem 0.45rem;
+    border: 0;
+    border-radius: 0;
+    background: var(--dbt);
+    color: var(--kr);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.75rem;
+    touch-action: manipulation;
+  }
+
+  &:not(.is-expanded) {
+    > .walkthrough-remainder {
+      grid-template-rows: 0fr;
+      opacity: 0;
+      transform: translateY(-0.5rem);
+
+      > .walkthrough-remainder-inner > .walkthrough-list {
+        margin-bottom: 0;
+      }
+    }
+
+    .walkthrough-list-continuation > li {
+      opacity: 0;
+      transform: translateY(-0.3rem);
+    }
+  }
+
+  &.is-expanded > .walkthrough-more {
+    > .walkthrough-more-collapsed {
+      display: none;
+    }
+
+    > .walkthrough-more-expanded {
+      display: inline;
+    }
+  }
+}
+
 .index-subsections > ul {
   display: grid;
   gap: 0.15rem;
@@ -211,72 +254,25 @@ ol.walkthrough-list {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .walkthrough-group:hover,
-  .walkthrough-group:focus-within {
-    > .walkthrough-remainder {
-      grid-template-rows: 1fr;
-      opacity: 1;
-      transform: none;
-
-      > .walkthrough-remainder-inner > .walkthrough-list {
-        margin-bottom: 1rem;
-      }
-    }
-
-    .walkthrough-list-continuation > li {
-      opacity: 1;
-      transform: none;
-    }
+  .walkthrough-group.is-enhanced > .walkthrough-more:not(:focus-visible) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    min-height: 0;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
   }
 
   .index-subsection-toggle {
     display: none;
   }
 }
 
-@media (hover: none), (pointer: coarse) {
-  .walkthrough-more {
-    display: inline-flex;
-    align-items: center;
-    min-height: 2rem;
-    margin: 0.2rem 0 0.2rem 1.15rem;
-    padding: 0.2rem 0.45rem;
-    border: 0;
-    border-radius: 0;
-    background: var(--dbt);
-    color: var(--kr);
-    cursor: pointer;
-    font: inherit;
-    font-size: 0.75rem;
-    touch-action: manipulation;
-  }
-
-  .walkthrough-group.is-expanded > .walkthrough-more {
-    > .walkthrough-more-collapsed {
-      display: none;
-    }
-
-    > .walkthrough-more-expanded {
-      display: inline;
-    }
-  }
-
-  .walkthrough-group.is-expanded > .walkthrough-remainder {
-    grid-template-rows: 1fr;
-    opacity: 1;
-    transform: none;
-
-    > .walkthrough-remainder-inner > .walkthrough-list {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .walkthrough-group.is-expanded .walkthrough-list-continuation > li {
-    opacity: 1;
-    transform: none;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .walkthrough-remainder,
   .walkthrough-list-continuation > li {

src/static/script.js

@@ -332,14 +332,47 @@ function initIndexSubsections() {
 }
 
 function initWalkthroughGroups() {
+  const desktopQuery = matchMedia("(hover: hover) and (pointer: fine)");
+
   for (const group of document.querySelectorAll("[data-walkthrough-collapsed]")) {
     const button = group.querySelector(":scope > .walkthrough-more");
-    if (!(button instanceof HTMLButtonElement)) continue;
+    const remainder = group.querySelector(":scope > .walkthrough-remainder");
+    if (!(button instanceof HTMLButtonElement) || !(remainder instanceof HTMLElement)) continue;
 
-    button.addEventListener("click", () => {
-      const expanded = group.classList.toggle("is-expanded");
+    let hovered = false;
+    let manuallyExpanded = false;
+
+    const setExpanded = (expanded) => {
+      group.classList.toggle("is-expanded", expanded);
       button.setAttribute("aria-expanded", String(expanded));
+      remainder.setAttribute("aria-hidden", String(!expanded));
+      remainder.toggleAttribute("inert", !expanded);
+    };
+
+    const syncExpanded = () => {
+      const activeElement = document.activeElement;
+      const contentHasFocus = activeElement !== button && group.contains(activeElement);
+      setExpanded(manuallyExpanded || (desktopQuery.matches && (hovered || contentHasFocus)));
+    };
+
+    button.addEventListener("click", () => {
+      manuallyExpanded = !group.classList.contains("is-expanded");
+      syncExpanded();
+    });
+    group.addEventListener("mouseenter", () => {
+      hovered = true;
+      syncExpanded();
     });
+    group.addEventListener("mouseleave", () => {
+      hovered = false;
+      syncExpanded();
+    });
+    group.addEventListener("focusin", syncExpanded);
+    group.addEventListener("focusout", () => queueMicrotask(syncExpanded));
+    desktopQuery.addEventListener("change", syncExpanded);
+
+    group.classList.add("is-enhanced");
+    syncExpanded();
   }
 }