fix: modified link behaviour to improve accessibility (#6284)

Author: vamsikrishnamathala

web/core/components/issues/issue-detail/links/link-item.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
+import { Pencil, Trash2, LinkIcon, Copy } from "lucide-react";
 import { EIssueServiceType } from "@plane/constants";
 import { TIssueServiceType } from "@plane/types";
 // ui
@@ -48,33 +48,33 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
         <div className="flex items-center gap-2.5 truncate flex-grow">
           <LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" />
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
-            <span
+            <a
+              href={linkDetail.url}
+              target="_blank"
+              rel="noopener noreferrer"
               className="truncate text-sm cursor-pointer flex-grow"
-              onClick={() => {
-                copyTextToClipboard(linkDetail.url);
-                setToast({
-                  type: TOAST_TYPE.SUCCESS,
-                  title: "Link copied!",
-                  message: "Link copied to clipboard",
-                });
-              }}
             >
               {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
-            </span>
+            </a>
           </Tooltip>
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
           <p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
             {calculateTimeAgoShort(linkDetail.created_at)}
           </p>
-          <a
-            href={linkDetail.url}
-            target="_blank"
-            rel="noopener noreferrer"
+          <span
+            onClick={() => {
+              copyTextToClipboard(linkDetail.url);
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Link copied!",
+                message: "Link copied to clipboard",
+              });
+            }}
             className="relative grid place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
           >
-            <ExternalLink className="h-3.5 w-3.5 stroke-[1.5]" />
-          </a>
+            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
+          </span>
           <CustomMenu
             ellipsis
             buttonClassName="text-custom-text-400 group-hover:text-custom-text-200"

web/core/components/modules/links/list-item.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+import { Copy, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // plane types
 import { ILinkDetails } from "@plane/types";
 // plane ui
@@ -45,12 +45,9 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
             <LinkIcon className="h-3 w-3 flex-shrink-0" />
           </span>
           <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
-            <span
-              className="cursor-pointer truncate text-xs"
-              onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
-            >
+            <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
               {link.title && link.title !== "" ? link.title : link.url}
-            </span>
+            </a>
           </Tooltip>
         </div>
 
@@ -68,14 +65,12 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
               <Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
             </button>
           )}
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="grid place-items-center p-1 hover:bg-custom-background-80"
+          <span
+            onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
+            className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
           >
-            <ExternalLink className="size-3 stroke-[1.5] text-custom-text-200" />
-          </a>
+            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
+          </span>
           {isEditingAllowed && (
             <button
               type="button"