From 363e86fada32643eee8d8474c4344248f56b0efd Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Thu, 5 Dec 2024 00:54:29 -0700
Subject: [PATCH] fix(a11y): use buttons for grid items

---
 src/components/IconGrid/IconGrid.css     | 2 ++
 src/components/IconGrid/IconGridItem.tsx | 6 ++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 315c329..b2f7911 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -16,6 +16,8 @@
 
 .grid-item {
   display: flex;
+  appearance: none;
+  background: transparent;
   box-sizing: border-box;
   width: 160px;
   height: 160px;
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index 375a1d4..e5aee9c 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/src/components/IconGrid/IconGridItem.tsx
@@ -68,11 +68,10 @@ const IconGridItem = (props: IconGridItemProps) => {
   }, [originOffset]);
 
   return (
-    <motion.div
+    <motion.button
       className="grid-item"
       key={name}
       ref={ref}
-      tabIndex={0}
       style={{
         ...style,
         backgroundColor: isOpen ? "var(--background-layer)" : undefined,
@@ -80,7 +79,6 @@ const IconGridItem = (props: IconGridItemProps) => {
       custom={delayRef}
       transition={transition}
       variants={itemVariants}
-      onKeyPress={(e) => e.key === "Enter" && handleOpen()}
       onClick={handleOpen}
     >
       <Icon />
@@ -89,7 +87,7 @@ const IconGridItem = (props: IconGridItemProps) => {
         {isNew && <span className="badge new">•</span>}
         {isUpdated && <span className="badge updated">•</span>}
       </p>
-    </motion.div>
+    </motion.button>
   );
 };