From 897afa7e27bd36908ac8bd2cef0ab4899be0f7b3 Mon Sep 17 00:00:00 2001
From: cdrani <charlesdrani@gmail.com>
Date: Mon, 14 Aug 2023 00:22:06 -0600
Subject: [PATCH] fix: replace div with button for a11y

---
 models/icon.js | 19 ++++++++++++-------
 styles.css     |  9 ---------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/models/icon.js b/models/icon.js
index fff84243..ddbcb7ed 100644
--- a/models/icon.js
+++ b/models/icon.js
@@ -11,18 +11,23 @@ export default class Icon {
 
     #createIcon() {
         return `
-            <div id="chorus-icon" class="chorus-hover-white" role="snip" aria-label="Edit Snip">
+            <button 
+                role="snip"
+                id="chorus-icon"
+                aria-label="Edit Snip"
+                class="chorus-hover-white"
+                style="padding:0 6px;border:none;background:none;display:flex;justify-content:center;align-items:center;"
+            >
                 <svg
-                    xmlns="http://www.w3.org/2000/svg"
                     fill="none"
+                    width="1.25rem"
+                    height="1.25rem"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    width="2rem"
-                    height="2rem"
-                    style="padding: 0.375rem;"
-                    preserveAspectRatio="xMidYMid meet"
                     id="chorus-highlight"
+                    preserveAspectRatio="xMidYMid meet"
+                    xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
                         stroke-linecap="round"
@@ -30,7 +35,7 @@ export default class Icon {
                         d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
                     />
                 </svg>
-            </div>
+            </button>
         `
     }
 }
diff --git a/styles.css b/styles.css
index 5c6b6bb7..20e5e249 100644
--- a/styles.css
+++ b/styles.css
@@ -27,15 +27,6 @@
     position: absolute;
 }
 
-#chorus-icon {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    cursor: pointer;
-}
-
 #chorus-snip-controls {
     border: 1px dashed #1ed760;
 }