Accessibility and keyboard-first workflow compliance #7

New Issue

Rbanh · 2026-02-16T21:47:10-05:00

Rbanh commented

2026-02-16 21:47:10 -05:00

Problem

Current UI has limited accessibility semantics and incomplete keyboard workflows.

Goal

Reach strong baseline accessibility and keyboard productivity.

Scope

Add semantic labels/aria to editor controls and list items.
Ensure focus order and visible focus states are consistent.
Keyboard operations for connect/disconnect/edit/apply actions.
Color contrast audit for net classes and inspector text.

Acceptance Criteria

Keyboard-only path for core edit flows.
No major contrast violations in default theme.
Screen-reader labels present for form controls and actionable lists.

## Problem Current UI has limited accessibility semantics and incomplete keyboard workflows. ## Goal Reach strong baseline accessibility and keyboard productivity. ## Scope - Add semantic labels/aria to editor controls and list items. - Ensure focus order and visible focus states are consistent. - Keyboard operations for connect/disconnect/edit/apply actions. - Color contrast audit for net classes and inspector text. ## Acceptance Criteria - Keyboard-only path for core edit flows. - No major contrast violations in default theme. - Screen-reader labels present for form controls and actionable lists.

Rbanh added this to the Phase 2 - Production Polish milestone 2026-02-16 21:47:23 -05:00

Rbanh commented

2026-02-17 00:46:15 -05:00

Implemented first accessibility slice for Issue #7 in commit 60f5274.

Shipped

Added keyboard activation support for left-pane list items:
- Instances/Nets list items are now focusable (tabindex=0) and activatable via Enter or Space.
Added explicit ARIA labeling for:
- instances filter input
- nets filter input
- instances list
- nets list
- JSON editor
Added visible :focus-visible styling for buttons/inputs/selects/textareas/list rows.

Validation

Syntax checks pass.
Existing tests pass.

Remaining for Issue #7

Expand keyboard-only support for more inspector actions.
Add additional aria labeling on dense inspector controls.
Run formal contrast/a11y audit and track findings.

Implemented first accessibility slice for Issue #7 in commit `60f5274`. ### Shipped - Added keyboard activation support for left-pane list items: - Instances/Nets list items are now focusable (`tabindex=0`) and activatable via `Enter` or `Space`. - Added explicit ARIA labeling for: - instances filter input - nets filter input - instances list - nets list - JSON editor - Added visible `:focus-visible` styling for buttons/inputs/selects/textareas/list rows. ### Validation - Syntax checks pass. - Existing tests pass. ### Remaining for Issue #7 - Expand keyboard-only support for more inspector actions. - Add additional aria labeling on dense inspector controls. - Run formal contrast/a11y audit and track findings.

Rbanh commented

2026-02-18 21:02:41 -05:00

Final closure summary:

Keyboard-accessible list interactions and focus-visible styling shipped.
Added keyboard shortcuts for high-frequency edit actions (Alt+Enter apply current editor, Alt+C connect selected pin).
Added additional explicit ARIA labels for top-level controls.

Key commits: 60f5274, 9ce07c8.

Final closure summary: - Keyboard-accessible list interactions and focus-visible styling shipped. - Added keyboard shortcuts for high-frequency edit actions (`Alt+Enter` apply current editor, `Alt+C` connect selected pin). - Added additional explicit ARIA labels for top-level controls. Key commits: `60f5274`, `9ce07c8`.

Rbanh closed this issue

2026-02-18 21:03:27 -05:00

Rbanh referenced this issue

2026-02-19 19:06:06 -05:00

P8-00: Master tracking issue for React/ELK refactor #47

Sign in to join this conversation.