无障碍：publications页键盘访问

web/src/views/Publications/Publications1.vue

@@ -4,49 +4,61 @@
     <div class="magzines-wrapper" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Magazines page, please use the tab key to go through the content."
     >
-      <div class="title">
+      <div class="title" tabindex="-1">
         <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-        <span>{{ $route.meta.nameAll }}</span>
+        <span tabindex="0">{{ $route.meta.nameAll }}</span>
         <div class="xian"></div>
       </div>
-      <div class="conten">
+      <div class="conten" tabindex="-1">
         <!-- 左侧 -->
         <div class="menu">
           <p
             :class="{ cur: txtInd === index }"
             v-for="(item, index) in txtData"
             @click="txtInd = index"
+            @keydown.enter.passive="txtInd = index"
             :key="index"
+            tabindex="0"
+            aria-label="Link"
           >
             {{ item.name }}<span v-show="txtInd === index"></span>
           </p>
         </div>
         <!-- 右侧 -->
-        <div class="rightTxt" v-html="txtData[txtInd].conten"></div>
+        <div class="rightTxt" v-html="txtData[txtInd].conten" tabindex="0"></div>
       </div>
     </div>
     <div class="our-magzines-wrapper" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Our Magazines section, please use the tab key to go through the content."
     >
-      <div class="title_2">Our Magazines</div>
+      <div class="title_2" tabindex="0">Our Magazines</div>
       <!-- 下面书籍 -->
-      <div class="tabTimeBox">
+      <div class="tabTimeBox" tabindex="-1">
         <span
           @mouseenter="dateInd = i"
+          @focus="dateInd = i"
           :class="{ cur: i === dateInd }"
           v-for="i in dateData"
           :key="i"
-          >{{ i }}</span
+          tabindex="0"
+          aria-label="Link"
         >
+          {{ i }}
+        </span>
       </div>
+      <ul class="imgList" tabindex="-1">
+        <li v-for="item in imgList" :key="item.id"
+          @click="jump(item.id)"
+          @keydown.enter.passive="jump(item.id)"
+          tabindex="0"
+          aria-label="Image link"
+        >
+          <div></div>
+          <img :src="item.imgUrl" alt="" />
+          <p v-html="item.p"></p>
+        </li>
+      </ul>
     </div>
-    <ul class="imgList">
-      <li v-for="item in imgList" :key="item.id" @click="jump(item.id)">
-        <div></div>
-        <img :src="item.imgUrl" alt="" />
-        <p v-html="item.p"></p>
-      </li>
-    </ul>
   </div>
 </template>
 

web/src/views/Publications/Publications2.vue

@@ -3,18 +3,18 @@
   <div class="Publications2" data-aria-viewport-area tabindex="0"
     aria-label aria-description="You've reached the content area of the Exhibition Catalogues page, please use the tab key to go through the content."
   >
-    <div class="title">
+    <div class="title" tabindex="-1">
       <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-      <span>{{ $route.meta.nameAll }}</span>
+      <span tabindex="0">{{ $route.meta.nameAll }}</span>
       <div class="xian"></div>
     </div>
-    <div class="conten">
+    <div class="conten" tabindex="-1">
       <img src="/data/Publications/heng.png" alt="" />
       <ul>
         <li v-for="(item, index) in list" :key="index">
           <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt="" />
-          <div class="show">
-            <a :href="item" target="_blank">
+          <div class="show" tabindex="0">
+            <a :href="item" target="_blank" tabindex="0">
               <img src="/data/Publications/Exhibition/href.png" />
               <p>Click here to open the catalogue</p>
             </a>
@@ -137,7 +137,7 @@ export default {
             }
           }
         }
-        &:hover {
+        &:hover, &:focus-within {
           .show {
             height: 50%;
             opacity: 1;

web/src/views/Publications/PublicationsInfo.vue

@@ -2,13 +2,15 @@
   <div class="PublicationsInfo">
     <div class="top">
       <div class="main">
-        <div v-html="info.p"></div>
-        <img :src="info.imgUrl" alt="" />
+        <div v-html="info.p" tabindex="0"></div>
+        <img :src="info.imgUrl" alt="" tabindex="0"
+          :aria-description="info.p.replace(/(<([^>]+)>)/ig, '')"
+        />
       </div>
     </div>
     <div class="conten">
-      <div class="haed">Contents</div>
-      <div class="txt" v-html="info.txt"></div>
+      <div class="haed" tabindex="0">Contents</div>
+      <div ref="txt" class="txt" v-html="info.txt"></div>
     </div>
   </div>
 </template>
@@ -42,7 +44,11 @@ export default {
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.$eventBus.$emit('request-process-text-element', this.$refs.txt)
+    })
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Publications/index.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="Publications">
-    <div class="ban" :class="banImg" 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" :class="banImg" 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 Publications section; this menu has three options; please use the tab key to go through the menu."
     >
-      <ul>
+      <ul tabindex="-1">
         <li
           :class="{ cur: $route.meta.nameAll === item.name }"
           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="`/data/Publications/${index + 1}.png`" alt="" />
           <p>{{ item.name }}</p>
@@ -22,10 +31,18 @@
     <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/Publications/1">Publications></Router-link>
-      <span class="jump" @click="backUrl">{{ $route.meta.nameAll }}></span>
+      <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/Publications/1" tabindex="0" aria-description="Publications">Publications></Router-link>
+      <span class="jump"
+        @click="backUrl"
+        @keydown.enter.passive="backUrl"
+        tabindex="0"
+        aria-label="Link"
+        :aria-description="$route.meta.nameAll"
+      >
+        {{ $route.meta.nameAll }}>
+      </span>
     </div>
     <!-- 二级嵌套路由 -->
     <Router-view />