Topology nodes and edges are not keyboard accessible

[marshmalien]

Description

Topology visualizations built with react-topology are completely inaccessible to keyboard and screen reader users. The withSelection() HOC is mouse-only — there are no keyboard event handlers, no tabIndex attributes on nodes, and no aria-label on nodes or edges.

This means:

• Keyboard-only users cannot reach, focus, or select any node

• Screen reader users receive no information about the graph structure

• Arrow-key navigation between connected nodes is not possible

WCAG Impact

• 1.1.1 Non-text Content — Nodes/edges convey information with no text alternative

• 2.1.1 Keyboard — All functionality must be operable via keyboard

• Section 508 302.7 — Limited manipulation (mouse-only interactions)

Context

We maintain a large application (ansible/ansible-ui) with workflow topology views that use react-topology. We currently have no way to make these views accessible without building entirely custom keyboard navigation on top of the library.

Expected Behavior

• Nodes should be focusable via Tab key

• Enter/Space should activate node selection

• Arrow keys should navigate between connected nodes

• Nodes and edges should support aria-label for screen reader announcements

• withSelection() should respond to keyboard events, not just mouse clicks

Current Behavior

• No nodes are focusable

• No keyboard event handlers exist

• withSelection() only binds mouse click handlers

• Screen readers announce nothing about the graph

---

Jira Issue: PF-4548