改一波bug

web/README.md

@@ -48,6 +48,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 ## 特殊class
 * aria-control-target: 手动添加。此节点和其后代会受无障碍菜单的控制。
 * aria-theme-inverse: 手动添加。此节点的背景文字颜色会和无障碍菜单里的设置相反。
+* aria-theme-independent: 手动添加。此节点颜色不会受无障碍设置的影响。
+* aria-outline-out: 手动添加。此节点被focus时，outline在节点外围显示而非像默认那样在节点内部边缘显示。
 * aria-no-zoom: 手动添加。此节点不会受无障碍菜单里缩放的控制。
 * aria-theme-[some color]: 自动添加。设置无障碍颜色时，这个class会被加到带有aria-control-target class的节点上。
 * aria-active: 自动添加。开启无障碍功能时添加到html和body上。

web/src/assets/css/ariaGlobalStyle.less

@@ -3,11 +3,19 @@
 .aria-active {
   .aria-theme-default {
     &:focus {
-      outline: 3px solid red !important;
+      outline: 2px solid red !important;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
     }
     * {
       &:focus {
-        outline: 3px solid red !important;
+        outline: 2px solid red !important;
+        outline-offset: -2px;
+        &.aria-outline-out {
+        outline-offset: 0;
+      }
       }
     }
   }
@@ -16,13 +24,21 @@
     background-color: white !important;
     color: black !important;
     &:focus {
-      outline: 3px solid black;
+      outline: 2px solid black;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
     }
     *:not(.aria-theme-independent) {
       background-color: white !important;
       color: black !important;
       &:focus {
-        outline: 3px solid black;
+        outline: 2px solid black;
+        outline-offset: -2px;
+        &.aria-outline-out {
+        outline-offset: 0;
+      }
       }
       &::placeholder {
         color: black !important;
@@ -45,13 +61,21 @@
     background-color: blue !important;
     color: yellow !important;
     &:focus {
-      outline: 3px solid yellow;
+      outline: 2px solid yellow;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
     }
     *:not(.aria-theme-independent) {
       background-color: blue !important;
       color: yellow !important;
       &:focus {
-        outline: 3px solid yellow;
+      outline: 2px solid yellow;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
       }
       &::placeholder {
         color: yellow !important;
@@ -74,13 +98,21 @@
     background-color: yellow !important;
     color: black !important;
     &:focus {
-      outline: 3px solid black;
+      outline: 2px solid black;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
     }
     *:not(.aria-theme-independent) {
       background-color: yellow !important;
       color: black !important;
       &:focus {
-        outline: 3px solid black;
+      outline: 2px solid black;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
       }
       &::placeholder {
         color: black !important;
@@ -103,13 +135,21 @@
     background-color: black !important;
     color: yellow !important;
     &:focus {
-      outline: 3px solid yellow;
+      outline: 2px solid yellow;
+      outline-offset: -2px;
+      &.aria-outline-out {
+        outline-offset: 0;
+      }
     }
     *:not(.aria-theme-independent) {
       background-color: black !important;
       color: yellow !important;
       &:focus {
-        outline: 3px solid yellow;
+        outline: 2px solid yellow;
+        outline-offset: -2px;
+        &.aria-outline-out {
+        outline-offset: 0;
+      }
       }
       &::placeholder {
         color: yellow !important;

web/src/views/About/index.vue

@@ -37,7 +37,7 @@
     <div class="director" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the From the Director section, please use the tab key to navigate through the content."
     >
-      <div >
+      <div>
         <p tabindex="0">Welcome to the website of the Capital Museum of China.</p>
         <p tabindex="0">
           We are looking forward to your visit. The Capital Museum is a palace
@@ -218,6 +218,7 @@ export default {
     }
   }
   .director {
+    position: relative;
     clear: both;
     background-image: url("/data/About/au2.jpg");
     background-position: center top;
@@ -253,6 +254,7 @@ export default {
     }
   }
   .history {
+    position: relative;
     clear: both;
     width: 100%;
     height: 501px;

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

@@ -116,7 +116,7 @@
               >
                 {{ item.p }}
               </p>
-              <span tabindex="0">{{ item.yrahTxt }}</span>
+              <span v-if="item.yrahTxt" tabindex="0">{{ item.yrahTxt }}</span>
             </div>
           </div>
         </div>

web/src/views/Exhibitions/info.vue

@@ -76,9 +76,9 @@
         >
           <div class="title_2" tabindex="0">{{ data.title }}</div>
           <div class="info" >
-            <span class="info_1" tabindex="0">{{ data.date }}</span>
-            <span class="info_2" tabindex="0">{{ data.time }}</span>
-            <span class="info_3" tabindex="0">{{ data.loc }}</span>
+            <span v-if="data.date" class="info_1" tabindex="0">{{ data.date }}</span>
+            <span v-if="data.time" class="info_2" tabindex="0">{{ data.time }}</span>
+            <span v-if="data.loc" class="info_3" tabindex="0">{{ data.loc }}</span>
           </div>
         </div>
         <div class="content_2" data-aria-viewport-area tabindex="0"

web/src/views/LearnEngage/index.vue

@@ -73,14 +73,14 @@
         @keydown.enter.passive="toInfo(item.id)"
       >
         <div class="left">
-          <h3 tabindex="0">{{ item.h3 }}</h3>
-          <p tabindex="0">{{ item.p }}</p>
-          <h4 v-html="item.h4" tabindex="0"></h4>
+          <h3 tabindex="0" aria-label="Link">{{ item.h3 }}</h3>
+          <p tabindex="0" aria-label="Link">{{ item.p }}</p>
+          <h4 v-html="item.h4" tabindex="0" aria-label="Link"></h4>
         </div>
         <div class="right">
           <img :src="`/data/LearnEngage/sm/${item.id}.png`"
             :alt="item.h3" 
-            tabindex="0"
+            tabindex="0" aria-label="Image link"
             :aria-description="item.h3"
           />
         </div>

web/src/views/LearnEngage/info.vue

@@ -69,7 +69,9 @@
         ></div>
       </div>
       <div class="main bottom" >
-        <div class="top" tabindex="0">{{ dataObj.tipTime }}</div>
+        <div class="top" tabindex="0" aria-description="Online Reservation">
+          <span tabindex="0">{{ dataObj.tipTime }}</span>
+        </div>
         <div class="m2">
           <img src="/data/LearnEngage/m-27.jpg" alt="tip" 
             tabindex="0"

web/src/views/Publications/index.vue

@@ -9,7 +9,7 @@
       <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."
+      aria-label aria-description="You've reached the secondary menu of the Publications section; this menu has two options; please use the tab key to go through the menu."
     >
       <ul >
         <li

web/src/views/Visit/Visit2.vue

@@ -333,28 +333,35 @@
                 Please ask museum personnel for help.</span
               ><br />
             </p>
-            <p tabindex="0"
+            <div
+              tabindex="0"
               aria-description="3. Space in the exhibition is limited, so museum may control the visitor numbers at any time to ensure orderly and pleasant viewing. Thanks for your understanding and cooperation."
             >
-              <span
-                style="
-                  font-family: arial, helvetica, sans-serif;
-                  font-size: 14px;
-                "
-                >3. Space in the exhibition is limited, so museum may control
-                the visitor numbers at any time to ensure orderly and pleasant
-                viewing. Thanks for your understanding and&nbsp;</span
-              ><br />
-            </p>
-            <p>
-              <span
-                style="
-                  font-family: arial, helvetica, sans-serif;
-                  font-size: 14px;
-                "
-                >&nbsp; &nbsp; cooperation.</span
-              ><br />
-            </p>
+              <p>
+                <span
+                  style="
+                    font-family: arial, helvetica, sans-serif;
+                    font-size: 14px;
+                  "
+                >
+                3. Space in the exhibition is limited, so museum may control
+                  the visitor numbers at any time to ensure orderly and pleasant
+                  viewing. Thanks for your understanding and&nbsp;
+                </span>
+                <br />
+              </p>
+              <p>
+                <span
+                  style="
+                    font-family: arial, helvetica, sans-serif;
+                    font-size: 14px;
+                  "
+                >
+                  &nbsp; &nbsp; cooperation.
+                </span>
+                <br />
+              </p>
+            </div>
             <p tabindex="0">
               <span
                 style="

web/src/views/bottom/Index.vue

@@ -20,7 +20,7 @@
         @click="skip('/')"
         @keydown.enter.passive="skip('/')"
         tabindex="0"
-        aria-label=""
+        aria-label="Link"
         aria-description="Home"
       />
     </div>

web/src/views/layout/index.vue

@@ -81,7 +81,7 @@
         <div
           class="search" @keyup.enter="search" v-if="!menaInd.includes('Search')"
           data-aria-interaction-area
-          aria-label aria-description="You've reached the seach field, please use the tab key to browse the content."
+          aria-label aria-description="You've reached the search field, please use the tab key to browse the content."
           tabindex="0"
         >
           <div class="input-wrapper">
@@ -93,9 +93,24 @@
               tabindex="0"
               aria-description="search"
             />
-            <img v-if="themeIdx === 0" :src="require('@/assets/images/search-default-color.svg')" alt="">
-            <img v-if="[1, 3].includes(themeIdx)" :src="require('@/assets/images/search-black.svg')" alt="">
-            <img v-if="[2, 4].includes(themeIdx)" :src="require('@/assets/images/search-yellow.svg')" alt="">
+            <img v-if="themeIdx === 0" :src="require('@/assets/images/search-default-color.svg')" alt=""
+              @click="search"
+              tabindex="0"
+              aria-label="Link"
+              aria-description="search"
+            >
+            <img v-if="[1, 3].includes(themeIdx)" :src="require('@/assets/images/search-black.svg')" alt=""
+              @click="search"
+              tabindex="0"
+              aria-label="Link"
+              aria-description="search"
+            >
+            <img v-if="[2, 4].includes(themeIdx)" :src="require('@/assets/images/search-yellow.svg')" alt=""
+              @click="search"
+              tabindex="0"
+              aria-label="Link"
+              aria-description="search"
+            >
           </div>
           <!-- <el-input
             placeholder="search..."
@@ -136,10 +151,10 @@
       </div>
       <!-- 固定的二维码和游戏 -->
       <div
-        class="rightNav aria-theme-independent" data-aria-viewport-area tabindex="0"
-        aria-label aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
-      >
-        <ul class="rightIco" >
+        class="rightNav aria-theme-independent">
+        <ul class="rightIco aria-outline-out" data-aria-viewport-area tabindex="0"
+          aria-label aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
+        >
           <li title="game">
             <a
               href=""
@@ -416,6 +431,7 @@ export default {
         right: 8px;
         top: 50%;
         transform: translateY(-50%);
+        cursor: pointer;
       }
     }
     // /deep/.el-input__icon {