Keyboard Navigation
The Sankey comes with keyboard navigation enabled out of the box. The main interactive parts of the Sankey diagram are reachable through the keyboard - the nodes and links.
Basic Concepts
Once the Sankey element receives focus via the keyboard, the focus highlight will be displayed on the first node. Navigation through nodes and links is controlled using the arrow keys. Pressing Tab moves the focus out of the Sankey to the next focusable element on the page. Clicking on a node or link moves the focus to the clicked element without drawing a focus highlight.
The only focusable element of the Sankey diagram is the main wrapper element itself. Focusing individual items is implemented through the
aria-activedescendantattribute.
Disabling Keyboard Navigation
To disable the built-in keyboard navigation shortcuts, set the navigable input to false.
Available Shortcuts
When the Sankey diagram is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Tab | Moves the focus to the next focusable element on the page. |
Shift & Tab | Moves the focus to the previous focusable element on the page. |
Up Arrow | If the focus is on a node, moves to the node above (if it exists). If the focus is on a link, moves to the link above (if it exists) within the same source or target links collection as the focused link. |
Down Arrow | If the focus is on a node, moves to the node below (if it exists). If the focus is on a link, moves to the link below (if it exists) within the same source or target links collection as the focused link. |
Left Arrow | If the focus is on a node, moves to its first link on the left side (if it exists). If the focus is on a link, moves to the node on the left side of the focused link. |
Right Arrow | If the focus is on a node, moves to its first link on the right side (if it exists). If the focus is on a link, moves to the node on the right side of the focused link. |
Escape | Moves the focus to the topmost first node of the Sankey. |