chore: refactor copy and share components for better accessibility 🪄✨

components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,33 +1,55 @@
-import useCopyToClipboard from 'hooks/useCopyToClipboard'
-import React from 'react'
-import { FaRegCopy } from 'react-icons/fa'
-import { Tooltip } from 'react-tooltip'
+import useCopyToClipboard from "hooks/useCopyToClipboard";
+import React from "react";
+import { FaRegCopy, FaCheckSquare } from "react-icons/fa";
+import { Tooltip } from "react-tooltip";
 
 type CopyToClipboardProps = {
-  url: string
-}
+  url: string;
+};
 
 export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
-  const [copyToClipboard, { success }] = useCopyToClipboard()
+  const [copyToClipboard, { success }] = useCopyToClipboard();
 
   function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) {
-    e.stopPropagation()
-    copyToClipboard(url)
+    e.stopPropagation();
+    copyToClipboard(url);
   }
 
   return (
-    <div
-      className="dropdown dropdown-left dropdown-hover">
-      <div style={{ position: 'relative' }}>
-      <button data-tooltip-id="copy-tooltip" data-tooltip-content={success ? 'Copied!' : 'Copy'} data-tooltip-place="top">
-      <FaRegCopy
-          size={'1.3rem'}
-          className="text-theme-primary cursor-pointer"
-          onClick={(e) => handleCopy(e)}
-        />
+    <div className="dropdown dropdown-left dropdown-hover">
+      <div style={{ position: "relative" }}>
+        <button
+          data-tooltip-id="copy-tooltip"
+          data-tooltip-content={success ? "Copied!" : "Copy"}
+          data-tooltip-place="top"
+        >
+          {success ? ( // Render the FaCheckSquare icon if success is true
+            <FaCheckSquare
+              size={"1.3rem"}
+              className="text-theme-primary cursor-pointer"
+              onClick={(e) => handleCopy(e)}
+              aria-label="Link copied" // Add aria-label for accessibility
+            />
+          ) : (
+            <FaRegCopy // Otherwise, render the default FaRegCopy icon
+              size={"1.3rem"}
+              className="text-theme-primary cursor-pointer"
+              onClick={(e) => handleCopy(e)}
+              aria-label="Copy link to clipboard" // Add aria-label for accessibility
+            />
+          )}
         </button>
-      <Tooltip id='copy-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
+        <Tooltip
+          id="copy-tooltip"
+          style={{
+            backgroundColor: "#8b5cf6",
+            fontSize: "13px",
+            paddingLeft: "6px",
+            paddingRight: "6px",
+            paddingTop: "2px",
+            paddingBottom: "2px",
+          }}
+        />
       </div>
     </div>
-  )
-}
+  );

components/Share/Share.tsx

@@ -1,66 +1,64 @@
-import React, { useState } from 'react'
-import { FiShare2 } from 'react-icons/fi'
-import { Tooltip } from 'react-tooltip'
+import React from "react";
+import { FiShare2 } from "react-icons/fi";
+import { Tooltip } from "react-tooltip";
 
 type ShareProps = {
-  url: string
-  title: string
-}
+  url: string;
+  title: string;
+};
 
 export const Share: React.FC<ShareProps> = ({ url, title }) => {
-  const [showShareOptions, setShowShareOptions] = useState(false)
-
   async function handleShare() {
     if (navigator.share) {
       try {
         await navigator.share({
           title: title,
           url: url,
-        })
+        });
       } catch (error) {
-        console.error('Error sharing:', error)
+        console.error("Error sharing:", error);
       }
     } else {
-      console.log('Web Share API not supported on this browser.')
+      console.log("Web Share API not supported on this browser.");
       // Fallback behavior when Web Share API is not supported (e.g., open a new tab with the URL)
-      window.open(url, '_blank')
+      window.open(url, "_blank");
     }
   }
 
   return (
     <div
       style={{
-        position: 'relative',
-        display: 'inline-block',
+        position: "relative",
+        display: "inline-block",
       }}
     >
-      <button data-tooltip-id="share-tooltip" data-tooltip-content="Share" data-tooltip-place="bottom">
-      <FiShare2
-        size={'1.2rem'}
-        className="text-theme-primary cursor-pointer"
-        onClick={handleShare}
+      <button
+        data-tooltip-id="share-tooltip"
+        data-tooltip-content="Share"
+        data-tooltip-place="bottom"
+        aria-label="Share this link"
+        role="button"
+      >
+        <FiShare2
+          size={"1.2rem"}
+          className="text-theme-primary cursor-pointer"
+          onClick={handleShare}
+          aria-hidden="true"
+        />
+      </button>
+      <Tooltip
+        id="share-tooltip"
+        style={{
+          backgroundColor: "#8b5cf6",
+          fontSize: "13px",
+          paddingLeft: "6px",
+          paddingRight: "6px",
+          paddingTop: "2px",
+          paddingBottom: "2px",
+        }}
       />
-        </button>
-      <Tooltip id='share-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
-
-      {showShareOptions && (
-        <p
-          className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1"
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            zIndex: 1,
-            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-            cursor: 'default',
-          }}
-        >
-          Share
-        </p>
-      )}
     </div>
-  )
-}
+  );
+};
 
-export default Share
+export default Share;