emil
1c38df7e74
Redesign DM Dashboard (/dm/, /ru/dm/) with purple-gold theme (#534AB7 + #c8a84b): Design System: - Update dm-theme.css with 49 purple-gold tokens (transitions, shadows, hover states) - Create DmTabs.astro with ARIA, keyboard nav, URL hash sync, localStorage persistence - Create DmSidebar.astro for desktop navigation - Redesign DmHeader with gold accent - Update DmButton, DmCard, DmInput primitives - Expand i18n to 47 strings Layout: - Redesign DmLayout with 3-column dashboard grid (sidebar|main|context) - Update /dm/index.astro and /ru/dm/index.astro with named slots Feature Components: - DiceRoller: empty state, ARIA live, color-coded history, storage key fallback - InitiativeTracker: HP editing, active highlighting, storage key fallback - Open5eReference: skeletons, debounce, error retry, gold tabs - NotesPanel: cross-tab sync, copy-to-clipboard, auto-save - AuthPanel: VK/Yandex brand colors, pill buttons Tests: - Add 50 Playwright E2E tests (smoke, dice, initiative, reference, notes, data-migration) Fixes: - Document Open5e client.ts URL bugfix - Add backward-compatible storage key fallback for dice/initiative - Preserve legacy sessionStorage data on load
3.5 KiB
3.5 KiB
Visual QA Summary Report
Test Scope
DM Dashboard (/dm/) responsive layout, color contrast, keyboard navigation, and mobile UX.
Viewports Tested
| Viewport | Dimensions | Purpose |
|---|---|---|
| Desktop 1440 | 1440x900 | Standard laptop |
| Desktop 1920 | 1920x1080 | Full HD monitor |
| Tablet | 768x1024 | iPad portrait |
| Mobile 375 | 375x812 | iPhone X |
| Mobile 390 | 390x844 | iPhone 12/13/14 |
Tabs Captured
- dice (Кубики)
- initiative (Инициатива)
- reference (Справочник)
- notes (Заметки)
Total screenshots: 20 (5 viewports × 4 tabs)
Screenshots
All saved to .sisyphus/evidence/visual-qa/:
desktop-1440-{tab}.pngdesktop-1920-{tab}.pngtablet-{tab}.pngmobile-375-{tab}.pngmobile-390-{tab}.png
Layout Integrity
- Overflow check: PASS — No horizontal overflow detected across desktop, tablet, or mobile viewports.
- Content visibility: PASS — All tabs render completely within viewport bounds.
- Responsive grid: PASS — DmLayout handles column collapse correctly; sidebar hidden on mobile/tablet.
Color Contrast (WCAG 2.1 AA)
- 14 unique color combinations evaluated
- 11 PASS, 3 FAIL
Failures
rgb(255,255,255) on rgb(252,63,29)— 3.58:1 (14px normal). Likely an orange/red button or alert. Needs darker background or larger text.rgb(161,161,170) on rgb(200,168,75)— 1.12:1 (14px normal). Gray text on gold background — extremely low contrast.rgb(244,244,245) on rgb(200,168,75)— 2.09:1 (16px normal). Light text on gold background — fails 4.5:1 threshold.
See contrast-report.md for full details.
Touch Targets (Mobile)
- 9 elements below 44px minimum
- Primary culprits: quick-dice buttons (38px height), clear-history button (34px height), one input (42px height)
- See
touch-targets.mdfor full list.
Keyboard Navigation
- 25 unique focusable elements reached
- 25/25 have visible focus indicators
- Focus rings use
focus-visible:ring-2 ring-[var(--accent)](purple) with offset - Screenshots of focused elements saved as
focus-{n}-{tag}.png - See
keyboard-nav-report.mdfor full details.
Mobile UX
- Layout is readable and functional on 375–390px widths
- Sticky tabs work well but sit high on screen (thumb reach concern)
- Recommendations documented in
mobile-ux-notes.md:- Increase quick-dice button height to 44px
- Consider bottom navigation or swipe-between-tabs for mobile
- Evaluate bottom sheet for dice history / initiative details
Artifacts
| File | Description |
|---|---|
desktop-1440-{tab}.png |
Desktop screenshots (1440x900) |
desktop-1920-{tab}.png |
Desktop screenshots (1920x1080) |
tablet-{tab}.png |
Tablet screenshots (768x1024) |
mobile-375-{tab}.png |
Mobile screenshots (375x812) |
mobile-390-{tab}.png |
Mobile screenshots (390x844) |
focus-{n}-{tag}.png |
Keyboard focus screenshots |
contrast-report.md |
WCAG color contrast analysis |
overflow-report.md |
Horizontal overflow detection |
touch-targets.md |
Mobile touch target audit |
keyboard-nav-report.md |
Keyboard navigation audit |
mobile-ux-notes.md |
Mobile UX research notes |
Verdict
- Layout: PASS (no breaks)
- Keyboard: PASS (all focusable elements have visible indicators)
- Contrast: PARTIAL (3 failures to address)
- Touch targets: PARTIAL (9 undersized elements)
- Mobile UX: RESEARCH COMPLETE (recommendations documented, no changes implemented per scope)