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

To begin, a keyboard user first brings focus to the component using the Tab key. Initially, the default navigation pattern uses directional Arrow keys, modeled after the ARIA grid role navigation pattern. Using the arrow keys allows the user to navigate between individual cells or rows in the structure, which may contain one or more interactive elements.

So for example in the Assignments tree, each assignment can be considered a "cell" or a "row". After bringing focus to the first row of the structure, subsequent arrow key presses allow users to move between the available rows below. This arrow key navigation pattern allows users to move efficiently between items within the structure, cell by cell and row by row, which can be especially helpful when the structure contains a large amount of content to traverse.

If a user wants to drill down and navigate to the interactive elements within a cell or row, they can use the Enter key. This switches the navigation method from arrow keys to Tab key navigation, enabling users to access and interact with individual elements within the structure as they would elsewhere on any standard web page. For added efficiency, once the user has pressed the Enter key, they can then continue to use Tab to navigate to any interactive element within any of the cells or rows, following standard HTML focus order behavior. This can be beneficial especially in the case of editable table cells, where a user may want to simply continue navigating by Tab if there is data to be modified in each cell. 

Users can press Escape to bring focus back to the cell or row and resume arrow key navigation. To exit the structure entirely, users can do so using the Tab key regardless of whichever navigation mode they are currently in.

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.

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

Upcoming enhancements

Future plans include introducing more detailed documentation that explains the intricacies of navigating such complex components. Additionally, upcoming Platform versions aim to implement contextual guidance tailored to users' navigation preferences and the specific components they are working with, ensuring all users are familiar with how to navigate these components correctly.