cesnimda
36 lines
2.5 KiB
Markdown
36 lines
2.5 KiB
Markdown
# UX-003 Kanban theme-state verification
|
|
|
|
Updated: 2026-08-10
|
|
|
|
## Confirmed execution path
|
|
|
|
- The board previously used `theme.palette.grey[100]` and `[300]`. Under the CSS-variable theme these resolved to the static light palette, producing white destination columns in dark mode.
|
|
- The initial mocked dark-browser regression failed with the computed column background `rgb(245, 242, 250)`. Evidence: `docs/audits/evidence/ux-003-kanban-dark-before.png`.
|
|
- Native drag updated only after a successful owner-scoped status API call, but had no visible target state, keyboard pickup/drop model or failure feedback.
|
|
|
|
## Implemented behavior
|
|
|
|
- Columns, counters, status tones and pills now use live shared theme variables with fallback only for isolated unit-test themes.
|
|
- Empty, filled, valid, active and invalid columns have explicit state; invalid custom-status columns cannot accept a drop.
|
|
- Cards expose selected/picked-up state, visible hover/focus, a named status button, Space pickup/cancel, Escape cancel and Enter/Space drop on focused valid columns.
|
|
- A polite live region announces pickup, cancel, success, invalid target and failure. Failed API moves retain the card and show a visible error.
|
|
- The board owns horizontal mobile scrolling; the application main flex child can shrink. The live region uses literal one-pixel dimensions and no longer adds eight pixels of document overflow.
|
|
- The invalid kebab-case `-webkit-overflow-scrolling` style was corrected to React's `WebkitOverflowScrolling` property.
|
|
- Normal E2E runs no longer rewrite committed audit screenshots; evidence refresh requires `UPDATE_AUDIT_EVIDENCE=1`.
|
|
|
|
## Verification
|
|
|
|
- Focused component tests: 7/7 for grouped/empty/filled, pointer target, invalid target, keyboard move, load/error/retry, move failure and named menu behavior.
|
|
- Full frontend: 50 suites, 204/204 tests.
|
|
- Production frontend build and TypeScript: pass.
|
|
- Complete Playwright: 6/6. Kanban browser journey covers 1440 dark, 768 light, 375 mobile, visible hover, native pointer drag, keyboard move, invalid target and page-level containment with mocked data/API.
|
|
- After evidence: `docs/audits/evidence/ux-003-kanban-dark-after.png`.
|
|
- Commits: `fb6f17e`, `4e5ce0c`.
|
|
|
|
## Remaining gates
|
|
|
|
- Production board smoke is not authorized/available.
|
|
- Browser data and status updates were synthetic/mocked. Authorization remains covered by existing API tests, not this UI package.
|
|
- No native screen-reader/device laboratory was available; semantics and live announcements were inspected/tested in Chromium and component DOM.
|
|
|