From efd62f1928f40708f1f8de41aa65d6f3495cef05 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Mon, 10 Mar 2025 11:11:46 -0700
Subject: [PATCH] add folder name to aria labels for folder edit buttons
 (#13648)

---
 apps/browser/src/_locales/en/messages.json          |  9 +++++++++
 .../vault/popup/settings/folders-v2.component.html  |  2 +-
 .../components/vault-filter.component.ts            |  2 +-
 .../components/vault-filter-section.component.html  |  2 +-
 .../shared/models/vault-filter-section.type.ts      |  2 +-
 apps/web/src/locales/en/messages.json               | 13 +++++++++++++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index ae82892f1ed..cb3d8c12ef4 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -385,6 +385,15 @@
   "editFolder": {
     "message": "Edit folder"
   },
+  "editFolderWithName": {
+    "message": "Edit folder: $FOLDERNAME$",
+    "placeholders": {
+      "foldername": {
+        "content": "$1",
+        "example": "Social"
+      }
+    }
+  },
   "newFolder": {
     "message": "New folder"
   },
diff --git a/apps/browser/src/vault/popup/settings/folders-v2.component.html b/apps/browser/src/vault/popup/settings/folders-v2.component.html
index 21e00757a29..35a0fbec0a9 100644
--- a/apps/browser/src/vault/popup/settings/folders-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/folders-v2.component.html
@@ -19,7 +19,7 @@
               slot="end"
               type="button"
               (click)="openAddEditFolderDialog(folder)"
-              [appA11yTitle]="'editFolder' | i18n"
+              [appA11yTitle]="'editFolderWithName' | i18n: folder.name"
               bitIconButton="bwi-pencil-square"
               class="tw-self-end"
               data-testid="edit-folder-button"
diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts b/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts
index a232f8faec5..923cb33b055 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts
@@ -281,7 +281,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
       },
       action: this.applyFolderFilter,
       edit: {
-        text: "editFolder",
+        filterName: this.i18nService.t("folder"),
         action: this.editFolder,
       },
     };
diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/shared/components/vault-filter-section.component.html b/apps/web/src/app/vault/individual-vault/vault-filter/shared/components/vault-filter-section.component.html
index 6dd00375f44..1485c1f5343 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/shared/components/vault-filter-section.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/shared/components/vault-filter-section.component.html
@@ -89,7 +89,7 @@
               *ngIf="editInfo && f.node.id"
               class="edit-button"
               (click)="onEdit(f)"
-              appA11yTitle="{{ editInfo.text | i18n }}"
+              appA11yTitle="{{ 'editWithName' | i18n: editInfo.filterName : f.node.name }}"
             >
               <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
             </button>
diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter-section.type.ts b/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter-section.type.ts
index f89a72b5d2b..0f949e17146 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter-section.type.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter-section.type.ts
@@ -31,7 +31,7 @@ export type VaultFilterSection = {
   };
   action: (filterNode: TreeNode<VaultFilterType>) => Promise<void>;
   edit?: {
-    text: string;
+    filterName: string;
     action: (filter: VaultFilterType) => void;
   };
   add?: {
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 3888b42fe76..1948f589661 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -491,6 +491,19 @@
   "editFolder": {
     "message": "Edit folder"
   },
+  "editWithName": {
+    "message": "Edit $ITEM$: $NAME$",
+    "placeholders": {
+      "item": {
+        "content": "$1",
+        "example": "login"
+      },
+      "name": {
+        "content": "$2",
+        "example": "Social"
+      }
+    }
+  },
   "newFolder": {
     "message": "New folder"
   },