[PM-13776] Generator Icon Button labels (#11623)

* update aria labels for generate and copy buttons within the generator components

- Using the `appA11yTitle` across all icon buttons
- Updated all labels to be targeted towards the credential type rather than just "password"

* add copy/generate passphrase translations to desktop

* add fixme comments for translations

* remove reference to JIRA ticket

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

@@ -107,6 +107,9 @@
   "copyPassword": {
     "message": "Copy password"
   },
+  "copyPassphrase": {
+    "message": "Copy passphrase"
+  },
   "copyNote": {
     "message": "Copy note"
   },
@@ -407,6 +410,9 @@
   "generatePassword": {
     "message": "Generate password"
   },
+  "generatePassphrase": {
+    "message": "Generate passphrase"
+  },
   "regeneratePassword": {
     "message": "Regenerate password"
   },

apps/desktop/src/locales/en/messages.json

@@ -259,6 +259,9 @@
   "generatePassword": {
     "message": "Generate password"
   },
+  "generatePassphrase": {
+    "message": "Generate passphrase"
+  },
   "type": {
     "message": "Type"
   },
@@ -394,6 +397,10 @@
   "copyPassword": {
     "message": "Copy password"
   },
+  "copyPassphrase": {
+    "message": "Copy passphrase",
+    "description": "Copy passphrase to clipboard"
+  },
   "copyUri": {
     "message": "Copy URI"
   },

apps/web/src/locales/en/messages.json

@@ -405,6 +405,9 @@
   "generatePassword": {
     "message": "Generate password"
   },
+  "generatePassphrase": {
+    "message": "Generate passphrase"
+  },
   "checkPassword": {
     "message": "Check if password has been exposed."
   },
@@ -663,6 +666,10 @@
     "message": "Copy password",
     "description": "Copy password to clipboard"
   },
+  "copyPassphrase": {
+    "message": "Copy passphrase",
+    "description": "Copy passphrase to clipboard"
+  },
   "passwordCopied": {
     "message": "Password copied"
   },

libs/tools/generator/components/src/credential-generator.component.html

@@ -16,18 +16,21 @@
     <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
   </div>
   <div class="tw-flex tw-items-center tw-space-x-1">
-    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+    <button
-      {{ "generatePassword" | i18n }}
+      type="button"
-    </button>
+      bitIconButton="bwi-generate"
+      buttonType="main"
+      (click)="generate$.next()"
+      [appA11yTitle]="credentialTypeGenerateLabel$ | async"
+    ></button>
     <button
       type="button"
       bitIconButton="bwi-clone"
       buttonType="main"
       showToast
+      [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
-    >
+    ></button>
-      {{ "copyPassword" | i18n }}
-    </button>
   </div>
 </bit-card>
 <tools-password-settings

libs/tools/generator/components/src/credential-generator.component.ts

@@ -63,6 +63,44 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
     nav: null,
   });
 
+  /**
+   * Emits the copy button aria-label respective of the selected credential type
+   *
+   * FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
+   */
+  protected credentialTypeCopyLabel$ = this.root$.pipe(
+    map(({ nav }) => {
+      if (nav === "password") {
+        return this.i18nService.t("copyPassword");
+      }
+
+      if (nav === "passphrase") {
+        return this.i18nService.t("copyPassphrase");
+      }
+
+      return this.i18nService.t("copyUsername");
+    }),
+  );
+
+  /**
+   * Emits the generate button aria-label respective of the selected credential type
+   *
+   * FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
+   */
+  protected credentialTypeGenerateLabel$ = this.root$.pipe(
+    map(({ nav }) => {
+      if (nav === "password") {
+        return this.i18nService.t("generatePassword");
+      }
+
+      if (nav === "passphrase") {
+        return this.i18nService.t("generatePassphrase");
+      }
+
+      return this.i18nService.t("generateUsername");
+    }),
+  );
+
   protected onRootChanged(nav: RootNavValue) {
     // prevent subscription cycle
     if (this.root$.value.nav !== nav) {

libs/tools/generator/components/src/password-generator.component.html

@@ -14,18 +14,21 @@
     <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
   </div>
   <div class="tw-flex tw-items-center tw-space-x-1">
-    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+    <button
-      {{ "generatePassword" | i18n }}
+      type="button"
-    </button>
+      bitIconButton="bwi-generate"
+      buttonType="main"
+      (click)="generate$.next()"
+      [appA11yTitle]="credentialTypeGenerateLabel$ | async"
+    ></button>
     <button
       type="button"
       bitIconButton="bwi-clone"
       buttonType="main"
       showToast
+      [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
-    >
+    ></button>
-      {{ "copyPassword" | i18n }}
-    </button>
   </div>
 </bit-card>
 <tools-password-settings

libs/tools/generator/components/src/password-generator.component.ts

@@ -52,6 +52,36 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   /** tracks the currently selected credential type */
   protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>(null);
 
+  /**
+   * Emits the copy button aria-label respective of the selected credential
+   *
+   * FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
+   */
+  protected credentialTypeCopyLabel$ = this.credentialType$.pipe(
+    map((cred) => {
+      if (cred === "password") {
+        return this.i18nService.t("copyPassword");
+      }
+
+      return this.i18nService.t("copyPassphrase");
+    }),
+  );
+
+  /**
+   * Emits the generate button aria-label respective of the selected credential
+   *
+   * FIXME: Move label and logic to `AlgorithmInfo` within the `CredentialGeneratorService`.
+   */
+  protected credentialTypeGenerateLabel$ = this.credentialType$.pipe(
+    map((cred) => {
+      if (cred === "password") {
+        return this.i18nService.t("generatePassword");
+      }
+
+      return this.i18nService.t("generatePassphrase");
+    }),
+  );
+
   /** Emits the last generated value. */
   protected readonly value$ = new BehaviorSubject<string>("");
 

libs/tools/generator/components/src/username-generator.component.html

@@ -3,18 +3,23 @@
     <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
   </div>
   <div class="tw-flex tw-items-center tw-space-x-1">
-    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+    <!-- FIXME: Move appA11yTitle translation to `AlgorithmInfo` within the `CredentialGeneratorService`. -->
-      {{ "generatePassword" | i18n }}
+    <button
-    </button>
+      type="button"
+      bitIconButton="bwi-generate"
+      buttonType="main"
+      (click)="generate$.next()"
+      [appA11yTitle]="'generateUsername' | i18n"
+    ></button>
+    <!-- FIXME: Move appA11yTitle translation to `AlgorithmInfo` within the `CredentialGeneratorService`. -->
     <button
       type="button"
       bitIconButton="bwi-clone"
       buttonType="main"
       showToast
+      [appA11yTitle]="'copyUsername' | i18n"
       [appCopyClick]="value$ | async"
-    >
+    ></button>
-      {{ "copyPassword" | i18n }}
-    </button>
   </div>
 </bit-card>
 <bit-section [disableMargin]="disableMargin">