feat: use <button> to improve a11y and keyboard navigation experience (#74)

app/components/common/SearchRecipe.vue

@@ -89,9 +89,9 @@ const filteredRecipes = computedAsync(async () => {
                     @click="keyword = ''"
                   />
                 </div>
-                <div op="70" ml-2 inline-flex cursor-pointer text-base @click="closeModal">
+                <button op="70" ml-2 inline-flex cursor-pointer text-base @click="closeModal">
                   取消
-                </div>
+                </button>
               </DialogTitle>
               <div flex="~ col grow" overflow="auto" class="mt-2" text-xs>
                 <DishTag v-for="item, i in filteredRecipes" :key="i" :dish="item" />

app/components/tags/DateTag.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    class="rounded pureTag tagSize"
+    p="x-2"
+    border="~ yellow-200 dark:yellow-800"
+    :bg="'yellow-300 opacity-20'"
+    :text="'yellow-800 dark:yellow-200'"
+  >
+    <slot />
+  </div>
+</template>

app/components/tags/MeatTag.vue

@@ -5,12 +5,12 @@ defineProps<{
 </script>
 
 <template>
-  <span
+  <button
     class="meat-tag rounded tag" p="x-2"
     border="~ red-200 dark:red-800"
     :bg="active ? 'red-500 opacity-90' : 'red-300 opacity-20'"
     :text="active ? 'red-100' : 'red-800 dark:red-200'"
   >
     <slot />
-  </span>
+  </button>
 </template>

app/components/tags/StapleTag.vue

@@ -5,11 +5,11 @@ defineProps<{
 </script>
 
 <template>
-  <span
+  <button
     class="rounded tag" p="x-2" border="~ yellow-200 dark:yellow-800"
     :bg="active ? 'yellow-500 dark:yellow-600 opacity-100' : 'yellow-300 opacity-20'"
     :text="active ? 'yellow-100' : 'yellow-800 dark:yellow-200'"
   >
     <slot />
-  </span>
+  </button>
 </template>

app/components/tags/ToolTag.vue

@@ -5,12 +5,12 @@ defineProps<{
 </script>
 
 <template>
-  <span
+  <button
     class="rounded tag" p="x-2"
     border="~ stone-200 dark:stone-600"
     :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-5'"
     :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
   >
     <slot />
-  </span>
+  </button>
 </template>

app/components/tags/VegetableTag.vue

@@ -5,12 +5,12 @@ defineProps<{
 </script>
 
 <template>
-  <span
+  <button
     class="vegetable-tag rounded tag" p="x-2"
     border="~ green-200 dark:green-800"
     :bg="active ? 'green-600 opacity-90' : 'green-300 opacity-20'"
     :text="active ? 'green-100' : 'green-800 dark:green-200'"
   >
     <slot />
-  </span>
+  </button>
 </template>

app/pages/recipes/history.vue

@@ -16,21 +16,21 @@ function clearAllHistory() {
 
 <template>
   <div pt-2>
-    <div
+    <button
       text="blue-900 dark:blue-200"
       bg="blue-300 op-20 hover:(blue-800 op-20) dark:hover:(blue-200 op-20)"
       class="inline-flex items-center justify-center border border-transparent rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
       @click="clearAllHistory"
     >
-      <div i-ri-eraser-line />
+      <span i-ri-eraser-line />
       <span class="ml-1">清空记录</span>
-    </div>
+    </button>
 
     <div flex="~ col">
       <div v-for="history in recipeHistories" :key="history.recipe.name" mt-2>
-        <StapleTag :active="false">
+        <DateTag>
           {{ dayjs(history.time).format('YYYY-MM-DD HH:mm:ss') }}
-        </StapleTag>
+        </DateTag>
         <DishTag :dish="history.recipe" />
       </div>
     </div>

app/styles/index.scss

@@ -58,7 +58,7 @@ hr {
   opacity: 0.1;
 }
 
-.tag {
+.tag, .tagSize {
   margin: 4px;
   padding: 2px 4px;
   // border: 1px solid var(--c-text);

uno.config.ts

@@ -20,6 +20,7 @@ tools.forEach((item) => {
 export default defineConfig({
   shortcuts: [
     ['tag', 'text-sm cursor-pointer inline-flex justify-center items-center transition shadow hover:shadow-md'],
+    ['pureTag', 'text-sm inline-flex justify-center items-center transition shadow'],
     ['btn', 'text-sm px-4 py-1 rounded inline-block bg-blue-600 text-white cursor-pointer hover:bg-blue-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
   ],
   presets: [