From b16d9729dcbb8ae7c24610e9572c4e1b57d0befa Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 3 Feb 2024 23:17:14 +0100
Subject: [PATCH] UPD: Device button elements

---
 src/components/device/DeviceKeys.vue    | 8 ++++----
 src/components/device/DevicePreview.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/device/DeviceKeys.vue b/src/components/device/DeviceKeys.vue
index 26ee387..37ca323 100644
--- a/src/components/device/DeviceKeys.vue
+++ b/src/components/device/DeviceKeys.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="flex">
-    <div
+    <button
       v-for="(color, key) in keys"
       :key="key" :class="{'outline outline-white ' : key === selected,
       'hover:outline outline-zinc-400' : key !== selected}"
       class="aspect-square flex-1 rounded-[2px] flex items-center justify-center"
       :style="`box-shadow: 0 0 20px 0 ${color.hex()}`"
       @click="$emit('select', key)">
-      <div
+      <span
         class="font-heading text-2xl"
         :class="{'opacity-30 text-black': key!==selected}">{{ key }}
-      </div>
-    </div>
+      </span>
+    </button>
   </div>
 </template>
 
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 28b3ac9..9528931 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -24,7 +24,7 @@
         </span>
         </div>
       </div>
-      <div
+      <button
         class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto"
         :class="{'outline outline-white': selected==='ring',
         'hover:outline outline-zinc-400': selected!=='ring'}"