改一堆无聊的bug

web/public/data/Collections/arrow-black.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="42.000000pt" height="36.000000pt" viewBox="0 0 42.000000 36.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,36.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M104 178 l-100 -173 103 -3 c57 -1 149 -1 206 0 l103 3 -100 173
+c-56 94 -103 172 -106 172 -3 0 -50 -78 -106 -172z"/>
+</g>
+</svg>

web/public/data/Collections/arrow-blue.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="42.000000pt" height="36.000000pt" viewBox="0 0 42.000000 36.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,36.000000) scale(0.100000,-0.100000)"
+fill="blue" stroke="none">
+<path d="M104 178 l-100 -173 103 -3 c57 -1 149 -1 206 0 l103 3 -100 173
+c-56 94 -103 172 -106 172 -3 0 -50 -78 -106 -172z"/>
+</g>
+</svg>

web/public/data/Collections/arrow-white.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="42.000000pt" height="36.000000pt" viewBox="0 0 42.000000 36.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,36.000000) scale(0.100000,-0.100000)"
+fill="#fff" stroke="none">
+<path d="M104 178 l-100 -173 103 -3 c57 -1 149 -1 206 0 l103 3 -100 173
+c-56 94 -103 172 -106 172 -3 0 -50 -78 -106 -172z"/>
+</g>
+</svg>

web/public/data/Collections/arrow-yellow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="42.000000pt" height="36.000000pt" viewBox="0 0 42.000000 36.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,36.000000) scale(0.100000,-0.100000)"
+fill="yellow" stroke="none">
+<path d="M104 178 l-100 -173 103 -3 c57 -1 149 -1 206 0 l103 3 -100 173
+c-56 94 -103 172 -106 172 -3 0 -50 -78 -106 -172z"/>
+</g>
+</svg>

web/src/assets/css/ariaGlobalStyle.less

@@ -21,7 +21,7 @@
   }
 
   .aria-theme-white {
-    background-color: white !important;
+    background: white !important;
     color: black !important;
     &:focus {
       outline: 2px solid black;
@@ -30,8 +30,8 @@
         outline-offset: 0;
       }
     }
-    *:not(.aria-theme-independent) {
-      background-color: white !important;
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: white !important;
       color: black !important;
       &:focus {
         outline: 2px solid black;
@@ -44,21 +44,21 @@
         color: black !important;
       }
     }
-    a:not(.aria-theme-independent) {
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
       color: blue !important;
     }
     &.aria-inverse-theme {
-      background-color: black !important;
+      background: black !important;
       color: white !important;
     }
     .aria-inverse-theme {
-      background-color: black !important;
+      background: black !important;
       color: white !important;
     }
   }
 
   .aria-theme-blue {
-    background-color: blue !important;
+    background: blue !important;
     color: yellow !important;
     &:focus {
       outline: 2px solid yellow;
@@ -67,8 +67,8 @@
         outline-offset: 0;
       }
     }
-    *:not(.aria-theme-independent) {
-      background-color: blue !important;
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: blue !important;
       color: yellow !important;
       &:focus {
       outline: 2px solid yellow;
@@ -81,21 +81,21 @@
         color: yellow !important;
       }
     }
-    a:not(.aria-theme-independent) {
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
       color: white !important;
     }
     &.aria-inverse-theme {
-      background-color: yellow !important;
+      background: yellow !important;
       color: blue !important;
     }
     .aria-inverse-theme {
-      background-color: yellow !important;
+      background: yellow !important;
       color: blue !important;
     }
   }
 
   .aria-theme-yellow {
-    background-color: yellow !important;
+    background: yellow !important;
     color: black !important;
     &:focus {
       outline: 2px solid black;
@@ -104,8 +104,8 @@
         outline-offset: 0;
       }
     }
-    *:not(.aria-theme-independent) {
-      background-color: yellow !important;
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: yellow !important;
       color: black !important;
       &:focus {
       outline: 2px solid black;
@@ -118,21 +118,21 @@
         color: black !important;
       }
     }
-    a:not(.aria-theme-independent) {
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
       color: blue !important;
     }
     &.aria-inverse-theme {
-      background-color: black !important;
+      background: black !important;
       color: yellow !important;
     }
     .aria-inverse-theme {
-      background-color: black !important;
+      background: black !important;
       color: yellow !important;
     }
   }
 
   .aria-theme-black {
-    background-color: black !important;
+    background: black !important;
     color: yellow !important;
     &:focus {
       outline: 2px solid yellow;
@@ -141,8 +141,8 @@
         outline-offset: 0;
       }
     }
-    *:not(.aria-theme-independent) {
-      background-color: black !important;
+    *:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
+      background: black !important;
       color: yellow !important;
       &:focus {
         outline: 2px solid yellow;
@@ -155,15 +155,15 @@
         color: yellow !important;
       }
     }
-    a:not(.aria-theme-independent) {
+    a:not(.aria-theme-independent, .el-carousel, .el-carousel *, img) {
       color: white !important;
     }
     &.aria-inverse-theme {
-      background-color: yellow !important;
+      background: yellow !important;
       color: black !important;
     }
     .aria-inverse-theme {
-      background-color: yellow !important;
+      background: yellow !important;
       color: black !important;
     }
   }

web/src/config.js

@@ -9,7 +9,7 @@ switch (process.env.NODE_ENV) {
     break;
 }
 
-const version = 'v0525.1416'
+const version = 'v0526.1648'
 
 module.exports = {
   publicPath,

web/src/views/About/Director.vue

@@ -6,7 +6,7 @@
       aria-label aria-description="You've reached the banner area of the From the Director page; this area has one image; please use the tab key to go through the content."
     >
       <div
-        class="ban"
+        class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="From the Director"

web/src/views/About/President.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AboutPresident">
-    <div class="ban"></div>
+    <div class="ban aria-theme-independent"></div>
     <div class="pos">
       <div>
         <span class="pos1">Your Position:&nbsp;</span>

web/src/views/About/index.vue

@@ -7,7 +7,7 @@
       aria-label
       aria-description="You've reached the banner area of the About page; this page has one image; please use the tab key to go through the content."
     >
-      <div class="ban"
+      <div class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="About"

web/src/views/About/link.vue

@@ -4,7 +4,7 @@
     <div class="banWrapper" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the banner area of the Partners & Connections page; this page has one image; please use the tab key to go through the content."
     >
-      <div class="ban"
+      <div class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Partners & Connections"

web/src/views/Collections/index.vue

@@ -8,7 +8,7 @@
       aria-description="You've reached the banner area of the Collections section; this section has one image; please use the tab key to go through the content."
     >
       <div
-        class="ban"
+        class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Colections"
@@ -81,19 +81,26 @@
             :src="`/data/Collections/${mbTxt}/${index + 1}.png`"
             :alt="item.h3.replace(/(<([^>]+)>)/gi, '')"
             tabindex="0"
+            aria-label="Image link"
             :aria-description="item.h3.replace(/(<([^>]+)>)/gi, '')"
           />
           <div class="info">
             <!-- 箭头 -->
-            <img src="/data/Collections/arrow.png" alt="" />
+            <img v-if="themeIdx === 0" src="/data/Collections/arrow.png" alt="" />
+            <img v-if="themeIdx === 1" src="/data/Collections/arrow-white.svg" alt="" />
+            <img v-if="themeIdx === 2" src="/data/Collections/arrow-blue.svg" alt="" />
+            <img v-if="themeIdx === 3" src="/data/Collections/arrow-yellow.svg" alt="" />
+            <img v-if="themeIdx === 4" src="/data/Collections/arrow-black.svg" alt="" />
             <h3
               v-html="item.h3"
               tabindex="0"
+              aria-label="Link"
               :aria-description="item.h3.replace(/(<([^>]+)>)/gi, '')"
             ></h3>
             <p
               v-html="item.p"
               tabindex="0"
+              aria-label="Link"
               :aria-description="item.p.replace(/(<([^>]+)>)/gi, '')"
             ></p>
           </div>
@@ -108,9 +115,12 @@
 <script>
 import CollectionsInfo from "./component/info.vue";
 import { Collections } from "@/views/dataAll.js";
+import accessibilityMixin from "/src/views/accessibilityMixin.js"
+
 export default {
   name: "Collections",
   components: { CollectionsInfo },
+  mixins: [accessibilityMixin],
   data() {
     //这里存放数据
     return {

web/src/views/Events/index.vue

@@ -4,7 +4,7 @@
     <div class="banWrapper" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the banner area of the Events page; this area has one image; please use the tab key to go through the content."
     >
-      <div class="ban"
+      <div class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Events"

web/src/views/Exhibitions/index.vue

@@ -4,7 +4,7 @@
     <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="Exhibitions"></div>
+      <div class="ban aria-theme-independent" tabindex="0" aria-label="Image" aria-description="Exhibitions"></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."

web/src/views/JoinSupport/index.vue

@@ -8,7 +8,7 @@
       :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="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Join & Support"

web/src/views/LearnEngage/index.vue

@@ -6,7 +6,7 @@
       aria-label
       :aria-description="`You've reached the banner area of the ${currentTabText} page; this section has one image; please use the tab key to go through the content.`"
     >
-      <div class="ban"
+      <div class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Learn & Engage"

web/src/views/LearnEngage/info.vue

@@ -7,7 +7,7 @@
       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"
+      <div class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="tertiary Learn & Engage"

web/src/views/Publications/index.vue

@@ -6,7 +6,7 @@
       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="Publications"></div>
+      <div class="ban aria-theme-independent" :class="banImg" tabindex="0" aria-label="Image" aria-description="Publications"></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 two options; please use the tab key to go through the menu."

web/src/views/Visit/index.vue

@@ -3,7 +3,7 @@
     <div class="ban_wrapper" 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 navigate through the content.`"
     >
-      <div class="ban" tabindex="0" aria-label="Image" 
+      <div class="ban aria-theme-independent" tabindex="0" aria-label="Image" 
         aria-description="Visit"
       />
     </div>

web/src/views/bottom/Employment.vue

@@ -4,7 +4,7 @@
       aria-label aria-description="You've reached the banner area of the Employment page; this area has one image; please use the tab key to go through the content."
     >
       <div
-        class="ban"
+        class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Employment"

web/src/views/bottom/Index.vue

@@ -1,80 +1,83 @@
 <template>
   <div
     class="bottomIndex"
-    data-aria-viewport-area
-    tabindex="0"
-    aria-label
-    aria-description="You've reached the content area of the Site Index, please use the tab key to navigate through the content."
   >
-    <img
-      src="/data/Index/1.jpg"
-      alt=""
+    <div
       tabindex="0"
-      aria-label=""
-      aria-description="Site Index"
-    />
-    <div class="home" title="Home" >
+      aria-label
+      data-aria-viewport-area
+      aria-description="You've reached the content area of the Site Index, please use the tab key to navigate through the content."
+    >
       <img
-        src="/data/Index/home.jpg"
+        src="/data/Index/1.jpg"
         alt=""
-        @click="skip('/')"
-        @keydown.enter.passive="skip('/')"
         tabindex="0"
-        aria-label="Link"
-        aria-description="Home"
+        aria-label=""
+        aria-description="Site Index"
       />
-    </div>
-    <div class="main" >
-      <img src="/data/Index/main.jpg" alt="" />
-      <!-- 定位的盒子 -->
-      <div class="loc">
-        <div class="one">
-          <div
-            :class="{ active: item.path !== '' }"
-            @click="skip(item.path, item.sroll)"
-            @keydown.enter.passive="skip(item.path, item.sroll)"
-            :title="item.title"
-            v-for="(item, index) in data1"
-            :key="index"
-            :style="`width:${item.width};top:${item.top * 45}px;left:${
-              item.left
-            }`"
-            tabindex="0"
-            aria-label="Link"
-            :aria-description="item.title"
-          ></div>
-        </div>
-        <div class="tow">
-          <div
-            :class="{ active: item.path !== '' }"
-            @click="skip(item.path, item.sroll)"
-            @keydown.enter.passive="skip(item.path, item.sroll)"
-            :title="item.title"
-            v-for="(item, index) in data2"
-            :key="index"
-            :style="`width:${item.width};top:${item.top * 45}px;left:${
-              item.left
-            }`"
-            tabindex="0"
-            aria-label="Link"
-            :aria-description="item.title"
-          ></div>
-        </div>
-        <div class="three">
-          <div
-            :class="{ active: item.path !== '' }"
-            @click="skip(item.path, item.sroll)"
-            @keydown.enter.passive="skip(item.path, item.sroll)"
-            :title="item.title"
-            v-for="(item, index) in data3"
-            :key="index"
-            :style="`width:${item.width};top:${item.top * 45}px;left:${
-              item.left
-            }`"
-            tabindex="0"
-            aria-label="Link"
-            :aria-description="item.title"
-          ></div>
+      <div class="home" title="Home" >
+        <img
+          src="/data/Index/home.jpg"
+          alt=""
+          @click="skip('/')"
+          @keydown.enter.passive="skip('/')"
+          tabindex="0"
+          aria-label="Link"
+          aria-description="Home"
+        />
+      </div>
+      <div class="main" >
+        <img src="/data/Index/main.jpg" alt="" />
+        <!-- 定位的盒子 -->
+        <div class="loc">
+          <div class="one">
+            <div
+              :class="{ active: item.path !== '' }"
+              @click="skip(item.path, item.sroll)"
+              @keydown.enter.passive="skip(item.path, item.sroll)"
+              :title="item.title"
+              v-for="(item, index) in data1"
+              :key="index"
+              :style="`width:${item.width};top:${item.top * 45}px;left:${
+                item.left
+              }`"
+              tabindex="0"
+              aria-label="Link"
+              :aria-description="item.title"
+            ></div>
+          </div>
+          <div class="tow">
+            <div
+              :class="{ active: item.path !== '' }"
+              @click="skip(item.path, item.sroll)"
+              @keydown.enter.passive="skip(item.path, item.sroll)"
+              :title="item.title"
+              v-for="(item, index) in data2"
+              :key="index"
+              :style="`width:${item.width};top:${item.top * 45}px;left:${
+                item.left
+              }`"
+              tabindex="0"
+              aria-label="Link"
+              :aria-description="item.title"
+            ></div>
+          </div>
+          <div class="three">
+            <div
+              :class="{ active: item.path !== '' }"
+              @click="skip(item.path, item.sroll)"
+              @keydown.enter.passive="skip(item.path, item.sroll)"
+              :title="item.title"
+              v-for="(item, index) in data3"
+              :key="index"
+              :style="`width:${item.width};top:${item.top * 45}px;left:${
+                item.left
+              }`"
+              tabindex="0"
+              aria-label="Link"
+              :aria-description="item.title"
+            ></div>
+          </div>
         </div>
       </div>
     </div>

web/src/views/bottom/Use.vue

@@ -3,7 +3,7 @@
     <div class="banWrapper" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the banner area of the Term of use page; this area has one image; please use the tab key to go through the content."
     >
-      <div class="ban"
+      <div class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Term of use"