fix(a11y): use buttons for grid items

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;

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>
   );
 };