Topology nodes and edges are not keyboard accessible

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

Start by reading the withSelection() HOC and the react-topology node and edge rendering paths. Trace how mouse selection is currently bound, then determine where focus, keyboard navigation, and ARIA labels belong. Done means nodes are tabbable and selectable with Enter/Space, connected nodes support arrow-key navigation, and nodes and edges can announce labels to screen readers.