fix(uiux): prefers-reduced-motion, focus trap, console.log cleanup - #217
Merged
Conversation
Three accessibility & code quality fixes from UI/UX audit (Hallmark + better-interface skills): 1. prefers-reduced-motion (a11y critical) - Global @media guard in app.css: disables all CSS animations & transitions when user prefers reduced motion - GraphView: skip physics simulation + pulse animation when prefers-reduced-motion is active (JS-driven motion) 2. Focus trap in DetailPanel (WCAG 2.1 SC 2.4.3) - dialog[aria-modal=true] now properly traps Tab/Shift+Tab - Auto-focuses first focusable element on mount - Restores focus to trigger element on close 3. Remove debug console.log in MemoryDetail (code hygiene) - handleDocClick was a dead no-op logging call
🔍 Cora AI Code Review✅ No issues found. Code looks good! Review powered by cora-code · BYOK · MIT |
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.
Ringkasan
Tiga fix accessibility & code quality dari Corin UI/UX Audit (menggunakan skill
hallmark+better-interface):Changes
1.
prefers-reduced-motionsupport — a11y criticalProblem: Zero
prefers-reduced-motionglobally. User dengan vestibular disorder atau motion sensitivity tidak ada way untuk mengurangi animasi.Fix:
src/app.css— Global@media (prefers-reduced-motion: reduce)guard: disable semua CSS animations & transitions (animation-duration: 0.01ms,transition-duration: 0.01ms,scroll-behavior: auto)src/lib/components/GraphView.svelte— JS-driven motion guard: skip physics simulation loop + pulse animation saatmatchMedia('(prefers-reduced-motion: reduce)')aktif. Nodes render di posisi awal tanpa continuous RAF redraw.WCAG: 2.3.3 Animation from Interactions (Level AAA)
2. Focus trap di DetailPanel — WCAG 2.4.3
Problem:
role="dialog" aria-modal="true"tanpa focus trap. Tab bisa keluar panel ke background UI — violates ARIA dialog pattern.Fix:
src/lib/components/DetailPanel.svelte— Full focus management:tabindex="-1"on panel untuk fallback focusWCAG: 2.4.3 Focus Order (Level A)
3. Remove
console.logdi MemoryDetail — code hygieneProblem: Dead debug
console.logdihandleDocClick— polluted production console.Fix: Replaced dengan intentional no-op + comment. Parameter renamed ke
_sluguntuk clarity.Audit findings reference
prefers-reduced-motionsupportconsole.login production coderole="button"divstabindex="0"+onkeydownTest plan
[MemoryDetail]debug outputcargo test+bun run test→ all pass🤓