feat(a11y): Add animation toggle and rewire motion system to data attrs#38
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Luzkan
changed the title
Luzkan
force-pushed
the
feat/animation-toggle-n-fixes
branch
from
cefdab4 to
13e2deb
Compare
…ribute Before: Reduced motion was a one-way street. Users relied on their OS-level prefers-reduced-motion setting — all-or-nothing, site can't override, site can't even know they care. Fifteen components each rolled their own @media block, isolated and untestable. After: A sparkles toggle in the nav lets users quiet animations on this site alone, persisted to localStorage. The entire motion system now flows through a single html[data-motion] attribute, resolved at page load via blocking script: localStorage first, OS preference as fallback. One global CSS kill switch forces near-zero durations on everything (transitions, animations, view transitions) while each component retains its own reduced-motion overrides for graceful static states (opacity snaps, transforms reset, cursors hold still). The toggle practices what it preaches: celebratory bounce when sparkles come back to life, instant quiet when they go dark. Architecture mirrors the existing theme system: motion-contract.ts for shared constants, initAll for lifecycle across view transitions, astro:before-swap to stamp the new document before paint. Also while the plumbing was exposed: - Fix horizontal overflow caused by left/right: -100vw in CatalogHero and ArticleLayout; use translateX(-50%) centering - Add tooltip system for nav icon buttons via data-tooltip attribute with CSS arrow and hover delay, replacing native title attributes - Fix ThemeToggle spin animation clipping tooltip pseudo-elements; target inner icons instead of the button, drop overflow: hidden - Harden mobile nav against view-transition DOM replacement: lazy element lookups, re-bind listeners on astro:page-load, guard against duplicate event bindings with data attributes - Shore up E2E tests for mobile: extract helpers for consent flow, catalog filter scoping, and stable click-with-scroll patterns; skip clipboard tests on non-Chromium; add force-click fallbacks
Luzkan
force-pushed
the
feat/animation-toggle-n-fixes
branch
from
13e2deb to
4ba60f5
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat(a11y): Add animation toggle and rewire motion system to data attribute
Before: Reduced motion was a one-way street. Users relied on their
OS-level prefers-reduced-motion setting — all-or-nothing, site
can't override, site can't even know they care. Fifteen components
each rolled their own https://github.com/media block, isolated and untestable.
After: A sparkles toggle in the nav lets users quiet animations on
this site alone, persisted to localStorage. The entire motion system
now flows through a single html[data-motion] attribute, resolved
at page load via blocking script: localStorage first, OS preference
as fallback. One global CSS kill switch forces near-zero durations
on everything (transitions, animations, view transitions) while
each component retains its own reduced-motion overrides for graceful
static states (opacity snaps, transforms reset, cursors hold still).
The toggle practices what it preaches: celebratory bounce when
sparkles come back to life, instant quiet when they go dark.
Architecture mirrors the existing theme system: motion-contract.ts
for shared constants, initAll for lifecycle across view transitions,
astro:before-swap to stamp the new document before paint.
Also while the plumbing was exposed:
CatalogHero and ArticleLayout; use translateX(-50%) centering
with CSS arrow and hover delay, replacing native title attributes
target inner icons instead of the button, drop overflow: hidden
element lookups, re-bind listeners on astro:page-load, guard
against duplicate event bindings with data attributes
catalog filter scoping, and stable click-with-scroll patterns;
skip clipboard tests on non-Chromium; add force-click fallbacks