PM-5086 - Accessibility pass + WIP on region selector

libs/auth/src/angular/registration/registration-start/registration-start-secondary.component.html

@@ -1 +1,3 @@
-{{ "alreadyHaveAccount" | i18n }} <a routerLink="/login">{{ "logIn" | i18n }}</a>
+<span tabindex="0"
+  >{{ "alreadyHaveAccount" | i18n }} <a routerLink="/login">{{ "logIn" | i18n }}</a></span
+>

libs/auth/src/angular/registration/registration-start/registration-start.component.html

@@ -60,20 +60,29 @@
     <div class="tw-flex tw-flex-col tw-items-center tw-justify-center">
       <bit-icon [icon]="Icons.RegistrationCheckEmailIcon" class="tw-mb-6"></bit-icon>
 
-      <h2 bitTypography="h2" class="tw-font-bold tw-mb-3">{{ "checkYourEmail" | i18n }}</h2>
+      <h2
+        bitTypography="h2"
+        id="check_your_email_heading"
+        class="tw-font-bold tw-mb-3"
+        tabindex="0"
+        appAutofocus
+      >
+        {{ "checkYourEmail" | i18n }}
+      </h2>
 
-      <p bitTypography="body1" class="tw-text-center tw-mb-3">
+      <p bitTypography="body1" tabindex="0" class="tw-text-center tw-mb-3">
         {{ "followTheLinkInTheEmailSentTo" | i18n }}
         <span class="tw-font-bold">{{ email.value }}</span>
         {{ "andContinueCreatingYourAccount" | i18n }}
       </p>
 
-      <p bitTypography="helper" class="tw-text-center">
+      <p bitTypography="helper" class="tw-text-center" tabindex="0">
         {{ "noEmail" | i18n }}
         <a
           bitLink
           linkType="primary"
           class="tw-cursor-pointer"
+          tabindex="0"
           (click)="state = RegistrationStartState.USER_DATA_ENTRY"
         >
           {{ "goBack" | i18n }}

libs/auth/src/angular/registration/registration-start/registration-start.component.ts

@@ -9,7 +9,7 @@ import {
   Validators,
 } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { Subject, firstValueFrom, map, takeUntil } from "rxjs";
+import { Subject, filter, firstValueFrom, from, map, switchMap, takeUntil } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ClientType } from "@bitwarden/common/enums";
@@ -24,12 +24,14 @@ import {
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
+  DialogService,
   FormFieldModule,
   IconModule,
   LinkModule,
   SelectModule,
 } from "@bitwarden/components";
 
+// import { EnvironmentComponent as DesktopEnvironmentComponent } from "../../../../../../apps/desktop/src/auth/environment.component";
 import { RegistrationCheckEmailIcon } from "../../icons/registration-check-email.icon";
 
 enum RegistrationStartState {
@@ -100,12 +102,13 @@ export class RegistrationStartComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private platformUtilsService: PlatformUtilsService,
     private environmentService: EnvironmentService,
+    private dialogService: DialogService,
   ) {
     this.isSelfHost = platformUtilsService.isSelfHost();
     this.clientType = platformUtilsService.getClientType();
 
     // TODO: remove this.
-    this.clientType = ClientType.Desktop;
+    // this.clientType = ClientType.Desktop;
 
     this.isBrowserOrDesktop =
       this.clientType === ClientType.Desktop || this.clientType === ClientType.Browser;
@@ -129,6 +132,10 @@ export class RegistrationStartComponent implements OnInit, OnDestroy {
   }
 
   private async initForBrowserOrDesktop() {
+    await this.initializeSelectedRegion();
+  }
+
+  private async initializeSelectedRegion() {
     this.selectedRegion.setValidators(Validators.required);
 
     // TODO: figure out if observable or promise is better here
@@ -160,6 +167,40 @@ export class RegistrationStartComponent implements OnInit, OnDestroy {
     this.selectedRegion.setValue(selectedRegionConfig);
   }
 
+  private listenForSelectedRegionChanges() {
+    this.selectedRegion.valueChanges
+      .pipe(
+        filter((regionConfig: RegionConfig | null) => regionConfig !== null),
+        switchMap((regionConfig: RegionConfig) => {
+          if (regionConfig.key === Region.SelfHosted) {
+            // Open self-hosted settings modal based on client type
+
+            // if (this.clientType === ClientType.Desktop) {
+            //   this.openDesktopSelfHostedSettingsDialog();
+            // }
+
+            // if (this.clientType === ClientType.Browser) {
+            //   this.openBrowserExtensionSelfHostedSettingsDialog();
+            // }
+
+            return;
+          }
+
+          return from(this.environmentService.setEnvironment(regionConfig.key));
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
+  }
+
+  // private openDesktopSelfHostedSettingsDialog() {
+  //   this.dialogService.open(DesktopEnvironmentComponent);
+  // }
+
+  // private openBrowserExtensionSelfHostedSettingsDialog() {
+  //   // this.dialogService.open(EnvironmentComponent);
+  // }
+
   submit = async () => {
     const valid = this.validateForm();
 
@@ -170,6 +211,7 @@ export class RegistrationStartComponent implements OnInit, OnDestroy {
     // TODO: Implement registration logic
 
     this.state = RegistrationStartState.CHECK_EMAIL;
+    document.getElementById("check_your_email_heading")?.focus();
   };
 
   private validateForm(): boolean {