Keyboard Navigation
The Chart comes with keyboard navigation enabled out of the box. The main interactive parts of the Chart are reachable through the keyboard - the Chart area and Legend area.
Basic Concepts
Once the element receives focus, there will be two main focusable areas the user can be in - the main chart area and the legend (if one is present). Moving focus between the chart area and legend area is done with the Tab and Shift & Tab keys. Once focus in in one of the two areas, the user can navigate through the items using the arrow keys.
The only focusable element of the Chart is the main wrapper element itself. Focusing individual points or legend items is implemented through the
aria-activedescendantattribute. This works in the same way for bothSVGandCanvasrender modes.
Available Shortcuts
When the legend area is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow | Moves focus to the next legend item. If we're already at the last item, focus cycles to the first item. |
Left Arrow | Moves focus to the previous legend item. If we're already at the first item, focus cycles to the last item. |
Down Arrow | Moves focus to the next legend item. If we're already at the last item, focus cycles to the first item. |
Up Arrow | Moves focus to the previous legend item. If we're already at the first item, focus cycles to the last item. |
Tab | Moves the focus to the next focusable element on the page. If the legend position is top or left, moves focus to the chart area. |
Shift & Tab | Moves the focus to the chart area. If the legend position is top or left, moves focus to the previous focusable element on the page. |
When the chart area is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow | Moves focus to the next point in the series. If focus is on the last point of the series, moves focus to the first point of the next series. |
Left Arrow | Moves focus to the previous point in the series. If focus is on the first point of the series, moves focus to the last point of the previous series. |
Down Arrow | Moves focus to the next series. |
Up Arrow | Moves focus to the previous series. |
Tab | Moves the focus to the legend area. If the legend is not visible, or if legend position is top or left, moves focus to the next focusable element on the page. |
Shift & Tab | Moves the focus to the previous focusable element on the page. If legend position is top or left, moves focus to the legend area. |
Customizing the Focus Highlight
The focus highlight is a visual indicator that outlines the currently active element during navigation. By default, the Chart element is outlined in blue, while focused series points, legend items, Sankey links, and Sankey nodes are highlighted with a black outline.
You can customize the focus highlight by using the focusHighlight property. This property is applicable to the following Chart components:
The following example demonstrates how to modify the focus highlight border in the Angular Chart.