bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 00:33:44 +00:00
Code Issues Releases Wiki Activity

[PM-15200] add "generated credential" screen reader notification (#12877)

Browse Source 
replaces website$ dependency with `GenerateRequest`
This commit is contained in:
✨ Audrey ✨
2025-01-24 14:44:42 -05:00
committed by GitHub
parent 9a5ebf94a0
commit 1fc20b55f2
21 changed files with 310 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
libs/tools/generator/components/src/password-generator.component.ts
View File

@@ -1,5 +1,6 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { LiveAnnouncer } from "@angular/cdk/a11y";
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
import {
@@ -16,7 +17,6 @@ import {
} from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { UserId } from "@bitwarden/common/types/guid";
import { ToastService, Option } from "@bitwarden/components";
@@ -28,6 +28,7 @@ import {
isPasswordAlgorithm,
AlgorithmInfo,
isSameAlgorithm,
GenerateRequest,
} from "@bitwarden/generator-core";
import { GeneratorHistoryService } from "@bitwarden/generator-history";
@@ -42,9 +43,9 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
private generatorHistoryService: GeneratorHistoryService,
private toastService: ToastService,
private logService: LogService,
private i18nService: I18nService,
private accountService: AccountService,
private zone: NgZone,
private ariaLive: LiveAnnouncer,
) {}
/** Binds the component to a specific user's settings.
@@ -67,14 +68,17 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
protected readonly userId$ = new BehaviorSubject<UserId>(null);
/** Emits when a new credential is requested */
private readonly generate$ = new Subject<string>();
private readonly generate$ = new Subject<GenerateRequest>();
/** Identifies generator requests that were requested by the user */
protected readonly USER_REQUEST = "user request";
/** Request a new value from the generator
* @param requestor a label used to trace generation request
* origin in the debugger.
*/
protected async generate(requestor: string) {
this.generate$.next(requestor);
this.generate$.next({ source: requestor });
}
/** Tracks changes to the selected credential type
@@ -137,10 +141,10 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
// continue with origin stream
return generator;
}),
withLatestFrom(this.userId$),
withLatestFrom(this.userId$, this.algorithm$),
takeUntil(this.destroyed),
)
.subscribe(([generated, userId]) => {
.subscribe(([generated, userId, algorithm]) => {
this.generatorHistoryService
.track(userId, generated.credential, generated.category, generated.generationDate)
.catch((e: unknown) => {
@@ -150,6 +154,10 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
if (generated.source === this.USER_REQUEST) {
this.announce(algorithm.onGeneratedMessage);
}
this.onGenerated.next(generated);
this.value$.next(generated.credential);
});
@@ -205,6 +213,10 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
});
}
private announce(message: string) {
this.ariaLive.announce(message).catch((e) => this.logService.error(e));
}
private typeToGenerator$(type: CredentialAlgorithm) {
const dependencies = {
on$: this.generate$,
@@ -249,7 +261,7 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
*/
protected credentialTypeLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ generatedValue }) => generatedValue),
map(({ credentialType }) => credentialType),
);
private toOptions(algorithms: AlgorithmInfo[]) {