[PM-8214] adding tabIndex for screen reader (#12602)

* update new device components to use liveannouncer so users are notified of the pages header, and add tabindex to remind me later btn
bitwarden · Dec 31, 2024 · 75f75dc · 75f75dc
1 parent e1778f4
commit 75f75dc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/...nents/new-device-verification-notice/new-device-verification-notice-page-one.component.ts b/...nents/new-device-verification-notice/new-device-verification-notice-page-one.component.ts
@@ -1,5 +1,6 @@
+import { LiveAnnouncer } from "@angular/cdk/a11y";
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { AfterViewInit, Component, OnInit } from "@angular/core";
 import { FormBuilder, FormControl, ReactiveFormsModule } from "@angular/forms";
 import { Router } from "@angular/router";
 import { firstValueFrom, Observable } from "rxjs";
@@ -9,6 +10,7 @@ import { Account, AccountService } from "@bitwarden/common/auth/abstractions/acc
 import { ClientType } from "@bitwarden/common/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
@@ -41,7 +43,7 @@ import {
     ReactiveFormsModule,
   ],
 })
-export class NewDeviceVerificationNoticePageOneComponent implements OnInit {
+export class NewDeviceVerificationNoticePageOneComponent implements OnInit, AfterViewInit {
   protected formGroup = this.formBuilder.group({
     hasEmailAccess: new FormControl(0),
   });
@@ -57,6 +59,8 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit {
     private newDeviceVerificationNoticeService: NewDeviceVerificationNoticeService,
     private platformUtilsService: PlatformUtilsService,
     private configService: ConfigService,
+    private liveAnnouncer: LiveAnnouncer,
+    private i18nService: I18nService,
   ) {
     this.isDesktop = this.platformUtilsService.getClientType() === ClientType.Desktop;
   }
@@ -70,6 +74,10 @@ export class NewDeviceVerificationNoticePageOneComponent implements OnInit {
     this.currentUserId = currentAcct.id;
   }
 
+  ngAfterViewInit() {
+    void this.liveAnnouncer.announce(this.i18nService.t("importantNotice"), "polite");
+  }
+
   submit = async () => {
     const doesNotHaveEmailAccess = this.formGroup.controls.hasEmailAccess.value === 0;
 

diff --git a/...nts/new-device-verification-notice/new-device-verification-notice-page-two.component.html b/...nts/new-device-verification-notice/new-device-verification-notice-page-two.component.html
@@ -35,7 +35,14 @@
 </a>
 
 <div class="tw-flex tw-justify-center tw-mt-6" *ngIf="!permanentFlagEnabled">
-  <a bitLink linkType="primary" (click)="remindMeLaterSelect()" data-testid="remind-me-later">
+  <a
+    bitLink
+    linkType="primary"
+    (click)="remindMeLaterSelect()"
+    data-testid="remind-me-later"
+    href="#"
+    appStopClick
+  >
     {{ "remindMeLater" | i18n }}
   </a>
 </div>
diff --git a/...nents/new-device-verification-notice/new-device-verification-notice-page-two.component.ts b/...nents/new-device-verification-notice/new-device-verification-notice-page-two.component.ts
@@ -1,5 +1,6 @@
+import { LiveAnnouncer } from "@angular/cdk/a11y";
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { AfterViewInit, Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom, Observable } from "rxjs";
 
@@ -12,6 +13,7 @@ import {
   Environment,
   EnvironmentService,
 } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { ButtonModule, LinkModule, TypographyModule } from "@bitwarden/components";
@@ -24,7 +26,7 @@ import { NewDeviceVerificationNoticeService } from "../../services/new-device-ve
   templateUrl: "./new-device-verification-notice-page-two.component.html",
   imports: [CommonModule, JslibModule, TypographyModule, ButtonModule, LinkModule],
 })
-export class NewDeviceVerificationNoticePageTwoComponent implements OnInit {
+export class NewDeviceVerificationNoticePageTwoComponent implements OnInit, AfterViewInit {
   protected isWeb: boolean;
   protected isDesktop: boolean;
   protected permanentFlagEnabled = false;
@@ -39,6 +41,8 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private environmentService: EnvironmentService,
     private configService: ConfigService,
+    private liveAnnouncer: LiveAnnouncer,
+    private i18nService: I18nService,
   ) {
     this.isWeb = this.platformUtilsService.getClientType() === ClientType.Web;
     this.isDesktop = this.platformUtilsService.getClientType() === ClientType.Desktop;
@@ -56,6 +60,10 @@ export class NewDeviceVerificationNoticePageTwoComponent implements OnInit {
     this.currentUserId = currentAcct.id;
   }
 
+  ngAfterViewInit() {
+    void this.liveAnnouncer.announce(this.i18nService.t("setupTwoStepLogin"), "polite");
+  }
+
   async navigateToTwoStepLogin(event: Event) {
     event.preventDefault();