[PS-497] Change <content> to <main>, make it explicitly non-focusable (#2245)

* 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

src/popup/settings/premium.component.html

@@ -10,7 +10,7 @@
   </h1>
   <div class="right"></div>
 </header>
-<content>
+<main tabindex="-1">
   <div class="content">
     <ng-container *ngIf="!isPremium">
       <p class="text-center lead">{{ "premiumNotCurrentMember" | i18n }}</p>
@@ -70,4 +70,4 @@
       </button>
     </ng-container>
   </div>
-</content>
+</main>