Use html buttons to allow keyboard navigation (#1242)

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">

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">

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>