wcag and responsiveness

2026-02-10 03:22:22 -05:00
parent 3b0b97f139
commit c21614020a
9 changed files with 569 additions and 8 deletions
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -40,6 +40,14 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" href="/favicon.ico" />

+    <!-- Display-friendly font (swap to avoid blocking render). -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap"
+      rel="stylesheet"
+    />
+
    <link rel="stylesheet" href="/styles/global.css" />

    {
@@ -49,6 +57,7 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
    }
  </head>
  <body>
+    <a class="skip-link" href="#main-content">Skip to content</a>
    <header class="site-header">
      <a
        class="brand"
@@ -60,7 +69,18 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
      >
        SanthoshJ
      </a>
-      <nav class="nav">
+      <button
+        class="nav-toggle"
+        type="button"
+        aria-controls="primary-nav"
+        aria-expanded="false"
+        aria-label="Open menu"
+        data-nav-toggle
+      >
+        <span class="nav-toggle-icon" aria-hidden="true"></span>
+      </button>
+
+      <nav class="nav" id="primary-nav" data-open="false">
        <a
          href="/videos"
          data-umami-event="click"
@@ -100,12 +120,79 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
      </nav>
    </header>

-    <main class="container">
+    <main class="container" id="main-content">
      <slot />
    </main>

    <footer class="site-footer">
-      <p class="muted">© {new Date().getFullYear()} SanthoshJ</p>
+      <p class="muted">&copy; {new Date().getFullYear()} SanthoshJ</p>
    </footer>
+
+    <script is:inline>
+      (() => {
+        const toggle = document.querySelector("[data-nav-toggle]");
+        if (!toggle) return;
+        const controlsId = toggle.getAttribute("aria-controls");
+        if (!controlsId) return;
+        const panel = document.getElementById(controlsId);
+        if (!panel) return;
+
+        const mql = window.matchMedia("(max-width: 760px)");
+
+        const setOpen = (open) => {
+          toggle.setAttribute("aria-expanded", open ? "true" : "false");
+          toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+
+          panel.dataset.open = open ? "true" : "false";
+
+          // Only hide/disable the nav panel in mobile mode. On desktop, nav is always visible/clickable.
+          if (mql.matches) {
+            panel.setAttribute("aria-hidden", open ? "false" : "true");
+            if (open) panel.removeAttribute("inert");
+            else panel.setAttribute("inert", "");
+          } else {
+            panel.removeAttribute("aria-hidden");
+            panel.removeAttribute("inert");
+          }
+
+          if (!open) toggle.focus({ preventScroll: true });
+        };
+
+        // Default state: closed on mobile, open on desktop.
+        setOpen(!mql.matches);
+
+        toggle.addEventListener("click", () => {
+          const isOpen = toggle.getAttribute("aria-expanded") === "true";
+          setOpen(!isOpen);
+          if (!isOpen) {
+            const firstLink = panel.querySelector("a");
+            if (firstLink) firstLink.focus({ preventScroll: true });
+          }
+        });
+
+        document.addEventListener("keydown", (e) => {
+          if (e.key !== "Escape") return;
+          if (toggle.getAttribute("aria-expanded") !== "true") return;
+          setOpen(false);
+        });
+
+        panel.addEventListener("click", (e) => {
+          const t = e.target;
+          if (t && t.closest && t.closest("a")) setOpen(false);
+        });
+
+        document.addEventListener("click", (e) => {
+          if (toggle.getAttribute("aria-expanded") !== "true") return;
+          const t = e.target;
+          if (!t || !t.closest) return;
+          if (t.closest("[data-nav-toggle]")) return;
+          if (t.closest("#" + CSS.escape(controlsId))) return;
+          setOpen(false);
+        });
+
+        // If viewport changes, keep desktop usable and default mobile to closed.
+        mql.addEventListener("change", () => setOpen(!mql.matches));
+      })();
+    </script>
  </body>
 </html>