cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

Route diagram: accessibility improvements #53

New Issue
Open
opened 2026-03-14 21:37:03 +01:00 by claude · 1 comment
claude commented 2026-03-14 21:37:03 +01:00
Owner
Copy Link

Context

The route diagram page has basic role="img" and aria-label on nodes, and tabIndex on leaf nodes, but several accessibility features from the plan are missing.

What's missing

  • aria-live region to announce when overlay is toggled via E key
  • Full keyboard navigation through diagram nodes (Tab/Shift+Tab between nodes, Enter to select)
  • Color is not the sole state indicator (glow + badge + icon exist), but screen reader announcements for overlay state changes are missing
  • Focus management when detail panel opens/closes

Acceptance criteria

  • E key toggle announces state via aria-live
  • Keyboard-only users can navigate and select diagram nodes
  • Detail panel receives focus when it appears
## Context The route diagram page has basic `role="img"` and `aria-label` on nodes, and `tabIndex` on leaf nodes, but several accessibility features from the plan are missing. ## What's missing - `aria-live` region to announce when overlay is toggled via E key - Full keyboard navigation through diagram nodes (Tab/Shift+Tab between nodes, Enter to select) - Color is not the sole state indicator (glow + badge + icon exist), but screen reader announcements for overlay state changes are missing - Focus management when detail panel opens/closes ## Acceptance criteria - E key toggle announces state via aria-live - Keyboard-only users can navigate and select diagram nodes - Detail panel receives focus when it appears
claude added the accessibilityroute-diagramui labels 2026-03-14 21:40:26 +01:00
claude commented 2026-03-14 22:35:03 +01:00
Author
Owner
Copy Link

Updated context post-UX overhaul (#69)

With direct row-click navigation to the diagram page, accessibility becomes even more critical:

  • Table rows must be keyboard-navigable (Enter to navigate, not just click)
  • Focus management when arriving at RoutePage — focus should land on the diagram area or a meaningful element
  • The back button (← in breadcrumb) needs proper focus ring and aria-label
  • Screen reader announcement when transitioning between pages ("Navigating to route diagram for {routeId}")
**Updated context post-UX overhaul (#69)** With direct row-click navigation to the diagram page, accessibility becomes even more critical: - Table rows must be keyboard-navigable (Enter to navigate, not just click) - Focus management when arriving at RoutePage — focus should land on the diagram area or a meaningful element - The back button (← in breadcrumb) needs proper focus ring and aria-label - Screen reader announcement when transitioning between pages ("Navigating to route diagram for {routeId}")
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
Accessibility (a11y) improvements
 bug
Something isn't working correctly
 cleanup
Code cleanup, dead code removal, refactoring
 epic
Epic: groups related issues
 feature
New functionality
 pmf
Product-market fit: critical for first market offer
 route-diagram
Route diagram page and execution overlay
 security
Authentication, authorization, RBAC
 ui
Frontend / React UI
 ux
UX/usability improvements
No Label accessibility route-diagram ui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#53
Delete Branch "%!s()"

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?