copier test

AngelProtocolFinance · Sep 3, 2024 · 51e785e · 51e785e
1 parent e6f2d84
commit 51e785e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/components/Copier/Copier.test.tsx b/src/components/Copier/Copier.test.tsx
@@ -33,9 +33,9 @@ describe("Copier component test:", () => {
     );
 
     // Expects the button to change appearance once clicked
-    expect(await screen.findByTitle("Copied!")).toBeInTheDocument();
+    expect(await screen.findByLabelText(/copied/i)).toBeInTheDocument();
 
     // Expects the button to revert back to it's original appearance
-    expect(await screen.findByTitle("Copy Address")).toBeInTheDocument();
+    expect(await screen.findByLabelText(/copy address/i)).toBeInTheDocument();
   });
 });
diff --git a/src/components/Copier/Copier.tsx b/src/components/Copier/Copier.tsx
@@ -16,22 +16,32 @@ export default function Copier({ text, classes, size, children }: Props) {
   const { handleCopy, copied } = useCopier(text);
   const { container, icon } = unpack(classes);
   return (
-    <button className={container} type="button" onClick={handleCopy}>
+    <button
+      className={container + " relative"}
+      type="button"
+      onClick={handleCopy}
+    >
       {(copied && (
         <Icon
           type="Check"
           className={`${icon} cursor-default hover:text-current`}
-          aria-label="Copied!"
           size={size?.check}
+          aria-labelledby="copied"
         />
       )) || (
         <Icon
           type="Copy"
           className={`${icon} cursor-pointer`}
-          aria-label="Copy Address"
           size={size?.copy}
+          aria-labelledby="copy"
         />
       )}
+      <span id="copied" className="invisible absolute">
+        Copied!
+      </span>
+      <span id="copy" className="invisible absolute">
+        Copy Address
+      </span>
       {children}
     </button>
   );