From 78fa350ced7b09099701100845bd4e85f223413d Mon Sep 17 00:00:00 2001
From: George Chen <cjzjzzz@gmail.com>
Date: Sun, 12 Jan 2025 01:35:19 +0800
Subject: [PATCH] feat: use <button> to improve a11y and keyboard navigation
 experience (#74)

---
 app/components/common/SearchRecipe.vue |  4 ++--
 app/components/tags/DateTag.vue        | 11 +++++++++++
 app/components/tags/MeatTag.vue        |  4 ++--
 app/components/tags/StapleTag.vue      |  4 ++--
 app/components/tags/ToolTag.vue        |  4 ++--
 app/components/tags/VegetableTag.vue   |  4 ++--
 app/pages/recipes/history.vue          | 10 +++++-----
 app/styles/index.scss                  |  2 +-
 uno.config.ts                          |  1 +
 9 files changed, 28 insertions(+), 16 deletions(-)
 create mode 100644 app/components/tags/DateTag.vue

diff --git a/app/components/common/SearchRecipe.vue b/app/components/common/SearchRecipe.vue
index 5ca7136..a27961d 100644
--- a/app/components/common/SearchRecipe.vue
+++ b/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" />
diff --git a/app/components/tags/DateTag.vue b/app/components/tags/DateTag.vue
new file mode 100644
index 0000000..83dce29
--- /dev/null
+++ b/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>
diff --git a/app/components/tags/MeatTag.vue b/app/components/tags/MeatTag.vue
index 1ca3bb3..3568b13 100644
--- a/app/components/tags/MeatTag.vue
+++ b/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>
diff --git a/app/components/tags/StapleTag.vue b/app/components/tags/StapleTag.vue
index 786a75b..de12e8f 100644
--- a/app/components/tags/StapleTag.vue
+++ b/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>
diff --git a/app/components/tags/ToolTag.vue b/app/components/tags/ToolTag.vue
index 544fa5b..557ba92 100644
--- a/app/components/tags/ToolTag.vue
+++ b/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>
diff --git a/app/components/tags/VegetableTag.vue b/app/components/tags/VegetableTag.vue
index 3fe730f..2cbdbe4 100644
--- a/app/components/tags/VegetableTag.vue
+++ b/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>
diff --git a/app/pages/recipes/history.vue b/app/pages/recipes/history.vue
index 6511d97..a3d4138 100644
--- a/app/pages/recipes/history.vue
+++ b/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>
diff --git a/app/styles/index.scss b/app/styles/index.scss
index b7edec6..0e9f263 100644
--- a/app/styles/index.scss
+++ b/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);
diff --git a/uno.config.ts b/uno.config.ts
index e7f3a4c..5997ebf 100644
--- a/uno.config.ts
+++ b/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: [