[PM-2532][PM-2430][Desktop] Fix Region Selector Issues (#5824)

* pull in a11y changes from PR #5532

* add focus to popup when selected via keyboard

* make popup close upon outside click

* prevent close() from running twice on click

* pull in typo fix changes from PR #5530 (addressing PM-2433)

* add class to make backdrop transparent

* Change toggle button and dialog buttons for region selection (#5532)

* `<a>` elements without `href` don't take focus, currently making the region selection trigger not operable with keyboard - changing to `<button>`
* region buttons now convey their state (selected or not) with `aria-pressed`

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

* remove span

* cleanup browser styles

* cleanup desktop styles

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>

apps/browser/src/auth/popup/home.component.html

@@ -9,7 +9,7 @@
             <label for="email">{{ "emailAddress" | i18n }}</label>
             <input id="email" type="email" formControlName="email" appInputVerbatim="false" />
           </div>
-          <environment-selector class="environment-selector-padding"></environment-selector>
+          <environment-selector></environment-selector>
           <div class="remember-email-check">
             <input
               id="rememberEmail"

apps/browser/src/popup/scss/environment.scss

@@ -51,15 +51,11 @@ html.browser_safari {
   color: $text-muted;
   line-height: 25px;
   font-weight: 400;
-  padding-left: 5px;
+  padding-left: 15px;
 
-  label {
+  span {
     font-weight: 600;
-  }
-
-  a,
-  a label:hover {
-    cursor: pointer;
+    font-size: $font-size-small;
   }
 }
 
@@ -91,7 +87,3 @@ html.browser_safari {
     }
   }
 }
-
-.environment-selector-padding {
-  padding-left: 10px;
-}

apps/desktop/src/scss/environment.scss

@@ -18,15 +18,11 @@
   color: $text-muted;
   line-height: 25px;
   font-weight: 400;
-  padding-left: 5px;
+  padding-left: 15px;
 
-  label {
+  span {
     font-weight: 600;
-  }
-
-  a,
-  a label:hover {
-    cursor: pointer;
+    font-size: $font-size-small;
   }
 }