From 228e2187e3e058988301f226f58fa9a004a91e54 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Fri, 28 Apr 2023 14:53:11 -0400
Subject: [PATCH 1/2] =?UTF-8?q?Copy=20button=20text=20=E2=86=92=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Converts to icon button
- Adds accessibility label field
---
 frontend/src/components/copy-button.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/copy-button.ts b/frontend/src/components/copy-button.ts
index 77856b75..9959ebdb 100644
--- a/frontend/src/components/copy-button.ts
+++ b/frontend/src/components/copy-button.ts
@@ -40,12 +40,15 @@ export class CopyButton extends LitElement {
 
   render() {
     return html`
-      <sl-button
-        size="small"
-        @click=${this.onClick}
-        ?disabled=${!this.value && !this.getValue}
-        >${this.isCopied ? msg("Copied") : msg("Copy")}</sl-button
-      >
+      <sl-tooltip content=${this.isCopied ? msg("Copied to clipboard!") : msg("Copy")}>
+        <sl-icon-button
+          size="small"
+          name=${this.isCopied ? "check-lg" : "files"}
+          label=${msg("Copy to clipboard")}
+          @click=${this.onClick}
+          ?disabled=${!this.value && !this.getValue}
+          ></sl-icon-button>
+      </sl-tooltip>
     `;
   }
 

From 1d7518af0706337d5ee0ee9182ed0bffb46603f0 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Sat, 29 Apr 2023 17:17:49 -0400
Subject: [PATCH 2/2] Ensure that button returns to its default state

uses the .blur() method to set the icon button back to its unfocused state after the set time
---
 frontend/src/components/copy-button.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/copy-button.ts b/frontend/src/components/copy-button.ts
index 9959ebdb..8ef80d0d 100644
--- a/frontend/src/components/copy-button.ts
+++ b/frontend/src/components/copy-button.ts
@@ -62,6 +62,8 @@ export class CopyButton extends LitElement {
 
     this.timeoutId = window.setTimeout(() => {
       this.isCopied = false;
+      const button = this.shadowRoot?.querySelector('sl-icon-button');
+      button?.blur(); // Remove focus from the button to set it back to its default state
     }, 3000);
   }
 }