Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-07 19:07:45 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* update new device components to use liveannouncer so users are notified of the pages header, and add tabindex to remind me later btn
This commit is contained in:
Jason Ng 2024-12-31 15:33:41 -05:00 committed by GitHub
parent e1778f4282
commit 75f75dc0f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts
View File

@ -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;

9
libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.html
View File

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

12
libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-two.component.ts
View File

@ -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();