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

9.0 KiB
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