From 51e785e25b5c31040461e2b53b41ad68e99dfc5f Mon Sep 17 00:00:00 2001
From: ap-justin <89639563+ap-justin@users.noreply.github.com>
Date: Wed, 28 Aug 2024 22:51:02 +0800
Subject: [PATCH] copier test

---
 src/components/Copier/Copier.test.tsx |  4 ++--
 src/components/Copier/Copier.tsx      | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Copier/Copier.test.tsx b/src/components/Copier/Copier.test.tsx
index d341668bf3..316561a58c 100644
--- 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
index dbca135081..67cf01d3ab 100644
--- 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>
   );