From d21cc261e6a22f7313bdbf5c3f36d9bcdc4e4ffd Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 18 Sep 2023 16:33:11 -0700
Subject: [PATCH] [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>
---
 .../src/auth/popup/home.component.html        |  2 +-
 apps/browser/src/popup/scss/environment.scss  | 14 ++----
 apps/desktop/src/scss/environment.scss        | 10 ++---
 .../environment-selector.component.html       | 43 +++++++++++++------
 4 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/apps/browser/src/auth/popup/home.component.html b/apps/browser/src/auth/popup/home.component.html
index da208a8d50c..6b42033c4bc 100644
--- a/apps/browser/src/auth/popup/home.component.html
+++ b/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"
diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss
index 1ac0f4240bd..f6adba86c2e 100644
--- a/apps/browser/src/popup/scss/environment.scss
+++ b/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;
-}
diff --git a/apps/desktop/src/scss/environment.scss b/apps/desktop/src/scss/environment.scss
index eae8b4a2d5b..0f28ba1954a 100644
--- a/apps/desktop/src/scss/environment.scss
+++ b/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;
   }
 }
 
diff --git a/libs/angular/src/auth/components/environment-selector.component.html b/libs/angular/src/auth/components/environment-selector.component.html
index 4e8d33bde68..2765787c317 100644
--- a/libs/angular/src/auth/components/environment-selector.component.html
+++ b/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"