A11y: Change anchor tags used in StructuredNavigation component

[Dananji]

Description

StructuredNavigation component uses <a> tags to display time-span elements, these provide navigation within the structural metadata. These anchor tags have href attributes linking to media-fragments in the Canvas, which are identifier links that doesn't serve the purpose of real page navigation.

These links are used by Ramp for internal navigation and status updates in the JavaScript code without providing any DOM navigation.

For a user using a screen reader on the page, this is very misleading. From the accessibility tree they can understand there are anchor tags on the page, but these links don't provide any meaningful DOM navigation. When such a link is selected and clicked by the user it re-renders the player and seek it to the start time in the media-fragment, but doesn't provide a meaningful response that can be understood by a screen reader.

But for a user who can see, they can observe the visual effect of the player seeking to the start time of the media fragment linked in the time-span and the time-span link getting highlighted when they interact with such a link.

To understand this better, on a MacOS try using the VoiceOver program in the Ramp demo site.
When using the links listed by the program on the page (Cmd+F5 => Ctrl+Option+U), those interactions don't provide any meaningful feedback to a visually impaired user.

Done Looks Like

• change the use of anchor tags in the structured navigation links. Possible elements that can be used are button, span that are styled as links