feat: 增加無障礙標籤及ARIA屬性以改善可訪問性

src/App.vue

@@ -42,6 +42,7 @@
           <v-tab v-for="tab in tabs" :key="tab.path" border="sm" :to="tab.path" :value="tab.path">
             {{ tab.title }}
             <v-btn
+              aria-label="關閉頁籤"
               class="pl-2"
               color="grey"
               density="compact"
@@ -56,7 +57,7 @@
           </v-tab>
         </v-tabs>
 
-        <div class="flex-grow-1 overflow-auto" style="min-height: 0">
+        <div class="flex-grow-1 overflow-auto" style="min-height: 0" tabindex="0">
           <router-view v-slot="{ Component }">
             <keep-alive>
               <component :is="Component" :key="route.fullPath" />

src/components/layouts/main-layout/AppBarBreadcrumbCol.vue

@@ -17,7 +17,7 @@
         </v-btn>
       </template>
       <template #item="{ item }">
-        <div class="d-flex align-center ga-1">
+        <li class="d-flex align-center ga-1">
           <v-icon
             v-if="getBreadcrumbIcon(item)"
             class="mr-1"
@@ -25,7 +25,7 @@
             :icon="getBreadcrumbIcon(item)"
           />
           <span class="text-caption text-no-wrap">{{ getBreadcrumbTitle(item) }}</span>
-        </div>
+        </li>
       </template>
       <template #divider>
         <v-icon color="primary-variant" size="12" :icon="mdiChevronRight" />

src/components/layouts/main-layout/AppBarFavoritesCol.vue

@@ -35,7 +35,13 @@
         <span class="text-caption">{{ favoritesConfig.addLabel }}</span>
       </v-btn>
     </div>
-    <v-btn color="grey" size="small" variant="text" @click="emit('toggle-favorites-bar', false)">
+    <v-btn
+      aria-label="隱藏常用功能列"
+      color="grey"
+      size="small"
+      variant="text"
+      @click="emit('toggle-favorites-bar', false)"
+    >
       <v-icon :icon="mdiEyeOff" />
     </v-btn>
   </v-col>

src/components/layouts/main-layout/AppBarTopCol.vue

@@ -42,7 +42,11 @@
     <div v-if="features.showToolbarActions" class="top-actions">
       <slot name="actions">
         <!-- 通知 -->
-        <v-tooltip location="bottom" :text="toolbarActions.notificationsLabel">
+        <v-tooltip
+          location="bottom"
+          :text="toolbarActions.notificationsLabel"
+          :aria-label="toolbarActions.notificationsLabel"
+        >
           <template #activator="{ props: activatorProps }">
             <v-btn
               v-bind="activatorProps"
@@ -67,7 +71,11 @@
         </v-tooltip>
 
         <!-- 訊息 -->
-        <v-tooltip location="bottom" :text="toolbarActions.messagesLabel">
+        <v-tooltip
+          location="bottom"
+          :text="toolbarActions.messagesLabel"
+          :aria-label="toolbarActions.messagesLabel"
+        >
           <template #activator="{ props: activatorProps }">
             <v-btn
               v-bind="activatorProps"
@@ -110,7 +118,11 @@
         <!-- 設定 -->
         <v-menu :close-on-content-click="false" location="bottom end">
           <template #activator="{ props: menuProps }">
-            <v-tooltip location="bottom" :text="toolbarActions.settingsLabel">
+            <v-tooltip
+              location="bottom"
+              :text="toolbarActions.settingsLabel"
+              :aria-label="toolbarActions.settingsLabel"
+            >
               <template #activator="{ props: tooltipProps }">
                 <v-btn
                   v-bind="{ ...menuProps, ...tooltipProps }"
@@ -154,7 +166,7 @@
         </v-menu>
 
         <!-- 登出 -->
-        <v-tooltip location="bottom" :text="logoutLabel">
+        <v-tooltip location="bottom" :text="logoutLabel" :aria-label="logoutLabel">
           <template #activator="{ props: activatorProps }">
             <v-btn
               v-bind="activatorProps"
@@ -169,7 +181,12 @@
           </template>
         </v-tooltip>
 
-        <v-tooltip v-if="features.showThemeToggle" location="bottom" :text="themeToggleLabel">
+        <v-tooltip
+          v-if="features.showThemeToggle"
+          location="bottom"
+          :text="themeToggleLabel"
+          :aria-label="themeToggleLabel"
+        >
           <template #activator="{ props: activatorProps }">
             <v-btn
               v-bind="activatorProps"

src/components/layouts/main-layout/DrawerDesktopMenu.vue

@@ -9,6 +9,8 @@
         <template #activator="{ props: activatorProps }">
           <v-list-item
             v-bind="isShrink ? undefined : activatorProps"
+            role="listitem"
+            :aria-selected="undefined"
             :class="{ 'px-0': isShrink }"
             :link="isNavigable(item) && !!item.path"
             :to="isNavigable(item) ? item.path : undefined"
@@ -52,6 +54,8 @@
             <template #activator="{ props: subProps }">
               <v-list-item
                 v-bind="subProps"
+                role="listitem"
+                :aria-selected="undefined"
                 :link="isNavigable(subItem)"
                 :prepend-icon="subItem.icon || mdiMenuRight"
                 :to="isNavigable(subItem) ? subItem.path : undefined"
@@ -83,7 +87,7 @@
               @click="emitSelect(subSubItem)"
             >
               <template #title>
-                <v-tooltip location="end" :text="subSubItem.title">
+                <v-tooltip location="end" :text="subSubItem.title" :aria-label="subSubItem.title">
                   <template #activator="{ props: tooltipProps }">
                     <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{
                       subSubItem.title
@@ -102,7 +106,7 @@
             @click="emitSelect(subItem)"
           >
             <template #title>
-              <v-tooltip location="end" :text="subItem.title">
+              <v-tooltip location="end" :text="subItem.title" :aria-label="subItem.title">
                 <template #activator="{ props: tooltipProps }">
                   <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{
                     subItem.title
@@ -134,7 +138,7 @@
           >
         </template>
         <template #title>
-          <v-tooltip v-if="!isShrink" location="end" :text="item.title">
+          <v-tooltip v-if="!isShrink" location="end" :text="item.title" :aria-label="item.title">
             <template #activator="{ props: tooltipProps }">
               <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{
                 item.title