无障碍：About页键盘访问

web/src/views/Search/About.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchAbout" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
-      <h3 v-html="item.h3"></h3>
-      <p v-html="item.p"></p>
+      <h3 v-html="item.h3" tabindex="0"></h3>
+      <p v-html="item.p" tabindex="0"></p>
     </div>
   </div>
 </template>

web/src/views/Search/All.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchAll" v-else>
     <div
       class="row"
       v-for="(item, index) in data[pageSize - 1]"
       :key="index"
       @click="skip(item)"
+      @keydown.enter.passive="skip(item)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{ rightAC: !item.p }">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
     <!-- 查看详情组件 -->
     <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />

web/src/views/Search/Collections.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchCollections" v-else>
     <div
       class="row"
       v-for="(item, index) in data[pageSize - 1]"
       :key="index"
       @click="lookBig(item)"
+      @keydown.enter.passive="lookBig(item)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
     <!-- 查看详情组件 -->
     <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />

web/src/views/Search/Employment.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchEmployment" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Events.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchEvents" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" alt="item.h3"
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Exhibitions.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchExhibitions" v-else>
     <div
       class="row"
       v-for="item in data[pageSize - 1]"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" alt="item.h3"
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>

web/src/views/Search/Join.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchJoin" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" alt="item.h3"
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Learn.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchLearn" v-else>
     <div
       class="row"
       v-for="item in data[pageSize - 1]"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>

web/src/views/Search/Research.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchResearch" v-else>
     <div
       class="row"
       v-for="item in data[pageSize - 1]"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>

web/src/views/Search/Terms.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchTerms" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Visit.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchVisit" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
-      <h3 v-html="item.h3"></h3>
-      <p v-html="item.p"></p>
+      <h3 v-html="item.h3" tabindex="0"></h3>
+      <p v-html="item.p" tabindex="0"></p>
     </div>
   </div>
 </template>

web/src/views/Search/index.vue

@@ -3,35 +3,73 @@
     <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 go through the content."
     >
-      <span class="pos1">Your Position:&nbsp;</span>
-      <Router-link to="/Layout/Home">Home></Router-link>
-      <span>Search></span>
-      <span>List></span>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <span
+        tabindex="0"
+        aria-label="Link"
+        aria-description="Search"
+      >
+        Search>
+      </span>
+      <span
+        tabindex="0"
+        aria-label="Link"
+        aria-description="List"
+      >
+        List>
+      </span>
     </div>
-    <div class="titleBox">
+    <div class="titleBox" tabindex="0">
       Search
       <span> {{num}} results</span>
     </div>
     <div class="searchForm" data-aria-interaction-area tabindex="0"
       aria-label aria-description="You've reached the Search interactive section, please use the tab key to go through the content."
     >
-      <input class="searchWord" type="text" v-model="txt" />
-      <div class="searchBtn" @click="searchBtn">Search</div>
+      <input class="searchWord" type="text" v-model="txt" 
+        tabindex="0"
+        aria-description="Input keyword"
+      />
+      <div class="searchBtn"
+        @click="searchBtn"
+        @keydown.enter.passive="searchBtn"
+        tabindex="0"
+        aria-label="Button"
+      >
+        Search
+      </div>
     </div>
     <!-- 切换tab动态路由 -->
     <div class="searchMenu" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Search results page, please use the tab key to navigate through the content."
     >
-      <div v-for="item in tabData" :key="item.id">
+      <div v-for="item in tabData" :key="item.id" tabindex="-1">
         <span
           :class="{ active: cut === item.cut }"
           class="txt"
           @click="cutCom(item.cut)"
-          >{{ item.name }}</span
+          @keydown.enter.passive="cutCom(item.cut)"
+          tabindex="0"
+          aria-label="Link"
         >
+          {{ item.name }}
+        </span>
         <span v-if="item.id !== 11"> | </span>
       </div>
-      <div class="more" @click="more" v-if="moreShow">
+      <div class="more"
+        v-if="moreShow"
+        @click="more"
+        @keydown.enter.passive="more"
+        tabindex="0"
+        aria-label="Button"
+        aria-description="More"
+      >
         <span>More</span>
         <span class="el-icon-caret-bottom"></span>
       </div>
@@ -40,7 +78,7 @@
     <div class="comm" data-aria-viewport-area tabindex="0"
       aria-label :aria-description="`You've reached the content area of ${cut} list, please use the tab key to navigate through the content.`"
     >
-      <component ref="comSon" :is="cut" :txt='txt' :num.sync='num'></component>
+      <component ref="comSon" :is="cut" :txt='txt' :num.sync='num' tabindex="-1"></component>
     </div>
   </div>
 </template>