[PM-29654] Hide copy button when custom field has no value (#20459)

* Hide copy buttone when there is no value

* Added no value entered to the screenreader

Author: gbubemismith

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

@@ -5142,6 +5142,10 @@
       }
     }
   },
+  "noValueEntered": {
+    "message": "No value entered",
+    "description": "Screen reader announcement appended to a custom field's name when the field has no value entered."
+  },
   "noValuesToCopy": {
     "message": "No values to copy"
   },

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

@@ -1225,6 +1225,10 @@
   "noItemsInList": {
     "message": "There are no items to list."
   },
+  "noValueEntered": {
+    "message": "No value entered",
+    "description": "Screen reader announcement appended to a custom field's name when the field has no value entered."
+  },
   "sendVerificationCode": {
     "message": "Send a verification code to your email"
   },

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

@@ -1432,6 +1432,10 @@
       }
     }
   },
+  "noValueEntered": {
+    "message": "No value entered",
+    "description": "Screen reader announcement appended to a custom field's name when the field has no value entered."
+  },
   "noValuesToCopy": {
     "message": "No values to copy"
   },

libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html

@@ -17,18 +17,21 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
               bitInput
               [value]="field.value ?? ''"
               aria-readonly="true"
+              [attr.aria-label]="emptyFieldAriaLabel(field)"
               vaultAutosizeReadOnlyTextArea
             ></textarea>
-            <button
-              bitIconButton="bwi-clone"
-              bitSuffix
-              type="button"
-              [appCopyClick]="field.value"
-              showToast
-              [valueLabel]="field.name"
-              [label]="'copyCustomField' | i18n: field.name"
-              data-testid="copy-custom-field"
-            ></button>
+            @if (field.value) {
+              <button
+                bitIconButton="bwi-clone"
+                bitSuffix
+                type="button"
+                [appCopyClick]="field.value"
+                showToast
+                [valueLabel]="field.name"
+                [label]="'copyCustomField' | i18n: field.name"
+                data-testid="copy-custom-field"
+              ></button>
+            }
           </bit-form-field>
         }
         @if (field.type === fieldType.Hidden) {
@@ -41,6 +44,7 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
                 type="password"
                 [value]="field.value ?? ''"
                 aria-readonly="true"
+                [attr.aria-label]="emptyFieldAriaLabel(field)"
                 class="tw-font-mono"
               />
             }
@@ -50,7 +54,7 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
                 readonly
                 bitInput
                 type="password"
-                [value]="field.value"
+                [value]="field.value ?? ''"
                 aria-readonly="true"
                 class="tw-font-mono"
                 vaultAutosizeReadOnlyTextArea
@@ -73,7 +77,7 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
                 (click)="toggleCharacterCount(i)"
               ></button>
             }
-            @if (canViewPassword) {
+            @if (canViewPassword && field.value) {
               <button
                 bitSuffix
                 type="button"
@@ -82,7 +86,7 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
                 (toggledChange)="toggleHiddenField($event, i)"
               ></button>
             }
-            @if (canViewPassword) {
+            @if (canViewPassword && field.value) {
               <button
                 bitIconButton="bwi-clone"
                 bitSuffix

libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts

@@ -8,6 +8,7 @@ import { CipherType, FieldType, LinkedIdType } from "@bitwarden/common/vault/enu
 import { LinkedMetadata } from "@bitwarden/common/vault/linked-field-option.decorator";
 import { CardView } from "@bitwarden/common/vault/models/view/card.view";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { FieldView } from "@bitwarden/common/vault/models/view/field.view";
 import { IdentityView } from "@bitwarden/common/vault/models/view/identity.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import {
@@ -83,6 +84,13 @@ export class CustomFieldV2Component implements OnInit, OnChanges {
     return this.cipher.viewPassword;
   }
 
+  emptyFieldAriaLabel(field: FieldView): string | null {
+    if (field.value) {
+      return null;
+    }
+    return `${field.name}, ${this.i18nService.t("noValueEntered")}`;
+  }
+
   toggleCharacterCount(index: number) {
     const fieldIndex = this.showHiddenValueCountFields.indexOf(index);
     if (fieldIndex > -1) {