[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;
-  }
+    font-size: $font-size-small;
-
-  a,
-  a label:hover {
-    cursor: pointer;
   }
 }
 
@@ -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;
-  }
+    font-size: $font-size-small;
-
-  a,
-  a label:hover {
-    cursor: pointer;
   }
 }
 

libs/angular/src/auth/components/environment-selector.component.html

@@ -1,40 +1,51 @@
-<label class="environment-selector-btn">
+<div class="environment-selector-btn">
   {{ "loggingInOn" | i18n }}:
-  <a
+  <button
+    type="button"
     (click)="toggle(null)"
     cdkOverlayOrigin
     #trigger="cdkOverlayOrigin"
-    aria-haspopup="menu"
+    aria-haspopup="dialog"
     aria-controls="cdk-overlay-container"
     [ngSwitch]="selectedEnvironment"
   >
-    <label *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{
+    <span *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{
       "usDomain" | i18n
-    }}</label>
+    }}</span>
-    <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
+    <span *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
       "euDomain" | i18n
-    }}</label>
+    }}</span>
-    <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
+    <span *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
       "selfHostedServer" | i18n
-    }}</label>
+    }}</span>
     <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
-  </a>
+  </button>
-</label>
+</div>
 
 <ng-template
   cdkConnectedOverlay
   [cdkConnectedOverlayOrigin]="trigger"
-  (backdropClick)="close()"
-  (detach)="close()"
   [cdkConnectedOverlayOpen]="isOpen"
   [cdkConnectedOverlayPositions]="overlayPosition"
+  [cdkConnectedOverlayHasBackdrop]="true"
+  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
+  (backdropClick)="isOpen = false"
+  (detach)="close()"
 >
   <div class="box-content">
-    <div class="environment-selector-dialog" [@transformPanel]="'open'" role="dialog">
+    <div
+      class="environment-selector-dialog"
+      [@transformPanel]="'open'"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      role="dialog"
+      aria-modal="true"
+    >
       <button
         type="button"
         class="environment-selector-dialog-item"
         (click)="toggle(ServerEnvironmentType.US)"
+        [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.US ? 'true' : 'false'"
       >
         <i
           class="bwi bwi-fw bwi-sm bwi-check"
@@ -51,6 +62,7 @@
         type="button"
         class="environment-selector-dialog-item"
         (click)="toggle(ServerEnvironmentType.EU)"
+        [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.EU ? 'true' : 'false'"
         *ngIf="euServerFlagEnabled"
       >
         <i
@@ -68,6 +80,9 @@
         type="button"
         class="environment-selector-dialog-item"
         (click)="toggle(ServerEnvironmentType.SelfHosted)"
+        [attr.aria-pressed]="
+          selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'true' : 'false'
+        "
       >
         <i
           class="bwi bwi-fw bwi-sm bwi-check"