无障碍：Exhibitions页键盘访问功能

web/src/views/Exhibitions/component/List.vue

@@ -5,19 +5,32 @@
         aria-label aria-description="You've reached search box under the Exhibitions page; please use the tab key to go through the content."
       >
         <div class="left">
-          <!-- 点击放大镜 -->
-          <div class="clickSearch" @click="search"></div>
           <el-input
             style="margin-right: 30px"
             suffix-icon="el-icon-search"
             v-model="txt"
+            tabindex="0"
+            aria-description="Input search keyword"
           >
           </el-input>
-          <el-select
+          <!-- 点击放大镜 -->
+          <div
+            class="clickSearch"
+            @click="search"
+            @keydown.enter.passive="search"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Search"
+          ></div>
+          <!-- 使用这个组件无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->
+          <!-- <el-select
             v-model="year"
             clearable
             placeholder="Select Year"
-            @change="selectChange"
+            @change="elSelectChange"
+            tabindex="0"
+            aria-label="Select"
+            aria-description="Select Year"
           >
             <el-option value="2021" label="2021"></el-option>
             <el-option value="2020" label="2020"></el-option>
@@ -26,7 +39,25 @@
             <el-option value="2017" label="2017"></el-option>
             <el-option value="2016" label="2016"></el-option>
             <el-option value="2015" label="2015"></el-option>
-          </el-select>
+          </el-select> -->
+          <select
+            id="year-selector"
+            v-model="year"
+            @change="onSelectorChange"
+            tabindex="0"
+            class="yearSelector"
+            aria-label="Select"
+            aria-description="Select Year"
+          >
+            <option value="">Select Year</option>
+            <option value="2021">2021</option>
+            <option value="2020">2020</option>
+            <option value="2019">2019</option>
+            <option value="2018">2018</option>
+            <option value="2017">2017</option>
+            <option value="2016">2016</option>
+            <option value="2015">2015</option>
+          </select>
         </div>
         <div class="right">
           <img
@@ -36,7 +67,10 @@
                 cut ? 'cut1' : 'cut1Ac'
               }.png`)
             "
-            alt=""
+            alt="Button: List mode"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="List mode"
           />
           <img
             @click="cut = true"
@@ -45,39 +79,56 @@
                 cut ? 'cut2Ac' : 'cut2'
               }.png`)
             "
-            alt=""
+            alt="Button: Big image mode"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Big image mode"
           />
         </div>
       </div>
       <div class="null" v-if="data.length === 0">no information...</div>
       <!-- 列表详情信息 -->
-      <div class="list" v-if="!cut" data-aria-viewport-area tabindex="0"
-        aria-label :aria-description="`You've reached the content area of the ${$parent.topLi[$route.params.id].name} page. To browse the content, please use the tab key.`"
-      >
-        <div class="row" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
-          <img :src="item.cover" alt="" />
-          <div class="txt">
-            <h3>{{ item.h3 }}</h3>
-            <p>{{ item.p }}</p>
-            <span>{{ item.yrahTxt }}</span>
+      <div class="listAreaWrapper" data-aria-viewport-area tabindex="0"
+        aria-label :aria-description="`You've reached the content area of the ${$parent.topLi[$route.params.id - 1].name} page. To browse the content, please use the tab key.`">
+        <div class="list" v-if="!cut">
+          <div
+            class="row"
+            v-for="item in dataShow"
+            :key="item.id"
+            @click="toInfo(item.id)"
+            @keydown.enter.passive="toInfo(item.id)"
+          >
+            <img :src="item.cover" :alt="item.h3"
+              tabindex="0"
+              :aria-description="item.h3"
+            />
+            <div class="txt">
+              <h3 tabindex="0">{{ item.h3 }}</h3>
+              <p tabindex="0">{{ item.p }}</p>
+              <span tabindex="0">{{ item.yrahTxt }}</span>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- 列表图片信息 -->
-      <div class="listImg" v-else>
-        <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
-          <img :src="item.cover" alt="" />
-          <p>{{ item.h3 }}</p>
+        <!-- 列表图片信息 -->
+        <div class="listImg" v-else>
+          <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
+            <img :src="item.cover" alt="" 
+              tabindex="0"
+              :aria-description="item.h3"
+            />
+            <p tabindex="0">{{ item.h3 }}</p>
+          </div>
         </div>
+        <!-- 点击显示更多 -->
+        <div class="more" v-show="data.length>9&&dataShow.length<data.length" @click="dataShowArr(dataShow.length+9)">Show More</div>
       </div>
-      <!-- 点击显示更多 -->
-      <div class="more" v-show="data.length>9&&dataShow.length<data.length" @click="dataShowArr(dataShow.length+9)">Show More</div>
     </div>
   </div>
 </template>
 
 <script>
 import { dataAll } from "@/views/dataAll.js";
+
 export default {
   name: "ExhibitionsList",
   components: {},
@@ -119,7 +170,24 @@ export default {
       })
     },
     // 选择年份
-    selectChange(val) {
+    onSelectorChange() {
+      this.$eventBus.$emit('request-magnify', {
+        elemType: 'Text',
+        elemDisc: this.year,
+      })
+      if (!this.year) {
+        this.getIdChangeData();
+        this.dataShowArr(9);
+        return;
+      }
+      this.getIdChangeData();
+      this.txt = "";
+      this.data = this.data.filter((v) => {
+        return v.year.includes(this.year) || v.year === "";
+      });
+      this.dataShowArr(9);
+    },
+    elSelectChange(val) {
       if (!val) {
         this.getIdChangeData();
         this.dataShowArr(9);
@@ -213,9 +281,22 @@ export default {
           width: 48px;
           height: 48px;
           border-radius: 50%;
-          right: 196px;
+          right: 174px;
           top: 0;
         }
+        .yearSelector {
+          border-radius: 10px;
+          border-color: #c0c4cc;
+          width: 180px;
+          padding-left: 10px;
+          cursor: pointer;
+          font-size: 18px;
+          option {
+            cursor: pointer;
+            color: #606266;
+            font-size: 18px;
+          }
+        }
       }
       .right {
         & > img {

web/src/views/Exhibitions/index.vue

@@ -1,9 +1,11 @@
 <!--  -->
 <template>
   <div class="Exhibitions">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      aria-label :aria-description="`You've reached the banner area of the ${topLi[$route.params.id].name} page; this area has one image; please use the tab key to navigate through the content.`"
-    ></div>
+    <div class="ban_wrapper" data-aria-viewport-area tabindex="0"
+        aria-label :aria-description="`You've reached the banner area of the ${topLi[$route.params.id - 1].name} page; this area has one image; please use the tab key to navigate through the content.`"
+    >
+      <div class="ban" tabindex="0" aria-label="Image" :aria-description="topLi[$route.params.id - 1].name"></div>
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the secondary menu under the Exhibition section. This menu contains four options. To browse the content,  please use the tab key."
     >
@@ -13,6 +15,10 @@
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.path)"
+          @keydown.enter.passive="skip(item.path)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img
             :src="require(`@/assets/images/Exhibitions/${item.img}`)"
@@ -25,14 +31,14 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
     >
-      <span class="pos1">Your Position:&nbsp;</span>
-      <Router-link to="/Layout/Home">Home></Router-link>
-      <Router-link to="/Layout/Exhibitions/1">Exhibitions></Router-link>
-      <span>{{ topLi[topId - 1].name }}></span>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home" tabindex="0">Home></Router-link>
+      <Router-link to="/Layout/Exhibitions/1" tabindex="0">Exhibitions></Router-link>
+      <Router-link to="">{{ topLi[topId - 1].name }}></Router-link>
     </div>
     <div class="title">
       <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-      <span>{{ topLi[topId - 1].name }}</span>
+      <span tabindex="0">{{ topLi[topId - 1].name }}</span>
       <div class="xian"></div>
     </div>
     <!-- 列表页面 -->

web/src/views/Visit/index.vue

@@ -42,7 +42,7 @@
       >
         Visit>
       </Router-link>
-      <Router-link to="."
+      <Router-link to=""
         tabindex="0"
         :aria-description="$route.meta.nameAll"
       >