bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +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

44
libs/tools/generator/components/src/username-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 { FormBuilder } from "@angular/forms";
@@ -28,6 +29,7 @@ import {
AlgorithmInfo,
CredentialAlgorithm,
CredentialGeneratorService,
GenerateRequest,
GeneratedCredential,
Generators,
getForwarderConfiguration,
@@ -66,6 +68,7 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
private accountService: AccountService,
private zone: NgZone,
private formBuilder: FormBuilder,
private ariaLive: LiveAnnouncer,
) {}
/** Binds the component to a specific user's settings. When this input is not provided,
@@ -160,10 +163,10 @@ export class UsernameGeneratorComponent 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) => {
@@ -173,6 +176,10 @@ export class UsernameGeneratorComponent 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);
});
@@ -360,6 +367,10 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
throw new Error(`Invalid generator type: "${type}"`);
}
private announce(message: string) {
this.ariaLive.announce(message).catch((e) => this.logService.error(e));
}
/** Lists the credential types supported by the component. */
protected typeOptions$ = new BehaviorSubject<Option<string>[]>([]);
@@ -375,6 +386,18 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
/** tracks the currently selected credential type */
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
/** Emits hint key for the currently selected credential type */
protected credentialTypeHint$ = new ReplaySubject<string>(1);
/** Emits the last generated value. */
protected readonly value$ = new BehaviorSubject<string>("");
/** Emits when the userId changes */
protected readonly userId$ = new BehaviorSubject<UserId>(null);
/** Emits when a new credential is requested */
private readonly generate$ = new Subject<GenerateRequest>();
protected showAlgorithm$ = this.algorithm$.pipe(
combineLatestWith(this.showForwarder$),
map(([algorithm, showForwarder]) => (showForwarder ? null : algorithm)),
@@ -401,27 +424,18 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
*/
protected credentialTypeLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ generatedValue }) => generatedValue),
map(({ credentialType }) => credentialType),
);
/** Emits hint key for the currently selected credential type */
protected credentialTypeHint$ = new ReplaySubject<string>(1);
/** Emits the last generated value. */
protected readonly value$ = new BehaviorSubject<string>("");
/** Emits when the userId changes */
protected readonly userId$ = new BehaviorSubject<UserId>(null);
/** Emits when a new credential is requested */
private readonly generate$ = new Subject<string>();
/** 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 });
}
private toOptions(algorithms: AlgorithmInfo[]) {