无障碍：Join & Support页键盘访问

web/src/views/JoinSupport/Give.vue

@@ -4,9 +4,23 @@
   >
     <div class="row">
       <div class="left">
-        <div class="txt" @click="skip(4)">Individuals</div>
+        <div
+          class="txt"
+          @click="skip(4)"
+          @keydown.enter.passive="skip(4)"
+          tabindex="0"
+          aria-label="Link"
+        >
+          Individuals
+        </div>
       </div>
-      <div class="right" @click="skip(4)">
+      <div
+        class="right"
+        @click="skip(4)"
+        @keydown.enter.passive="skip(4)"
+        tabindex="0"
+        aria-label="Link"
+      >
         <div class="txtShow">
           Since the establishment of Capital Museum, we have got sufficient
           supports from people from all walks of life. Due to the limited space,
@@ -17,7 +31,12 @@
       </div>
     </div>
     <div class="row">
-      <div class="right right2" @click="skip(5)">
+      <div class="right right2" 
+        @click="skip(5)"
+        @keydown.enter.passive="skip(5)"
+        tabindex="0"
+        aria-label="Link"
+      >
         <div class="txtShow">
           The century-old Beijing Match Factory donated to Capital Museum a
           large number of files and real objects which record the development of
@@ -27,7 +46,15 @@
         </div>
       </div>
       <div class="left left2">
-        <div class="txt" @click="skip(5)">Corporations & Institutions</div>
+        <div
+          class="txt"
+          @click="skip(5)"
+          @keydown.enter.passive="skip(5)"
+          tabindex="0"
+          aria-label="Link"
+        >
+          Corporations & Institutions
+        </div>
       </div>
     </div>
   </div>

web/src/views/JoinSupport/GiveInfo.vue

@@ -40,7 +40,9 @@ export default {
     });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-process-text-element', this.$el)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/JoinSupport/Volunteer.vue

@@ -7,6 +7,10 @@
       v-for="(item, index) in data"
       :key="item.id"
       @click="skip(item.id)"
+      @keydown.enter.passive="skip(item.id)"
+      tabindex="0"
+      aria-label="Image link"
+      :aria-description="item.h3"
     >
       <img :src="`/data/JoinSupport/v${index + 1}.jpg`" alt="" />
       <h1>{{ item.h3 }}</h1>
@@ -123,7 +127,7 @@ export default {
       z-index: 2;
       margin: -114px 0 0 -114px;
     }
-    &:hover {
+    &:hover, &:focus-within {
       & > img {
         opacity: 1;
       }

web/src/views/JoinSupport/VolunteerInfo.vue

@@ -42,7 +42,9 @@ export default {
     });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-process-text-element', this.$el)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/JoinSupport/index.vue

@@ -1,18 +1,32 @@
 <!--  -->
 <template>
   <div class="JoinSupport">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      aria-label :aria-description="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to go through the content.`"
-    ></div>
+    <div class="banWrapper"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      :aria-description="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to go through the content.`"
+    >
+      <div
+        class="ban"
+        tabindex="0"
+        aria-label="Image"
+        :aria-description="$route.meta.nameAll"
+      ></div>
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the secondary menu of the Join & Support section; this menu has two options; please use the tab key to go through the menu."
     >
-      <ul>
+      <ul tabindex="-1">
         <li
           :class="{ cur: $route.meta.nameAll === item.url }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.url)"
+          @keydown.enter.passive="skip(item.url)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img
             :src="`/data/JoinSupport/${item.img}`"
@@ -25,10 +39,28 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area, this area has three URLs; please use the tab key to navigate through the content."
     >
-      <span class="pos1">Your Position:&nbsp;</span>
-      <Router-link to="/Layout/Home">Home></Router-link>
-      <Router-link to="/Layout/JoinSupport/Volunteer">Join & Support ></Router-link>
-      <Router-link :to="`/Layout/JoinSupport/${$route.meta.nameAll}`">{{'Ways to '+$route.meta.nameAll}} ></Router-link>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/JoinSupport/Volunteer"
+        tabindex="0"
+        aria-description="Join & Support"
+      >
+        Join & Support>
+      </Router-link>
+      <Router-link
+        :to="`/Layout/JoinSupport/${$route.meta.nameAll}`"
+        tabindex="0"
+        :aria-description="'Ways to '+$route.meta.nameAll"
+      >
+        {{'Ways to '+$route.meta.nameAll}}>
+      </Router-link>
     </div>
     <!-- 二级嵌套路由 -->
     <Router-view />