1

src/components/AppTabBar.vue

@@ -27,10 +27,11 @@ function navigate(target: string) {
 </script>
 
 <template>
-  <nav class="app-tab-bar">
-    <div
+  <nav class="app-tab-bar" aria-label="主导航">
+    <button type="button"
       class="tab-item"
       :class="{ active: currentTab === 'home' }"
+      :aria-current="currentTab === 'home' ? 'page' : undefined"
       @click="navigate('home')"
     >
       <div class="tab-icon">
@@ -40,11 +41,12 @@ function navigate(target: string) {
         </svg>
       </div>
       <span class="tab-label">首页</span>
-    </div>
+    </button>
 
-    <div
+    <button type="button"
       class="tab-item"
       :class="{ active: currentTab === 'tcm' }"
+      :aria-current="currentTab === 'tcm' ? 'page' : undefined"
       @click="navigate('tcm')"
     >
       <div class="tab-icon">
@@ -56,11 +58,12 @@ function navigate(target: string) {
         </svg>
       </div>
       <span class="tab-label">中医四诊</span>
-    </div>
+    </button>
 
-    <div
+    <button type="button"
       class="tab-item"
       :class="{ active: currentTab === 'assessment' }"
+      :aria-current="currentTab === 'assessment' ? 'page' : undefined"
       @click="navigate('assessment')"
     >
       <div class="tab-icon">
@@ -73,11 +76,12 @@ function navigate(target: string) {
         </svg>
       </div>
       <span class="tab-label">健康评估</span>
-    </div>
+    </button>
 
-    <div
+    <button type="button"
       class="tab-item"
       :class="{ active: currentTab === 'profile' }"
+      :aria-current="currentTab === 'profile' ? 'page' : undefined"
       @click="navigate('profile')"
     >
       <div class="tab-icon">
@@ -87,7 +91,7 @@ function navigate(target: string) {
         </svg>
       </div>
       <span class="tab-label">我的</span>
-    </div>
+    </button>
   </nav>
 </template>
 
@@ -116,6 +120,9 @@ function navigate(target: string) {
 }
 
 .tab-item {
+  border: 0;
+  background: transparent;
+  font: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;