无障碍：完成learn & Engage页面的键盘访问

web/src/views/LearnEngage/info.vue

@@ -1,47 +1,85 @@
 <template>
   <div class="LearnEngageInfo">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the banner area of the tertiary Learn & Engage 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 tertiary Learn & Engage 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="tertiary Learn & Engage"
+      ></div>
+    </div>
     <!-- 面包屑 -->
     <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."
     >
-      <div>
-        <span class="pos1">Your Position:&nbsp;</span>
-        <Router-link to="/Layout/Home">Home></Router-link>
+      <div tabindex="-1">
+        <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/LearnEngage/Students"
-          >Learn & Engage></Router-link
+          tabindex="0"
+          aria-description="Learn & Engage"
         >
+          Learn & Engage>
+        </Router-link>
         <Router-link :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"
-          >{{ mbTxt }}></Router-link
+          tabindex="0"
+          :aria-description="mbTxt"
         >
+          {{ mbTxt }}>
+        </Router-link>
       </div>
     </div>
     <!-- 内容 -->
     <div class="conten" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."
     >
-      <div class="title">{{ dataObj.title }}</div>
-      <div class="info">
-        <span class="info1">{{ dataObj.time }}</span>
-        <span class="info2">{{ dataObj.loc }}</span>
-        <span class="info3">{{ dataObj.ren }}</span>
+      <div class="title" tabindex="0">{{ dataObj.title }}</div>
+      <div class="info" tabindex="-1">
+        <span class="info1" tabindex="0">{{ dataObj.time }}</span>
+        <span class="info2" tabindex="0">{{ dataObj.loc }}</span>
+        <span class="info3" tabindex="0">{{ dataObj.ren }}</span>
       </div>
-      <div class="main">
-        <p v-html="dataObj.top" v-if="dataObj.top"></p>
-        <img :src="`/data/LearnEngage/in/${id}.jpg`" alt="" v-if="dataObj.imgShow!==0"/>
-        <div v-html="dataObj.txt"></div>
+      <div class="main" tabindex="-1">
+        <p v-html="dataObj.top" v-if="dataObj.top"
+          tabindex="0"
+          :aria-description="dataObj.top.replace(/(<([^>]+)>)/ig, '')"
+        ></p>
+        <img :src="`/data/LearnEngage/in/${id}.jpg`"
+          :alt="dataObj.title"
+          v-if="dataObj.imgShow!==0"
+          tabindex="0"
+          :aria-description="dataObj.title"
+        />
+        <div v-html="dataObj.txt"
+          tabindex="0"
+          :aria-description="dataObj.txt.replace(/(<([^>]+)>)/ig, '')"
+        ></div>
       </div>
-      <div class="main bottom">
-        <div class="top">{{ dataObj.tipTime }}</div>
+      <div class="main bottom" tabindex="-1">
+        <div class="top" tabindex="0">{{ dataObj.tipTime }}</div>
         <div class="m2">
-          <img src="/data/LearnEngage/m-27.jpg" alt="" />
-          <p v-html="dataObj.tip"></p>
+          <img src="/data/LearnEngage/m-27.jpg" alt="tip" 
+            tabindex="0"
+            aria-description="Tip"
+          />
+          <p v-html="dataObj.tip" tabindex="0" ></p>
         </div>
         <div
           class="back"
           @click="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
+          @keydown.enter.passive="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
+          tabindex="0"
+          aria-label="Button"
         >
           Back
         </div>