From 4cad8681752dd685a64f97879f7c4e8af150e435 Mon Sep 17 00:00:00 2001
From: Scott Callaway <github@scottcallaway.co.uk>
Date: Thu, 27 Feb 2025 18:04:03 +0000
Subject: [PATCH] feat: use HTML button element for copying to clipboard
 (#2720)

It's much more semantic to use the `<button />` HTML component rather
than trying to build the same functionality out of a `<div />` so that's
what is updated here.

This also updates some of the classes that were on the button as they're
no longer required and removes some commented out code that doesn't need
to be left around.

There was also a `<span />` with the contents "Copy" that I couldn't
work out when it was meant to be displayed, so I swapped that over to an
HTML tooltip on the `<button />`.
---
 frontend/src/components/ui/code-copy-button.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ui/code-copy-button.tsx b/frontend/src/components/ui/code-copy-button.tsx
index 6c79ce79..edcf0d0e 100644
--- a/frontend/src/components/ui/code-copy-button.tsx
+++ b/frontend/src/components/ui/code-copy-button.tsx
@@ -37,10 +37,6 @@ export default function CodeCopyButton({
         );
       }, 500);
     }
-
-    // toast.success(`copied ${type} to clipboard`, {
-    //   icon: <ClipboardCheck className="h-4 w-4" />,
-    // });
   };
 
   return (
@@ -49,17 +45,17 @@ export default function CodeCopyButton({
         <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm">
           {!isMobile && children ? children : "Copy install command"}
         </div>
-        <div
-          className={cn(" right-0 cursor-pointer bg-muted px-3 py-4")}
+        <button
           onClick={() => handleCopy("install command", children)}
+          className={cn("bg-muted px-3 py-4")}
+          title="Copy"
         >
           {hasCopied ? (
             <CheckIcon className="h-4 w-4" />
           ) : (
             <ClipboardIcon className="h-4 w-4" />
           )}
-          <span className="sr-only">Copy</span>
-        </div>
+        </button>
       </Card>
     </div>
   );