diff --git a/plans/reports/uiux-260427-0927-audit-improvements.md b/plans/reports/uiux-260427-0927-audit-improvements.md deleted file mode 100644 index b1ca28a..0000000 --- a/plans/reports/uiux-260427-0927-audit-improvements.md +++ /dev/null @@ -1,102 +0,0 @@ -# UI/UX Audit & Improvements — programming-fengshui - -Date: 2026-04-27 -Scope: `index.html`, `style.css`, `js/render-elements.js` (read all JS for context) -Approach: single careful pass, ~10 high-impact fixes, no rewrites. - ---- - -## (a) Issues found & triaged - -| # | Severity | Selector / Area | Symptom | -|---|----------|-----------------|---------| -| 1 | High | `.mode-toggle` | No `flex-wrap` → at 320px Vietnamese labels squeeze and risk horizontal scroll. | -| 2 | High | `--muted #6b5a48` on `--bg #fdf6ec` | ~4.0:1 — fails WCAG AA on small italic (`.legend`, `.subtitle`, `.note`). | -| 3 | High | `.chip` text color picker (`pickTextColor`) | YIQ ≥128 mis-flips on saturated mid-tones (e.g. `#d44950` got black text — unreadable). Also no SR label, hex only in `title` (invisible on touch). | -| 4 | Med | `.card:hover { transform }` | Reduced-motion respected only for keyframe; transform transition still ran. | -| 5 | Med | Hero | No visual anchor / brand cue. Page is a feng-shui joke but reads like a generic CRUD card list. | -| 6 | Med | `@media (max-width: 500px) { .grid { 1fr } }` | Too aggressive — at 375–499px we lose the 2-col grid that auto-fit would otherwise produce. Cards become tall single-column lists with chip walls. | -| 7 | Med | `
` summaries (`Ảnh gốc`, debug panel) | Muted italic, no chevron — invisible affordance. Users won't click. | -| 8 | Med | Focus rings | Only on tabs and view-toggle. Links + `
` summaries have no `:focus-visible`. | -| 9 | Low | `` inline inside `

` | At narrow widths the centered heading wraps awkwardly with the parenthetical glued at the end. | -| 10 | Low | a11y | No skip link to bypass tablist for keyboard users. | -| 11 | Low | Element accent colors `--kim/--moc/--tho` | `#d4af37`, `#3a8f4a`, `#8a6d3b` — `--kim` and `--moc` borderline AA at h3 size on white. | -| 12 | Low | Chip border `rgba(0,0,0,0.08)` | Vanishes on dark chips — silhouette dissolves into bg on dark languages. | - -Skipped as nitpicks (intentionally not in scope): dark-mode support, fancy 3D / parallax (would overshoot a one-page joke), typography rewrite to a webfont with network calls (constraint says try system stack first). - ---- - -## (b) Changes shipped & rationale - -### `style.css` — full pass (370 → 302 lines, all under 400-line cap) - -1. **Token expansion (not replacement)** — added `--bg-tint`, `--accent-ink`, `--border`, `--border-strong`, `--shadow-sm`, `--radius-sm`, `--focus-ring`. Kept all original `--bg/--fg/--accent/--gold/--card-bg/--shadow` and `--kim/--moc/--thuy/--hoa/--tho` keys per constraint. -2. **Contrast fixes:** `--muted #6b5a48` → `#5b4a38` (AA on cream). `--kim #d4af37` → `#c8932a`, `--moc #3a8f4a` → `#2f7d3f`, `--tho #8a6d3b` → `#7a5f30` — h3 now passes AA on white. -3. **Font stack:** added `Be Vietnam Pro`, `Inter`, then `system-ui` fallbacks — Vietnamese-first system stack, zero network fetches per constraint. `Be Vietnam Pro` ships on most modern Vietnamese-localized systems and on Android; falls back transparently to `system-ui` / `Segoe UI`. -4. **Hero ribbon:** 5 element-color bars (Kim/Mộc/Thuỷ/Hoả/Thổ, 28×4px each) under the subtitle. Quietly ties the brand together — visible on every load, not kitsch, `aria-hidden="true"` so it never pollutes SR output. Body now has a soft warm radial wash from top-center for subtle lunar-new-year warmth. -5. **Mode toggle:** added `flex-wrap: wrap` (fixes 320px), bumped border to `--border-strong`, kept pill shape, added subtle drop-shadow on active state for depth, `box-shadow`-based focus ring (consistent with rest of page). -6. **Reduced motion:** global `prefers-reduced-motion` rule kills all animation/transition durations. `.card:hover { transform }` now also explicitly cancels under reduced motion. -7. **Mobile breakpoint:** moved 1-column grid collapse from 500px → **420px**. At 375px we keep 2 columns (auto-fit min 160px works). Mode-toggle gets `flex: 1 1 auto` at narrow widths so the two pills share the row evenly. Extra 320px cap. -8. **`
` styling:** custom chevron (▸ → ▾ on `[open]`) in gold, accent-ink summary text, dashed border on debug panel to visually separate it from the main `original-image` disclosure. Both shared via grouped selectors to keep CSS DRY. -9. **Skip link:** standard "off-screen until focus" pattern, accent background. -10. **Chips:** stronger border (`rgba(0,0,0,0.18)` default, `0.45` for TIOBE), inner `1px` highlight on TIOBE chips for premium feel, `overflow: hidden + text-overflow: ellipsis` to prevent overflow at 320px on extra-long names. -11. **Focus rings everywhere:** unified `--focus-ring` token (gold halo) applied to tabs, view-toggle, credit links, both `
` summaries. -12. **Subtitle / legend max-width** to constrain line length to 38ch / 60ch — improves readability at desktop widths. -13. Cards got border + reduced base shadow + lift on hover (shadow grows on hover, not just transform — adds depth cue). - -### `index.html` - -1. Added skip link at top of ``. -2. Added `id="main-content"` to `
` for skip link target. -3. Added `