add folder name to aria labels for folder edit buttons (#13648)

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

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"

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

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>

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?: {

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