WEB-958: Add interaction feedback to account number copy button (#3601)

Author: RiteshGite

src/app/shared/account-number/account-number.component.html

@@ -8,9 +8,14 @@
 
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
   @if (displayL && iconVisible) {
-    <span class="m-l-5" (click)="copyValue()"
-      ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
-    ></span>
+    <button
+      mat-icon-button
+      class="copy-btn m-l-5"
+      (click)="copyValue(); $event.stopPropagation()"
+      [attr.aria-label]="'labels.text.Copy Account Number' | translate"
+    >
+      <fa-icon icon="copy" size="sm" [title]="'labels.text.Copy Account Number' | translate"></fa-icon>
+    </button>
   }
   @if (accountType) {
     <span class="m-l-5">
@@ -21,8 +26,13 @@
     <span class="m-l-5">{{ accountNo }}</span>
   }
   @if (displayR && iconVisible) {
-    <span class="m-l-3" (click)="copyValue()"
-      ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
-    ></span>
+    <button
+      mat-icon-button
+      class="copy-btn m-l-3"
+      (click)="copyValue(); $event.stopPropagation()"
+      [attr.aria-label]="'labels.text.Copy Account Number' | translate"
+    >
+      <fa-icon icon="copy" size="sm" [title]="'labels.text.Copy Account Number' | translate"></fa-icon>
+    </button>
   }
 </span>

src/app/shared/account-number/account-number.component.scss

@@ -5,3 +5,29 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+
+button.copy-btn {
+  border: none;
+  opacity: var(--mdc-icon-button-disabled-icon-opacity, 0.7);
+  transition:
+    opacity 0.15s ease-in-out,
+    transform 0.1s ease-in-out;
+
+  .mat-mdc-button-persistent-ripple,
+  .mat-ripple {
+    opacity: 0.3;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    transform: scale(0.85);
+  }
+
+  &:focus-visible {
+    outline: 1px dashed var(--mdc-outlined-button-outline-color, rgb(255 255 255 / 40%));
+    outline-offset: 8px;
+  }
+}