In Constellation, certain components use a keyboard navigation pattern that makes use of both the Tab key and Arrow keys. These components are more complex than most standard HTML elements and require specific navigation techniques to allow users to interact with all the elements contained within.

Examples of such components include inline editable tables (introduced in Platform version 25), the Assignments tree in a case view, and card views. Following is an image of a table configured to be editable inline:

General keyboard navigation pattern

For screen reader users, it is recommended to interact with these complex components in Focus mode rather than Browse mode for the best experience following the intended navigation pattern. Instructions are provided on the components themselves to ensure users are aware of this recommendation.

Keyboard users start by focusing on the component with the Tab key, then use Arrow keys to navigate between rows or cells, following the ARIA grid role navigation pattern. This method is efficient for moving through potentially large structures like an Assignments tree, where each row acts as a cell.

To access interactive elements within a cell, users press Enter, switching to Tab-based navigation with standard focus order behavior. Pressing Escape returns focus back to the row for arrow key navigation, and users can exit the structure entirely using the Tab key in any mode.

To summarize the keyboard navigation pattern:

• Bring focus to the structure using the Tab key
• Navigate with arrow keys through cells/rows
• Press Enter to move focus within a cell/row and subsequently navigate with Tab key
• Press Escape to return to arrow key navigation

For more detailed explanations of keyboard navigation patterns per individual component, see our Accessible keyboard navigation patterns.