books-in-hand/chorus
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add mobile-first kanban board view for Chorus triage #3

Merged
pyr0ball merged 9 commits from feat/chorus-triage-views into main 2026-07-15 20:14:53 -07:00
Conversation 0 Commits 9 Files changed 17 +763 -34
pyr0ball commented 2026-07-14 17:54:19 -07:00
Owner
Copy link

Summary

  • Extracts shared stage-list constants + humanized STAGE_LABELS into frontend/src/stages.js, consumed by ItemModal.vue and the new KanbanBoard.vue
  • Fixes WCAG contrast failures in theme.css (--color-border light/dark, two modality badge colors) and differentiates two previously-identical modality colors
  • Adds KanbanBoard.vue: four tabs (Donations/Other/Outbound Leads/Unsorted), mobile-first layout collapsing to one column at a time via a stage-selector strip + breadcrumb, full WAI-ARIA Tabs pattern with arrow-key navigation
  • Adds a persisted List/Board view toggle to App.vue
  • No backend/bot changes, pure frontend work

Design doc: circuitforge-plans/books-in-hand/superpowers/specs/2026-07-14-chorus-triage-views-design.md
Plan: circuitforge-plans/books-in-hand/superpowers/plans/2026-07-14-chorus-triage-views-plan.md

Test plan

  • 31/31 frontend tests passing (stages, theme, App, ItemModal, TriageList, KanbanBoard)
  • Task-level + final whole-branch review completed, one ARIA tabpanel fix and one keyboard-navigation fix applied during review
  • Manual verification in a real browser (desktop + mobile viewport) per plan Task 5

Known follow-ups (deferred, not blocking)

  • TriageList.vue still shows raw stage strings (e.g. pickup_scheduled) instead of humanized labels, plan explicitly excluded TriageList.vue from this work's scope
## Summary - Extracts shared stage-list constants + humanized STAGE_LABELS into frontend/src/stages.js, consumed by ItemModal.vue and the new KanbanBoard.vue - Fixes WCAG contrast failures in theme.css (--color-border light/dark, two modality badge colors) and differentiates two previously-identical modality colors - Adds KanbanBoard.vue: four tabs (Donations/Other/Outbound Leads/Unsorted), mobile-first layout collapsing to one column at a time via a stage-selector strip + breadcrumb, full WAI-ARIA Tabs pattern with arrow-key navigation - Adds a persisted List/Board view toggle to App.vue - No backend/bot changes, pure frontend work Design doc: circuitforge-plans/books-in-hand/superpowers/specs/2026-07-14-chorus-triage-views-design.md Plan: circuitforge-plans/books-in-hand/superpowers/plans/2026-07-14-chorus-triage-views-plan.md ## Test plan - [x] 31/31 frontend tests passing (stages, theme, App, ItemModal, TriageList, KanbanBoard) - [x] Task-level + final whole-branch review completed, one ARIA tabpanel fix and one keyboard-navigation fix applied during review - [ ] Manual verification in a real browser (desktop + mobile viewport) per plan Task 5 ## Known follow-ups (deferred, not blocking) - TriageList.vue still shows raw stage strings (e.g. pickup_scheduled) instead of humanized labels, plan explicitly excluded TriageList.vue from this work's scope
pyr0ball added 9 commits 2026-07-14 17:54:20 -07:00 
Inactive tabs' aria-controls pointed at an ID that only existed for the
active board, and the one existing tabpanel wrapped just the breadcrumb
text instead of the actual columns/cards. Render all four board panels
always in the DOM with v-show instead of v-if so every tab's
aria-controls resolves to a real, persistent panel wrapping its real
content, per the WAI-ARIA Tabs pattern.
KanbanBoard's board tabs implemented roving tabindex but never wired up
arrow-key navigation, making inactive tabs keyboard-unreachable. Adds
ArrowLeft/ArrowRight/Home/End handling that moves both selection and
focus between tabs, closing an unmet requirement from the original
design doc. Also adds aria-pressed to App's List/Board toggle buttons
so their active state is exposed to assistive technology, not just
conveyed visually via CSS class.
pyr0ball merged commit d23c412cf4 into main 2026-07-15 20:14:53 -07:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: books-in-hand/chorus#3
No description provided.
Delete branch "feat/chorus-triage-views"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?