WCAG 2.2 accessibility compliance fixes

[Copilot]

The page had three WCAG violations: keyboard focus completely suppressed on collapsible buttons (outline:none), text contrast failures on afternoon/dusk gradients (as low as 2.0:1), and collapsible buttons missing aria-expanded state.

Focus appearance (SC 2.4.11 — new in WCAG 2.2)

• Removed outline: none from .collapsible
• Added .collapsible:focus-visible with a time-aware 3 px solid outline: black during day (≥13:1 vs. light container, 3.1:1 vs. #8A3B12 button), white at night (6.8:1 vs. button, high vs. dark container)

Contrast (SC 1.4.3)

The old code used color: white + accentColor: #f6821f from hour 13 onward. The afternoon sky gradient (#57c1eb, L≈0.47) gave 2.0:1 against white — well below the 4.5:1 minimum.

Three-part fix:

• Extended dark-text window from hour < 13 → hour < 18
• Changed night accent from #f6821f (fails on warm sunset stops) to white
• Added semi-transparent overlay to #container and footer to handle the dark navy stops that appear in late-afternoon gradients:

/* day:  rgba(255,255,255,0.25) lifts #1e528e (L≈0.086) → effective L≈0.194, black text 4.88:1 ✅ */
/* night: rgba(0,0,0,0.45) darkens #e9ce5d (L≈0.644) → effective L≈0.163, white text 4.93:1 ✅ */
background-color: ${containerBg};

The 24 time-responsive body gradients are fully preserved — the overlay only applies to the content card; the raw gradient remains visible in the 2em body padding.

Hour	Before	After
09:00 morning	black / 4.5:1+ ✅	black / 13:1+ ✅
13:00 afternoon	white / 2.0:1 ❌	black / ~12:1 ✅
22:00 night	white / 8:1+ ✅	white / 11:1+ ✅

Morning (09:00) — day mode, black text, 25% white overlay:

Afternoon (13:00) — previously failing; now black text on white-tinted card:

Night (22:00) — white text, 45% black overlay, focus ring visible:

ARIA state (SC 4.1.2)

• Added aria-expanded="false" + aria-controls to all collapsible <button> elements; added matching id to each content <div>
• JS now toggles aria-expanded on click so screen readers track open/closed state

Link hover

a:hover previously resolved to the same colour as body text (no visible change). Changed to text-decoration: underline dotted for a colour-independent hover cue.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

This PR updates the server-rendered HTML/CSS/JS in src/ssr.ts to address WCAG 2.2 accessibility issues (focus visibility, contrast, and ARIA state) in the Cloudflare Worker’s rendered page.

Changes:

• Adds a time-aware semi-transparent overlay for #container/footer, updates text/accent colors to maintain contrast across all gradients, and introduces a high-contrast :focus-visible outline for collapsible buttons.
• Adds aria-expanded/aria-controls to collapsible buttons and toggles aria-expanded in the click handler.
• Introduces a .gitignore to ignore node_modules/.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File	Description
src/ssr.ts	Time-aware contrast + focus styling, link hover cue, and ARIA-expanded state management for collapsibles.
.gitignore	Ignores node_modules/.

---

You can also share your feedback on Copilot code review. Take the survey.