Matthias Meister
d2ba994fad
- Restore CookieConsent banner behavior with the new dependency - Reposition the right-panel intro above the Projekt anfragen button - Add focused tests and update build metadata
3.4 KiB
id, title, status, assignee, created_date, updated_date, labels, dependencies, priority
| id | title | status | assignee | created_date | updated_date | labels | dependencies | priority | ||
|---|---|---|---|---|---|---|---|---|---|---|
| TASK-2 | Animate cookie banner transitions | In Progress | 2026-05-06 18:52 | 2026-05-06 19:10 |
|
medium |
Description
Animate the privacy notice transition between the vanilla-cookieconsent banner and the floating cookie button in both directions using the existing Motion dependency, while preserving consent state and accessibility behavior.
Acceptance Criteria
- #1 The banner shrinks animatedly into the round cookie button.
- #2 The round cookie button opens animatedly back into the banner.
- #3 prefers-reduced-motion receives a reduced fade-only variant.
- #4 The production build completes successfully.
Implementation Plan
- Inspect existing cookie animation and test setup.
- Add a focused failing test for the exported animation helpers/guards where practical.
- Implement Motion-based bidirectional banner/FAB transitions with reduced-motion fallback.
- Run focused verification and production build.
- Check acceptance criteria and report for manual testing.
Implementation Notes
Implemented Motion-based bidirectional transition in src/lib/cookie-banner-info.ts using a ghost element, transform/opacity animation, and a reduced-motion fade path.
Verified focused cookie animation test passes with node --test tests/cookie-banner-info.test.mjs.
Verified production build passes with pnpm build.
Full node --test tests/*.mjs currently has an unrelated existing failure in tests/landing-content.test.mjs because the current landing content no longer contains the expected phrase "Projektbrief".
Follow-up bugfix: native CookieConsent wrapper could remain briefly visible during the custom open animation, so the temporary ghost and the native modal appeared together. Fixed by suppressing both #cc-main .cm-wrapper and #cc-main .cm during transitions.
Follow-up bugfix: the accept button listener used a one-shot binding, so after reopening the same modal could close with CookieConsent's native fade instead of the custom banner-to-FAB transition. Fixed by binding accept buttons through a WeakSet without once:true and rebinding after show(true).
Verified follow-up with node --test tests/cookie-banner-info.test.mjs and pnpm build.
Follow-up bugfix after manual report: clicking Verstanden could still leave no visible FAB if the Motion close sequence failed or did not resolve. Removed risky borderRadius/padding from the close Motion group, forced the ghost into layout before native modal suppression, and added an idempotent finalizeBannerToFab fallback timer so the FAB is always restored.
Verified with node --test tests/cookie-banner-info.test.mjs and pnpm build.
Rolled back the custom cookie circle and Motion transition work to the stable native CookieConsent behavior requested by the user: banner appears initially and clicking Verstanden lets CookieConsent close it normally. Removed custom FAB, ghost, Motion import, and event interception from src/lib/cookie-banner-info.ts.
Updated the focused cookie test to assert the native CookieConsent close behavior and absence of the custom FAB/Motion code.
Verified rollback with node --test tests/cookie-banner-info.test.mjs and pnpm build.