* Make <content> element explicitly non-focusable
Some browsers (Firefox, upcoming versions of Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=585413) make containers with `overflow: auto` / `overflow: scroll` (and the `-x` / `-y` variants) keyboard-focusable. This leads to a very awkward experience for assistive technology users navigating through the extension window, as for every view, the entire `<content>` container receives focus (and screen readers try to announce all its content in one go) before you reach the actual first control. To counteract this behaviour, this adds an explicit `tabindex="-1"` to these elements.
* Change `<content>` to `<main>`
More semantically accurate. See https://github.com/bitwarden/browser/pull/2245#issuecomment-1104553312
* Update scss to target `main` instead of `content`
* Change the previously existing `<main>` to generic `<div>`, tweak styles accordingly
Can't have two separate `<main>` elements, especially not nested ones. The original `<main>` was really just a handy wrapper for the component, but semantically should be neutral
* Change routerLink links to button elements
* Set aria-pressed attribute on button depending on routerLinkActive
* Change base styles to apply to tabs that use `<button>` instead of `<a>`
- make size/weight match regular text
- remove the theming, as it will inherit this anyway from its surroundings/container; having the color explicitly defined here creates issues as it's more specific otherwise and overrides the local context
Patrick H. Lauke
Oscar Hinton
Vincent Salucci
Robyn MacCallum
Daniel James Smith
Thomas Rittson
Hinton
Kyle Spearrin
Kyle Spearrin