update autofill a11y

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"
       }
     }
   },

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()"
 ></app-vault-list-items-container>

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<boolean> =
+    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

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 }}"
           >
             <div slot="start" class="tw-justify-start tw-w-7 tw-flex">
@@ -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 }}
               </button>

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<boolean> =
-    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) {}