From 687611b6827c77faeb2884e958ef115aed4e6325 Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Sat, 8 Oct 2022 12:51:21 +0200
Subject: [PATCH] Use html buttons to allow keyboard navigation (#1242)

---
 web/src/components/atomic/IconButton.vue          | 5 +++--
 web/src/components/layout/header/ActiveBuilds.vue | 5 +++--
 web/src/components/tabs/Tabs.vue                  | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/src/components/atomic/IconButton.vue b/web/src/components/atomic/IconButton.vue
index 826effcc4..6e54dd146 100644
--- a/web/src/components/atomic/IconButton.vue
+++ b/web/src/components/atomic/IconButton.vue
@@ -1,7 +1,8 @@
 <template>
-  <div
+  <button
     :disabled="disabled"
     class="relative flex items-center justify-center text-color px-1 py-1 rounded-full bg-transparent hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-700 cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
+    type="button"
     @click="doClick"
   >
     <Icon :name="icon" />
@@ -14,7 +15,7 @@
     >
       <Icon name="loading" class="animate-spin" />
     </div>
-  </div>
+  </button>
 </template>
 
 <script lang="ts">
diff --git a/web/src/components/layout/header/ActiveBuilds.vue b/web/src/components/layout/header/ActiveBuilds.vue
index 2a3d18983..eca17afca 100644
--- a/web/src/components/layout/header/ActiveBuilds.vue
+++ b/web/src/components/layout/header/ActiveBuilds.vue
@@ -1,9 +1,10 @@
 <template>
-  <div
+  <button
     class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white"
     :class="{
       spinner: activeBuilds.length !== 0,
     }"
+    type="button"
     @click="toggle"
   >
     <div class="spinner-ring ring1" />
@@ -11,7 +12,7 @@
     <div class="spinner-ring ring3" />
     <div class="spinner-ring ring4" />
     {{ activeBuilds.length || 0 }}
-  </div>
+  </button>
 </template>
 
 <script lang="ts">
diff --git a/web/src/components/tabs/Tabs.vue b/web/src/components/tabs/Tabs.vue
index 981ce4847..d2dc7e4d1 100644
--- a/web/src/components/tabs/Tabs.vue
+++ b/web/src/components/tabs/Tabs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col">
     <div class="flex w-full md:pt-4 flex-wrap">
-      <div
+      <button
         v-for="tab in tabs"
         :key="tab.id"
         class="w-full py-2 md:w-auto md:pt-0 md:pb-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
@@ -9,12 +9,13 @@
           'border-gray-400 dark:border-gray-600': activeTab === tab.id,
           'border-transparent': activeTab !== tab.id,
         }"
+        type="button"
         @click="selectTab(tab)"
       >
         <Icon v-if="activeTab === tab.id" name="chevron-right" class="md:hidden" />
         <Icon v-else name="blank" class="md:hidden" />
         <span>{{ tab.title }}</span>
-      </div>
+      </button>
     </div>
 
     <div>