Make tabs on new options page more accessible

[greiner]

Background

In the current version of the new options page (see #1524) interaction with tabs is only possible using the cursor. Therefore we should implement standardized techniques to support screen readers and enable keyboard interactions.

What to change

Set attributes

• Mark the navigation bar as such using the <nav> element
• Mark the tab list as such using the role="tablist" attribute
• Mark the tabs as such using the role="tab" attribute
• Mark the tab contents as such using the role="tabpanel" attribute
• Associate tabs with tab contents using the aria-controls and aria-labelledby attributes
• Make tabs focusable by replacing them with focusable elements and/or by setting the tabindex attribute

Handle keys

• Switch between tabs when pressing Left, Up, Right or Down while focus is on tab
• Make sure that only the active tab is in the tab order

Updating attributes

• Mark selected tab with the attribute aria-selected and update its value when switching to a different tab
• Mark tab content containers with the attribute aria-hidden and update its value when switching to a different tab

Note that these changes should not only be applied to tabs in the sidebar but also to the tabs under the "Blocking lists" section in the Advanced tab.

[greiner]

Updated ticket based on ​WAI-ARIA authoring practices.

[abpbot]

A commit referencing this issue has landed:
​Issue 2409 - Improved accessibility of tabs in options page