[PM-16100][A11y][Extension] Usernames not being read by screen readers like they used to be (#13800)

* update autofill a11y

* fixes to cipher item title

Author: jaasen-livefront

apps/browser/src/_locales/en/messages.json

@@ -4279,6 +4279,20 @@
       }
     }
   },
+  "viewItemTitleWithField": {
+    "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$",
     "description": "Title for a button that autofills a login item.",
@@ -4289,6 +4303,20 @@
       }
     }
   },
+  "autofillTitleWithField": {
+    "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"
+      }
+    }
+  },
   "copyFieldValue": {
     "message": "Copy $FIELD$, $VALUE$",
     "description": "Title for a button that copies a field value to the clipboard.",

apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html

@@ -7,6 +7,6 @@
   [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null"
   showAutofillButton
   [disableDescriptionMargin]="showEmptyAutofillTip$ | async"
-  [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

@@ -99,7 +99,9 @@ <h3 class="tw-text-muted tw-text-xs tw-font-semibold tw-pl-1 tw-mb-1 bit-compact
             type="button"
             (click)="primaryActionOnSelect(cipher)"
             (dblclick)="launchCipher(cipher)"
-            [appA11yTitle]="cipherItemTitleKey | async | i18n: cipher.name"
+            [appA11yTitle]="
+              cipherItemTitleKey(cipher) | async | i18n: cipher.name : cipher.login.username
+            "
             class="{{ itemHeightClass }}"
           >
             <div slot="start" class="tw-justify-start tw-w-7 tw-flex">

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts

@@ -206,11 +206,14 @@ export class VaultListItemsContainerComponent implements OnInit, AfterViewInit {
   /**
    * Resolved i18n key to use for suggested cipher items
    */
-  cipherItemTitleKey = this.currentURIIsBlocked$.pipe(
-    map((uriIsBlocked) =>
-      this.primaryActionAutofill && !uriIsBlocked ? "autofillTitle" : "viewItemTitle",
-    ),
-  );
+  cipherItemTitleKey = (cipher: CipherView) =>
+    this.currentURIIsBlocked$.pipe(
+      map((uriIsBlocked) => {
+        const hasUsername = cipher.login?.username != null;
+        const key = this.primaryActionAutofill && !uriIsBlocked ? "autofillTitle" : "viewItemTitle";
+        return hasUsername ? `${key}WithField` : key;
+      }),
+    );
 
   /**
    * Option to show the autofill button for each item.

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