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
88 lines
3.5 KiB
Markdown
88 lines
3.5 KiB
Markdown
# 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}.png`
|
||
- `desktop-1920-{tab}.png`
|
||
- `tablet-{tab}.png`
|
||
- `mobile-375-{tab}.png`
|
||
- `mobile-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
|
||
1. `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.
|
||
2. `rgb(161,161,170) on rgb(200,168,75)` — 1.12:1 (14px normal). Gray text on gold background — extremely low contrast.
|
||
3. `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.md` for 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.md` for 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)
|