wcag and responsiveness
This commit is contained in:
@@ -8,6 +8,7 @@
|
||||
--stroke: rgba(255, 255, 255, 0.16);
|
||||
--accent: #ffcd4a;
|
||||
--accent2: #5ee4ff;
|
||||
--focus: rgba(94, 228, 255, 0.95);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -22,12 +23,10 @@ body {
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
background:
|
||||
radial-gradient(1000px 600px at 10% 10%, rgba(94, 228, 255, 0.22), transparent 55%),
|
||||
radial-gradient(900px 600px at 90% 20%, rgba(255, 205, 74, 0.18), transparent 50%),
|
||||
radial-gradient(900px 700px at 30% 90%, rgba(140, 88, 255, 0.14), transparent 55%),
|
||||
linear-gradient(180deg, var(--bg0), var(--bg1));
|
||||
background: linear-gradient(180deg, var(--bg0), var(--bg1));
|
||||
/* Prefer a display-friendly font if available; fall back to system fonts. */
|
||||
font-family:
|
||||
"Manrope",
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
@@ -41,11 +40,53 @@ body {
|
||||
"Segoe UI Emoji";
|
||||
}
|
||||
|
||||
/* Oversized fixed background layer to avoid gradient cutoffs on large screens. */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: -40vmax;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(1200px 800px at 10% 10%, rgba(94, 228, 255, 0.22), transparent 60%),
|
||||
radial-gradient(1100px 800px at 90% 20%, rgba(255, 205, 74, 0.18), transparent 58%),
|
||||
radial-gradient(1200px 900px at 30% 90%, rgba(140, 88, 255, 0.14), transparent 62%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* WCAG-ish baseline: make keyboard focus obvious. */
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 3px solid var(--focus);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 12px;
|
||||
z-index: 999;
|
||||
padding: 10px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
background: rgba(10, 14, 28, 0.92);
|
||||
color: var(--fg);
|
||||
font-weight: 800;
|
||||
transform: translateY(-220%);
|
||||
transition: transform 140ms ease;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(1100px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
@@ -78,10 +119,122 @@ a {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 10px 12px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.nav-toggle-icon {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-toggle-icon::before,
|
||||
.nav-toggle-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: rgba(242, 244, 255, 0.92);
|
||||
}
|
||||
|
||||
.nav-toggle-icon::before {
|
||||
top: 0;
|
||||
box-shadow: 0 5px 0 rgba(242, 244, 255, 0.92);
|
||||
}
|
||||
|
||||
.nav-toggle-icon::after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.site-header {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 14px;
|
||||
width: min(86vw, 320px);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(10, 14, 28, 0.92);
|
||||
box-shadow:
|
||||
0 18px 60px rgba(0, 0, 0, 0.55),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
||||
transform-origin: top right;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease,
|
||||
visibility 0s linear 160ms;
|
||||
}
|
||||
|
||||
.nav[data-open="false"] {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px) scale(0.98);
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.nav[data-open="true"] {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease,
|
||||
visibility 0s;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 12px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.subnav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@@ -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">© {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>
|
||||
|
||||
37
site/tests/wcag-responsive-shell.test.ts
Normal file
37
site/tests/wcag-responsive-shell.test.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { readFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
async function read(rel: string) {
|
||||
return await readFile(path.join(process.cwd(), rel), "utf8");
|
||||
}
|
||||
|
||||
describe("wcag + responsive shell", () => {
|
||||
it("adds skip link and main content anchor", async () => {
|
||||
const src = await read("src/layouts/BaseLayout.astro");
|
||||
expect(src).toContain('class="skip-link"');
|
||||
expect(src).toContain('href="#main-content"');
|
||||
expect(src).toContain('id="main-content"');
|
||||
});
|
||||
|
||||
it("adds a hamburger toggle with ARIA and a script that updates aria-expanded", async () => {
|
||||
const src = await read("src/layouts/BaseLayout.astro");
|
||||
expect(src).toContain('class="nav-toggle"');
|
||||
expect(src).toContain('aria-controls="primary-nav"');
|
||||
expect(src).toContain('aria-expanded="false"');
|
||||
expect(src).toContain('id="primary-nav"');
|
||||
expect(src).toContain("toggle.setAttribute(\"aria-expanded\"");
|
||||
expect(src).toContain("e.key !== \"Escape\"");
|
||||
});
|
||||
|
||||
it("defines baseline focus-visible, reduced-motion, and oversized background layer", async () => {
|
||||
const css = await read("public/styles/global.css");
|
||||
expect(css).toContain("a:focus-visible");
|
||||
expect(css).toContain("@media (prefers-reduced-motion: reduce)");
|
||||
expect(css).toContain("body::before");
|
||||
expect(css).toContain("@media (max-width: 760px)");
|
||||
expect(css).toContain(".nav[data-open=\"true\"]");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user