[A11y] Implment keyboard navigation within Annotation component

[Dananji]

Description

When MarkersDisplay component is used for annotations display, it can have a larger number of focus-able child elements as annotation rows. When using keyboard navigation the user cannot reach the annotation set drop-down menu or any annotation in the Annotations component.

To access annotation rows in the component, roving tab-index strategy can be used identical to the Transcript component.

Solution:

• Use Tab and Shift+Tab keys to navigate into and out of the component and between drop-down menu and annotations display container
• Use Up and Down arrow keys along with Enter/Space keys to reach and select annotations respectively

Done Looks Like

Use ARIA-role and tab-index attributes as needed to;

• implement roving tab-index strategy for navigating annotations within the annotations component
• add annotation-set drop-down menu to the tab order