Merge pull request #44 from besscroft/dev

feat: 无障碍优化

Author: besscroft

.env.local renamed to .env

@@ -3,6 +3,6 @@ node_modules
 dist
 .output
 .nuxt
-.env
+.env.local
 .idea/
 .vercel/

.gitignore

@@ -13,6 +13,10 @@ Kamera
 图片存储兼容 S3 API、AList API、支持 CDN 配置。同时适配了 PC 和移动端的样式与交互。
 今天又是想当二次元摄影高手的一天呢！
 
+### 无障碍支持
+
+已经在尽力支持了，主要基于 [WAI-ARIA 规范](https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)，有爱，无障碍！
+
 ### 如何部署
 
 你可以 Fork 后点击下面的按钮来一键部署到 Vercel（自定义配置及容器部署请往下看）

README.md

@@ -81,11 +81,11 @@ onUnmounted(() => {
   >
     <template #header="{ close }">
       <div flex flex-row justify-between>
-        <span>点击图片预览</span>
+        <span aria-label="点击下方图片预览">点击图片预览</span>
         <div flex space-x-3>
           <ClientOnly>
             <UPopover mode="hover">
-              <div i-carbon-overflow-menu-horizontal cursor-pointer />
+              <div i-carbon-overflow-menu-horizontal cursor-pointer aria-label="更多操作按钮" />
               <template #panel>
                 <div p-2>
                   <div
@@ -95,6 +95,7 @@ onUnmounted(() => {
                     transition-colors duration-200 transform cursor-pointer
                     hover="bg-gray-100 dark:(bg-gray-700 text-white)"
                     @click="shareHandle(obj?.detail, obj?.url)"
+                    aria-label="分享"
                   >
                     <span i-carbon-crowd-report text-xl me-4 />分享
                   </div>
@@ -104,6 +105,7 @@ onUnmounted(() => {
                     transition-colors duration-200 transform cursor-pointer
                     hover="bg-gray-100 dark:(bg-gray-700 text-white)"
                     @click="copyHandle(obj?.url)"
+                    aria-label="复制链接"
                   >
                     <span i-carbon-copy text-xl me-4 />复制链接
                   </div>
@@ -112,7 +114,7 @@ onUnmounted(() => {
             </UPopover>
           </ClientOnly>
 
-          <div i-carbon-close-large cursor-pointer @click="close" />
+          <div i-carbon-close-large cursor-pointer @click="close" aria-label="关闭当前图片详情" />
         </div>
       </div>
     </template>

components/Canvas.vue

@@ -96,6 +96,7 @@ onBeforeUnmount(() => {
                   transition-colors duration-200 transform
                   hover="bg-gray-100 dark:(bg-gray-700 text-white)"
                   :class="route.path === item.to ? 'text-custom-green' : 'text-gray-700 dark:text-gray-200'"
+                  :aria-label="item.title"
                 >
                   <span :class="item.icon" text-xl me-4 />{{ item.title }}
                 </NuxtLink>
@@ -109,6 +110,7 @@ onBeforeUnmount(() => {
                   transition-colors duration-200 transform
                   hover="bg-gray-100 dark:(bg-gray-700 text-white)"
                   :class="route.path === item.to ? 'text-custom-green' : 'text-gray-700 dark:text-gray-200'"
+                  :aria-label="item.title"
                 >
                   <span :class="item.icon" text-xl me-4 />{{ item.title }}
                 </NuxtLink>

components/Header.vue

@@ -4,17 +4,17 @@ const isOpen = ref(false)
 
 <template>
   <div fixed inset-x-0 bottom-0 z-100 h-14 bg-white dark:bg-custom-black flex flex-row border-t-1>
-    <NuxtLink to="/" flex flex-row items-center place-content-center h-full flex-1>
+    <NuxtLink to="/" flex flex-row items-center place-content-center h-full flex-1 aria-label="首页">
       <div i-carbon-aperture />
     </NuxtLink>
-    <NuxtLink to="/admin" flex flex-row items-center place-content-center h-full flex-1>
+    <NuxtLink to="/admin" flex flex-row items-center place-content-center h-full flex-1 aria-label="控制台">
       <div i-carbon-earth-southeast-asia-filled />
     </NuxtLink>
     <NavBottomMenu v-slot="{ toggleVisible, show }" v-model="isOpen" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
       <button
         flex items-center place-content-center h-full flex-1 class="select-none"
         :class="show ? '!text-primary' : ''"
-        aria-label="More menu"
+        aria-label="更多菜单"
         @click="toggleVisible"
       >
         <span :class="show ? 'i-carbon-close' : 'i-carbon-app'" />

components/NavBottom.vue

@@ -192,6 +192,7 @@ onBeforeUnmount(() => {
               transition-colors duration-200 transform
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               :class="route.path === item.to ? 'text-custom-green' : 'text-gray-700 dark:text-gray-200'"
+              :aria-label="item.title"
             >
               <span :class="item.icon" text-xl me-4 />{{ item.title }}
             </NuxtLink>
@@ -208,6 +209,7 @@ onBeforeUnmount(() => {
               transition-colors duration-200 transform
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               :class="route.path === item.to ? 'text-custom-green' : 'text-gray-700 dark:text-gray-200'"
+              :aria-label="item.title"
             >
               <span :class="item.icon" text-xl me-4 />{{ item.title }}
             </NuxtLink>

components/NavBottomMenu.vue

@@ -13,19 +13,19 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.9.0",
-    "@element-plus/nuxt": "^1.0.7",
+    "@antfu/eslint-config": "^2.11.0",
+    "@element-plus/nuxt": "^1.0.8",
     "@iconify-json/carbon": "^1.1.31",
     "@nuxt/eslint": "^0.3.0-beta.2",
     "@nuxtjs/color-mode": "^3.3.3",
     "@nuxtjs/device": "^3.1.1",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@pinia/nuxt": "^0.5.1",
-    "@unocss/eslint-config": "^0.58.6",
-    "@unocss/nuxt": "^0.58.6",
+    "@unocss/eslint-config": "^0.58.7",
+    "@unocss/nuxt": "^0.58.7",
     "@vueuse/nuxt": "^10.9.0",
     "consola": "^3.2.3",
-    "element-plus": "^2.6.1",
+    "element-plus": "^2.6.2",
     "eslint": "^8.57.0",
     "eslint-plugin-format": "^0.1.0",
     "nuxt": "^3.11.1",
@@ -35,12 +35,12 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
-    "@nuxt/ui": "^2.14.2",
-    "aws-sdk": "^2.1582.0",
+    "@nuxt/ui": "^2.15.0",
+    "aws-sdk": "^2.1586.0",
     "crypto-js": "^4.2.0",
     "exifreader": "^4.21.1",
     "jsonwebtoken": "^9.0.2",
-    "postgres": "^3.4.3",
+    "postgres": "^3.4.4",
     "vue-waterfall-plugin-next": "^2.4.3"
   }
 }

package.json

@@ -200,7 +200,7 @@ definePageMeta({
   <div>
     <div p2 md:p8 pb-20>
       <div flex items-center justify-center justify-between w-full mt-4>
-        <el-select v-model="type" m-2 max-w-80 placeholder="类型(查询条件)" @change="dataHandle">
+        <el-select v-model="type" m-2 max-w-80 placeholder="类型(查询条件)" @change="dataHandle" aria-label="类型(查询条件)选择下拉框">
           <el-option
             v-for="item in imgTypeOptions"
             :key="item.value"

pages/admin/list.vue

@@ -246,15 +246,15 @@ definePageMeta({
   <div w-full max-h-full flex flex-col items-center justify-center mx-auto p2 md:p8 pb-20 class="md:w-4/5 lg:w-3/5">
     <div my-6 md:my-16 mx-auto w-full rounded-md bg-white dark:bg-gray-800 shadow p-2>
       <div flex items-center justify-center pb-2>
-        <el-select v-model="storage" m-2 placeholder="请选择存储">
+        <el-select v-model="storage" m-2 placeholder="请选择存储" aria-label="存储选择下拉框">
           <el-option
             v-for="item in storageOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           />
         </el-select>
-        <el-select v-model="imgData.type" m-2 placeholder="请选择图片类别">
+        <el-select v-model="imgData.type" m-2 placeholder="请选择图片类别" aria-label="图片类别选择下拉框">
           <el-option
             v-for="item in imgTypeOptions"
             :key="item.value"