Emil_Shanaty/Randify.pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e6dec1eb95bb924ea2ef2b4637f7e19dcd561b8e
Randify.pro/.sisyphus/evidence/visual-qa/keyboard-nav-report.md
T
emil 1c38df7e74 style(dm): redesign dashboard with purple-gold theme 
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
2026-05-15 17:49:32 +03:00

190 lines
9.0 KiB
Markdown
Raw Blame History

# Keyboard Navigation Report
Tested on desktop viewport (1440x900) by pressing Tab repeatedly and capturing focus state.
## Focus 1: `A` " ← Назад к Randify " (/)
- Position: 826,18 | Size: 142x28px | Visible: true
- Outline: `1px none rgb(17, 17, 17)` (offset: 1px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(22, 18, 14) 0px 0px 0px 2px, rgb(83, 74, 183) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 2: `A` "VKВойти через VK" (/api/auth/login/vk)
- Position: 977,14 | Size: 158x36px | Visible: true
- Outline: `1px none rgb(46, 46, 46)` (offset: 1px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75194px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50387px, oklab(0 0 0 / 0.2) 0px 4px 6px -1px, oklab(0 0 0 / 0.2) 0px 2px 4px -2px`
- **Focus visible:** YES
## Focus 3: `A` "YВойти через Яндекс" (/api/auth/login/yandex)
- Position: 1142,14 | Size: 178x36px | Visible: true
- Outline: `1px none rgb(60, 60, 60)` (offset: 1px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.816) 0px 0px 0px 1.62858px, rgba(83, 74, 183, 0.816) 0px 0px 0px 3.25715px, oklab(0 0 0 / 0.2) 0px 4px 6px -1px, oklab(0 0 0 / 0.2) 0px 2px 4px -2px`
- **Focus visible:** YES
## Focus 4: `A` " 🎲 Кубики " (#dice)
- Position: 105,113 | Size: 260x40px | Visible: true
- Outline: `1px auto rgb(34, 34, 35)` (offset: 1px)
- Ring width: ``
- Box shadow: `none`
- **Focus visible:** YES
## Focus 5: `A` " ⚔️ Инициатива " (#initiative)
- Position: 105,157 | Size: 260x40px | Visible: true
- Outline: `1px auto rgb(34, 34, 35)` (offset: 1px)
- Ring width: ``
- Box shadow: `none`
- **Focus visible:** YES
## Focus 6: `A` " 📖 Справочник " (#reference)
- Position: 105,201 | Size: 260x40px | Visible: true
- Outline: `1px auto rgb(34, 34, 35)` (offset: 1px)
- Ring width: ``
- Box shadow: `none`
- **Focus visible:** YES
## Focus 7: `A` " 📝 Заметки " (#notes)
- Position: 105,245 | Size: 260x40px | Visible: true
- Outline: `1px auto rgb(34, 34, 35)` (offset: 1px)
- Ring width: ``
- Box shadow: `none`
- **Focus visible:** YES
## Focus 8: `A` " Монстры " (#reference)
- Position: 105,333 | Size: 260x36px | Visible: true
- Outline: `1px auto rgb(43, 43, 45)` (offset: 1px)
- Ring width: ``
- Box shadow: `none`
- **Focus visible:** YES
## Focus 9: `A` " Заклинания " (#reference)
- Position: 105,373 | Size: 260x36px | Visible: true
- Outline: `1px auto rgb(43, 43, 45)` (offset: 1px)
- Ring width: ``
- Box shadow: `none`
- **Focus visible:** YES
## Focus 10: `BUTTON` " d4 "
- Position: 402,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(25, 23, 19)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.953) 0px 0px 0px 1.9058px, rgba(83, 74, 183, 0.953) 0px 0px 0px 3.81159px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 11: `BUTTON` " d6 "
- Position: 486,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(50, 44, 27)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.816) 0px 0px 0px 1.62858px, rgba(83, 74, 183, 0.816) 0px 0px 0px 3.25715px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 12: `BUTTON` " d8 "
- Position: 570,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(39, 35, 23)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75194px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50387px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 13: `BUTTON` " d10 "
- Position: 654,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(39, 35, 23)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75194px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50387px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 14: `BUTTON` " d12 "
- Position: 739,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(50, 44, 27)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.816) 0px 0px 0px 1.62944px, rgba(83, 74, 183, 0.816) 0px 0px 0px 3.25887px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 15: `BUTTON` " d20 "
- Position: 823,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(39, 35, 23)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75194px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50387px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 16: `BUTTON` " d100 "
- Position: 907,198 | Size: 76x38px | Visible: true
- Outline: `1px none rgb(39, 35, 23)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75256px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50513px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 17: `INPUT` ""
- Position: 402,280 | Size: 459x42px | Visible: true
- Outline: `1px none rgb(44, 44, 44)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75194px, rgba(200, 168, 75, 0.875) 0px 0px 0px 3.50387px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 18: `BUTTON` "Бросить"
- Position: 868,278 | Size: 115x44px | Visible: true
- Outline: `1px none rgb(81, 81, 81)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.73) 0px 0px 0px 1.45914px, rgba(83, 74, 183, 0.73) 0px 0px 0px 2.91829px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- **Focus visible:** YES
## Focus 19: `BUTTON` "Очистить"
- Position: 883,342 | Size: 100x34px | Visible: true
- Outline: `1px none rgb(44, 44, 44)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75131px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50261px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 20: `BUTTON` "
d20
"
- Position: 790,630 | Size: 79x34px | Visible: true
- Outline: `1px none rgb(58, 58, 59)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.816) 0px 0px 0px 1.62858px, rgba(83, 74, 183, 0.816) 0px 0px 0px 3.25715px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 21: `BUTTON` "+ Добавить"
- Position: 881,612 | Size: 79x52px | Visible: true
- Outline: `1px none rgb(46, 46, 46)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.875) 0px 0px 0px 1.75194px, rgba(83, 74, 183, 0.875) 0px 0px 0px 3.50387px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- **Focus visible:** YES
## Focus 22: `BUTTON` "
Монстры
"
- Position: 1042,150 | Size: 129x32px | Visible: true
- Outline: `1px none rgb(17, 17, 16)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(22, 18, 14) 0px 0px 0px 2px, rgb(83, 74, 183) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 23: `BUTTON` "
Заклинания
"
- Position: 1171,150 | Size: 129x32px | Visible: true
- Outline: `1px none rgb(16, 16, 16)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(22, 18, 14) 0px 0px 0px 2px, rgb(83, 74, 183) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 24: `SELECT` " Все "
- Position: 1125,220 | Size: 154x41px | Visible: true
- Outline: `1px none rgb(58, 58, 59)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 18, 14, 0.816) 0px 0px 0px 1.62858px, rgba(200, 168, 75, 0.816) 0px 0px 0px 3.25715px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Focus 25: `TEXTAREA` ""
- Position: 1063,442 | Size: 216x256px | Visible: true
- Outline: `1px auto rgb(16, 16, 16)` (offset: 0px)
- Ring width: ``
- Box shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(200, 168, 75) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- **Focus visible:** YES
## Summary
- Total unique focusable elements reached: 25
- Elements with visible focus indicator: 25
- Elements without visible focus indicator: 0
- Focus screenshots saved: 25
Reference in New Issue View Git Blame Copy Permalink