santhoshj/astro-website
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

wcag and responsiveness
Some checks failed
ci / site (push) Has been cancelled
Details
publish-image / publish (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Santhosh Janardhanan
2026-02-10 03:22:22 -05:00
parent 3b0b97f139
commit c21614020a
9 changed files with 569 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
openspec/changes/archive/2026-02-10-wcag-responsive/tasks.md Normal file
View File

@@ -0,0 +1,27 @@
## 1. Navigation + Responsive Shell
- [x] 1.1 Identify the current header/nav implementation and decide the mobile breakpoint for collapsing navigation
- [x] 1.2 Implement hamburger toggle UI (button + icon) with correct ARIA (`aria-controls`, `aria-expanded`, accessible label)
- [x] 1.3 Implement the mobile menu panel styles + mild open/close animation (and close-on-route navigation)
- [x] 1.4 Add keyboard behavior: `Escape` closes menu and focus returns to toggle; ensure tab order remains sane
- [x] 1.5 Add reduced-motion fallback: disable/reduce menu animations when `prefers-reduced-motion: reduce`
- [x] 1.6 Ensure desktop navigation links remain clickable/accessible (no `inert`/`aria-hidden` desktop regression)
## 2. WCAG 2.2 AA Baseline
- [x] 2.1 Add/standardize global `:focus-visible` styles for links/buttons (high-contrast, consistent, not clipped)
- [x] 2.2 Ensure interactive elements meet minimum hit target expectations where feasible (spacing/padding for nav + key buttons)
- [x] 2.3 Add skip-to-content link and verify it is visible on focus and works across pages/layouts
- [x] 2.4 Audit and fix obvious contrast issues for primary text and focus outlines against the background
## 3. Background + Typography Polish
- [x] 3.1 Fix large-resolution background gradient cutoffs (move to a scaled, oversized background layer/pseudo-element)
- [x] 3.2 Introduce a display-friendly font (webfont) and apply consistently across the site; ensure sensible type scale/line-height
- [x] 3.3 Verify responsive behavior on key pages (`/`, `/videos`, `/podcast`, `/blog`, `/about`) at common breakpoints
## 4. Verification
- [x] 4.1 Add/update tests to ensure hamburger toggle ARIA attributes exist and update correctly
- [x] 4.2 Add/update tests or checks for focus-visible styling presence and reduced-motion rules
- [x] 4.3 Build the site and perform a keyboard-only smoke test (nav, cards, blog category nav, menu open/close)