[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>

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>
-    <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
+    }}</span>
+    <span *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
       "euDomain" | i18n
-    }}</label>
-    <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
+    }}</span>
+    <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>
-</label>
+  </button>
+</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"