A11y: keyboard navigation within StrucutredNavigation component

[Dananji]

Description

StructuredNavigation component can have a larger number of focus-able child elements. When using keyboard navigation, the user must use Tab/Shift+Tab keys to navigate through these elements to get to the next UI element on the page.

For an example: in the Ramp demo page, to view Files tab keyboard user must tab through the player and then all the time-span elements in the StructuredNavigation component.
This degrades the user experience when using the keyboard to navigate to some parts of the page.

To avoid this we can use a suitable design pattern incorporating ARIA-roles and tabindexes in these child elements within the StructuredNavigation component.

Possible solution:
Use Tab and Shift+Tab keys to navigate into and out of the component, while using arrow keys to navigate within the StructuredNavigation component.

Done Looks Like

• Research and select a suitable design pattern from https://www.w3.org/WAI/ARIA/apg/patterns/ that can be either used directly or adapt to solve the issue (some possible patterns: accordion, tree view)
• Use the selected design pattern to integrate ARIA-roles and tab-indexes to help navigate within the component