AMAZEHOME/cook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
George Chen
2025-01-12 01:35:19 +08:00
committed by GitHub
parent 11283f6f94
commit 78fa350ced
9 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/common/SearchRecipe.vue
View File

@@ -89,9 +89,9 @@ const filteredRecipes = computedAsync(async () => {
@click="keyword = ''" @click="keyword = ''"
/> />
</div> </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> </DialogTitle>
<div flex="~ col grow" overflow="auto" class="mt-2" text-xs> <div flex="~ col grow" overflow="auto" class="mt-2" text-xs>
<DishTag v-for="item, i in filteredRecipes" :key="i" :dish="item" /> <DishTag v-for="item, i in filteredRecipes" :key="i" :dish="item" />

11
app/components/tags/DateTag.vue Normal file
View File

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

4
app/components/tags/MeatTag.vue
View File

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

4
app/components/tags/StapleTag.vue
View File

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

4
app/components/tags/ToolTag.vue
View File

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

4
app/components/tags/VegetableTag.vue
View File

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

10
app/pages/recipes/history.vue
View File

@@ -16,21 +16,21 @@ function clearAllHistory() {
<template> <template>
<div pt-2> <div pt-2>
<div <button
text="blue-900 dark:blue-200" text="blue-900 dark:blue-200"
bg="blue-300 op-20 hover:(blue-800 op-20) dark:hover:(blue-200 op-20)" 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" 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" @click="clearAllHistory"
> >
<div i-ri-eraser-line /> <span i-ri-eraser-line />
<span class="ml-1">清空记录</span> <span class="ml-1">清空记录</span>
</div> </button>
<div flex="~ col"> <div flex="~ col">
<div v-for="history in recipeHistories" :key="history.recipe.name" mt-2> <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') }} {{ dayjs(history.time).format('YYYY-MM-DD HH:mm:ss') }}
</StapleTag> </DateTag>
<DishTag :dish="history.recipe" /> <DishTag :dish="history.recipe" />
</div> </div>
</div> </div>

2
app/styles/index.scss
View File

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

1
uno.config.ts
View File

@@ -20,6 +20,7 @@ tools.forEach((item) => {
export default defineConfig({ export default defineConfig({
shortcuts: [ shortcuts: [
['tag', 'text-sm cursor-pointer inline-flex justify-center items-center transition shadow hover:shadow-md'], ['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'], ['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: [ presets: [