Fix the tabs

[mbakeryo]

Consider all common navigation approaches for screen reader users and keyboard only users (headings, links, buttons, etc.) and how to ensure tabs are easily discoverable with clear titles.

Tabs are not headings, so they aren’t very discoverable -- for example Media. It’s an important part of the page but very hard to find for assistive tech users. Once they get to the tabs, they aren’t very easy to navigate.

Make the following changes to the tabs on the asset and monograph pages:

• Each tab panel should have an <h2> that replicates the Tab title. For display purposes it is okay to make this only available to screen readers. eg <h2 class="sr-only">Table of Contents</h2>
• Add aria-hidden=true/false to tab panel divs and toggle them true and false. false when selected. true when hidden.
• Add aria-selected=true/false to each li > a. When item is selected true, when deselected false.
• Give each tab but the selected tab a tabindex="-1", thus allowing Shift + Tab to return the user to the selected tab.
• Delegate tab selection to arrow keys. The user should be able to select and activate tabs using arrow keys, while the tab key is preserved for focusing contents within and below the active tab panel.
• Intercept the down arrow key press and move focus programmatically to the open panel itself, making sure it isn't missed. Without intervention, pressing the down arrow would take the user to the next tab in the tablist.
• Ensure the tab panel has a focus style to indicate a change of focus location.
• When a user chooses a new tab, the newly constructed view element's main heading is focused by giving it a <h2 tabindex="-1">...</h2>.

Resources:
[1] http://simplyaccessible.com/article/danger-aria-tabs/
[2] https://codepen.io/jeffsmith/pen/mPByya
[3] https://alastairc.ac/2016/05/aria-tabs-ui-problems-and-standards/
[4] https://inclusive-components.design/tabbed-interfaces/
[5] https://codepen.io/jwmcglone/pen/mLPzrO?editors=1010
[6] https://codepen.io/heydon/pen/veeaEa/