From 7232ff68f8fa0bd77e010811eb336fb8318d1c57 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Wed, 10 Jul 2024 00:33:47 +0530
Subject: [PATCH] user_card_popover: Enable keyboard nav for custom field copy
 buttons.

---
 web/src/user_card_popover.js                  |  2 +-
 web/styles/popovers.css                       | 47 +++++++++----------
 .../user_card_popover_custom_fields.hbs       |  4 +-
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/web/src/user_card_popover.js b/web/src/user_card_popover.js
index 1286f72b1e..72d59a2790 100644
--- a/web/src/user_card_popover.js
+++ b/web/src/user_card_popover.js
@@ -754,7 +754,7 @@ function register_click_handlers() {
         user_profile.show_user_profile(user, "manage-profile-tab");
     });
 
-    new ClipboardJS(".copy-custom-field-url", {
+    new ClipboardJS(".copy-custom-profile-field-link", {
         text(trigger) {
             return $(trigger).parent().find(".custom-profile-field-link").attr("href");
         },
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 212ebb51f8..08641e48f7 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -159,10 +159,6 @@
             text-decoration: underline;
         }
     }
-
-    ~ i {
-        margin-left: auto;
-    }
 }
 
 .custom-user-url-field {
@@ -992,31 +988,34 @@ ul.popover-group-menu-member-list {
         white-space: nowrap;
         overflow: hidden;
     }
+}
 
-    #popover-menu-copy-email {
-        display: flex;
-        padding: 3px 2px 1px;
-        border-radius: 4px;
-        color: var(--color-text-item);
-        text-decoration: none;
+#popover-menu-copy-email,
+.copy-custom-profile-field-link {
+    display: flex;
+    padding: 3px 2px 1px;
+    border-radius: 4px;
+    color: var(--color-text-item);
+    text-decoration: none !important;
+    margin-left: auto;
 
-        &.hide_copy_icon {
-            display: none;
-        }
+    &.hide_copy_icon {
+        display: none;
+    }
 
-        &:hover {
-            color: var(--color-copy-btn-hover);
-            background-color: var(--color-copy-btn-bg-hover);
-        }
+    &:hover {
+        color: var(--color-copy-btn-hover) !important;
+        background-color: var(--color-copy-btn-bg-hover);
+    }
 
-        &:active {
-            color: var(--color-copy-btn-active);
-            background-color: var(--color-copy-btn-bg-active);
-        }
+    &:active {
+        color: var(--color-copy-btn-active) !important;
+        background-color: var(--color-copy-btn-bg-active);
+    }
 
-        &:focus-visible {
-            outline-offset: 0;
-        }
+    &:focus-visible {
+        outline-offset: 0;
+        color: unset;
     }
 }
 
diff --git a/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs b/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
index 08013f5a2e..90d4d5fd26 100644
--- a/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
+++ b/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
@@ -4,7 +4,9 @@
             <a href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="custom-profile-field-value custom-profile-field-link tippy-zulip-tooltip" data-tippy-content="{{this.name}}" tabindex="0">
                 <span class="custom-profile-field-text">{{this.value}}</span>
             </a>
-            <i class="popover-menu-icon zulip-icon zulip-icon-copy tippy-zulip-tooltip copy-custom-field-url" data-tippy-content="{{t 'Copy URL' }}"></i>
+            <a role="menuitem" tabindex="0" class="popover-menu-link copy-custom-profile-field-link tippy-zulip-tooltip" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
+                <i class="popover-menu-icon zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+            </a>
         {{else if this.is_external_account}}
             <a href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="custom-profile-field-value custom-profile-field-link tippy-zulip-tooltip" data-tippy-content="{{this.name}}" tabindex="0">
                 {{#if (eq this.subtype "github") }}