From 1a3aa0d0f0d29b3aed6df1c2c6f872f00345afde Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Tue, 11 Mar 2025 14:08:48 -0700 Subject: [PATCH] update autofill a11y --- apps/browser/src/_locales/en/messages.json | 12 ++++++++++-- .../autofill-vault-list-items.component.html | 2 +- .../autofill-vault-list-items.component.ts | 16 ++++++---------- .../vault-list-items-container.component.html | 9 ++++++--- .../vault-settings/vault-settings.service.ts | 7 +++++-- 5 files changed, 28 insertions(+), 18 deletions(-) diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 1679fcfcf3f..c39f09db9aa 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -4292,22 +4292,30 @@ } }, "viewItemTitle": { - "message": "View item - $ITEMNAME$", + "message": "View item - $ITEMNAME$ - $FIELD$", "description": "Title for a link that opens a view for an item.", "placeholders": { "itemname": { "content": "$1", "example": "Secret Item" + }, + "field": { + "content": "$2", + "example": "Username" } } }, "autofillTitle": { - "message": "Autofill - $ITEMNAME$", + "message": "Autofill - $ITEMNAME$ - $FIELD$", "description": "Title for a button that autofills a login item.", "placeholders": { "itemname": { "content": "$1", "example": "Secret Item" + }, + "field": { + "content": "$2", + "example": "Username" } } }, diff --git a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html index 071873b40c9..c271e93d663 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html +++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html @@ -6,6 +6,6 @@ (onRefresh)="refreshCurrentTab()" [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null" showAutofillButton - [primaryActionAutofill]="clickItemsToAutofillVaultView" + [primaryActionAutofill]="clickItemsToAutofillVaultView$ | async" [groupByType]="groupByType()" > diff --git a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts index 03d84120785..72d51776f7b 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { toSignal } from "@angular/core/rxjs-interop"; -import { combineLatest, firstValueFrom, map, Observable } from "rxjs"; +import { combineLatest, map, Observable } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service"; @@ -33,7 +33,7 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/ selector: "app-autofill-vault-list-items", templateUrl: "autofill-vault-list-items.component.html", }) -export class AutofillVaultListItemsComponent implements OnInit { +export class AutofillVaultListItemsComponent { /** * The list of ciphers that can be used to autofill the current page. * @protected @@ -47,7 +47,9 @@ export class AutofillVaultListItemsComponent implements OnInit { */ protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window); - clickItemsToAutofillVaultView = false; + /** Flag indicating whether the login item should automatically autofill when clicked */ + protected clickItemsToAutofillVaultView$: Observable = + this.vaultSettingsService.clickItemsToAutofillVaultView$; protected groupByType = toSignal( this.vaultPopupItemsService.hasFilterApplied$.pipe(map((hasFilter) => !hasFilter)), @@ -84,12 +86,6 @@ export class AutofillVaultListItemsComponent implements OnInit { // TODO: Migrate logic to show Autofill policy toast PM-8144 } - async ngOnInit() { - this.clickItemsToAutofillVaultView = await firstValueFrom( - this.vaultSettingsService.clickItemsToAutofillVaultView$, - ); - } - /** * Refreshes the current tab to re-populate the autofill ciphers. * @protected diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html index 2272d3fbd6c..87c4b6b7b08 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html +++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html @@ -94,7 +94,7 @@ type="button" (click)="primaryActionOnSelect(cipher)" (dblclick)="launchCipher(cipher)" - [appA11yTitle]="cipherItemTitleKey | async | i18n: cipher.name" + [appA11yTitle]="cipherItemTitleKey | async | i18n: cipher.name : cipher.login.username" class="{{ itemHeightClass }}" >
@@ -124,8 +124,11 @@ bitBadge variant="primary" (click)="doAutofill(cipher)" - [title]="autofillShortcutTooltip() ?? ('autofillTitle' | i18n: cipher.name)" - [attr.aria-label]="'autofillTitle' | i18n: cipher.name" + [title]=" + autofillShortcutTooltip() ?? + ('autofillTitle' | i18n: cipher.name : cipher.login.username) + " + [attr.aria-label]="'autofillTitle' | i18n: cipher.name : cipher.login.username" > {{ "fill" | i18n }} diff --git a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts index 85ab3914158..423acba8fff 100644 --- a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts +++ b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts @@ -1,4 +1,4 @@ -import { Observable, map } from "rxjs"; +import { Observable, map, shareReplay } from "rxjs"; import { ActiveUserState, GlobalState, StateProvider } from "../../../platform/state"; import { VaultSettingsService as VaultSettingsServiceAbstraction } from "../../abstractions/vault-settings/vault-settings.service"; @@ -46,7 +46,10 @@ export class VaultSettingsService implements VaultSettingsServiceAbstraction { * {@link VaultSettingsServiceAbstraction.clickItemsToAutofillVaultView$$} */ readonly clickItemsToAutofillVaultView$: Observable = - this.clickItemsToAutofillVaultViewState.state$.pipe(map((x) => x ?? false)); + this.clickItemsToAutofillVaultViewState.state$.pipe( + map((x) => x ?? false), + shareReplay({ bufferSize: 1, refCount: false }), + ); constructor(private stateProvider: StateProvider) {}