过了一遍各处元素的变色逻辑

web/README.md

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

web/src/views/Collections/component/info.vue

@@ -16,7 +16,7 @@
           aria-label="Image"
           :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
         />
-        <span :style="{ opacity: smallImageLogoOpacity, left: numLeft, top: numTop }"></span>
+        <span class="aria-theme-independent" :style="{ opacity: smallImageLogoOpacity, left: numLeft, top: numTop }"></span>
       </div>
       <!-- 看大图 -->
       <div class="look" @click="lookBig" @keydown.enter.passive="lookBig"
@@ -31,7 +31,7 @@
       :aria-description="infoObj.info.replace(/(<([^>]+)>)/ig, '')"
     ></div>
     <!-- 关闭按钮 -->
-    <div class="cls" @click="closeInfo" @keydown.enter.passive="closeInfo"
+    <div class="cls aria-theme-independent" @click="closeInfo" @keydown.enter.passive="closeInfo"
       tabindex="0"
       aria-label="Button"
       aria-description="Close"
@@ -58,6 +58,7 @@
           :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
         />
         <span
+          class="aria-theme-independent"
           :style="{ opacity: bigImageLogoOpacity, left: bigNumLeft, top: bigNumTop }"
         ></span>
       </div>

web/src/views/Collections/index.vue

@@ -49,7 +49,9 @@
         <li
           @click="cutTab(item.url)"
           @keydown.enter.passive="cutTab(item.url)"
-          :class="{ active: mbTxt === item.url }"
+          :class="{
+            active: mbTxt === item.url,
+          }"
           v-for="(item, index) in tabData"
           :key="item.name"
           :style="`background-image:url(/data/Collections/tab/${
@@ -58,7 +60,14 @@
           tabindex="0"
           aria-label="Link"
         >
-          <div class="bac">{{ item.name }}</div>
+          <div
+            class="bac"
+            :class="{
+              'aria-inverse-theme': mbTxt === item.url,
+            }"
+          >
+            {{ item.name }}
+          </div>
         </li>
       </ul>
       <!-- 右侧内容 -->

web/src/views/Events/info.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="EventsInfo">
     <div class="conten">
-      <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`"
+      <img class="topBan aria-theme-independent" :src="`/data/About/Events/${imgInd}Ac.jpg`"
         :alt="info.h3"
         tabindex="0"
         :aria-description="info.h3"
@@ -24,7 +24,6 @@
             Home>
           </Router-link>
           <Router-link
-            replace
             to="/Layout/Events"
             tabindex="0"
             aria-description="Events"
@@ -256,11 +255,12 @@ export default {
       width: 1180px;
       height: 450px;
       object-fit: cover;
-      z-index: -1;
     }
     .main {
       width: 900px;
       margin: 0 auto;
+      position: relative;
+      z-index: 1;
       .pos {
         font-size: 12px;
         background: #fff;

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

@@ -5,41 +5,37 @@
         aria-label aria-description="You've reached search box under the Exhibitions page; please use the tab key to go through the content."
       >
         <div class="left">
-          <el-input
-            style="margin-right: 30px"
-            suffix-icon="el-icon-search"
-            v-model="txt"
-            tabindex="0"
-            :aria-description="txt || 'Input search keyword'"
-          >
-          </el-input>
-          <!-- 点击放大镜 -->
           <div
-            class="clickSearch"
-            @click="search"
+            class="text-input-wrapper"
             @keydown.enter.passive="search"
-            tabindex="0"
-            aria-label="Button"
-            aria-description="Search"
-          ></div>
-          <!-- 使用这个组件无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->
-          <!-- <el-select
-            v-model="year"
-            clearable
-            placeholder="Select Year"
-            @change="elSelectChange"
-            tabindex="0"
-            aria-label="Select"
-            aria-description="Select Year"
           >
-            <el-option value="2021" label="2021"></el-option>
-            <el-option value="2020" label="2020"></el-option>
-            <el-option value="2019" label="2019"></el-option>
-            <el-option value="2018" label="2018"></el-option>
-            <el-option value="2017" label="2017"></el-option>
-            <el-option value="2016" label="2016"></el-option>
-            <el-option value="2015" label="2015"></el-option>
-          </el-select> -->
+            <input
+              type="text"
+              autocomplete="off"
+              v-model="txt"
+              tabindex="0"
+              :aria-description="txt || 'search'"
+            />
+            <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-select组件会无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->
           <select
             id="year-selector"
             v-model="year"
@@ -140,10 +136,12 @@
 
 <script>
 import { dataAll } from "@/views/dataAll.js";
+import accessibilityMixin from "/src/views/accessibilityMixin.js"
 
 export default {
   name: "ExhibitionsList",
   components: {},
+  mixins: [accessibilityMixin],
   data() {
     //这里存放数据
     return {
@@ -266,38 +264,39 @@ export default {
     .search {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       .left {
         position: relative;
         display: flex;
         width: 820px;
         height: 48px;
-        /deep/.el-input {
+        .text-input-wrapper {
           height: 48px;
-        }
-        /deep/.el-input__inner {
-          height: 48px;
-          border-radius: 24px;
-        }
-        /deep/.el-input__suffix {
-          right: 10px;
-          font-size: 24px;
-        }
-        /deep/.el-input__icon {
-          line-height: 48px;
-          color: black;
-        }
-        .clickSearch {
-          cursor: pointer;
-          z-index: 999;
-          position: absolute;
-          width: 48px;
-          height: 48px;
-          border-radius: 50%;
-          right: 174px;
-          top: 0;
+          background: white;
+          border: 1px solid #c7c7c7;
+          display: flex;
+          align-items: center;
+          margin-right: 30px;
+          > input {
+            height: 100%;
+            font-size: 24px;
+            border: none;
+            padding: 0px 10px;
+            width: 500px;
+            box-sizing: border-box;
+            border: none;
+            margin: 0;
+            outline: none;
+          }
+          > img {
+            height: 30px;
+            width: 30px;
+            margin-left: 10px;
+            margin-right: 10px;
+            cursor: pointer;
+          }
         }
         .yearSelector {
-          border-radius: 10px;
           border-color: #c0c4cc;
           width: 180px;
           padding-left: 10px;

web/src/views/Exhibitions/index.vue

@@ -11,7 +11,10 @@
     >
       <ul>
         <li
-          :class="{ cur: topId === item.id }"
+          :class="{
+            cur: topId === item.id,
+            'aria-inverse-theme': topId === item.id,
+          }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.path)"
@@ -24,7 +27,11 @@
             :src="require(`@/assets/images/Exhibitions/${item.img}`)"
             alt=""
           />
-          <p>{{ item.name }}</p>
+          <p
+            :class="{'aria-inverse-theme': topId === item.id}"
+          >
+            {{ item.name }}
+          </p>
         </li>
       </ul>
     </div>

web/src/views/Exhibitions/info.vue

@@ -8,7 +8,7 @@
         tabindex="0"
         aria-label="Link"
       >
-        <span></span> Exhibition Overview
+        <span class="aria-inverse-theme"></span> Exhibition Overview
       </li>
       <li :class="{ cur: gunInd === 2 }"
         @click="cutGun(2)"
@@ -78,8 +78,8 @@
           <div class="title_2" tabindex="0">{{ data.title }}</div>
           <div class="info" >
             <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>
+            <span v-if="data.time" class="info_2 aria-theme-independent" tabindex="0">{{ data.time }}</span>
+            <span v-if="data.loc" class="info_3 aria-theme-independent" tabindex="0">{{ data.loc }}</span>
           </div>
         </div>
         <div class="content_2" data-aria-viewport-area tabindex="0"

web/src/views/Home/index.vue

@@ -70,7 +70,11 @@
         aria-description="Reservation"
       >
         <div class="title">
-          <span>Reservation</span>
+          <span
+            class="aria-theme-independent"
+          >
+            Reservation
+          </span>
         </div>
         <div class="info">
           <router-link class="p" to="/Layout/Visit/2"
@@ -82,8 +86,8 @@
             <img src="../../assets/images/bott1.jpg" alt="Reservation"/>
           </router-link>
           <div class="d">
-            <p class="n1" tabindex="0">Online Reservation</p>
-            <p class="n2" tabindex="0">Telephone Reservation</p>
+            <p class="n1 aria-theme-independent" tabindex="0">Online Reservation</p>
+            <p class="n2 aria-theme-independent" tabindex="0">Telephone Reservation</p>
             <p class="n3" tabindex="0">Individual <span>+86 (10) 63393339</span></p>
             <p class="n3" tabindex="0">Group <span>+86 (10) 63370458</span></p>
           </div>
@@ -95,7 +99,7 @@
         aria-description="Visit Info"
       >
         <div class="title">
-          <span>Visit Info</span>
+          <span class="aria-theme-independent">Visit Info</span>
         </div>
         <div class="info">
           <router-link class="p" to="/Layout/Visit/1"
@@ -107,10 +111,10 @@
             <img src="../../assets/images/bott2.jpg" alt="Hours, Direction & Admission"/>
           </router-link>
           <div class="d">
-            <p class="n4" tabindex="0">Opening Hours 09:00-17:00</p>
+            <p class="n4 aria-theme-independent" tabindex="0">Opening Hours 09:00-17:00</p>
             <p class="n5" tabindex="0">No admission after 16:00</p>
             <p class="n5" tabindex="0">Closed on Monday</p>
-            <p class="n6" tabindex="0">Phone</p>
+            <p class="n6 aria-theme-independent" tabindex="0">Phone</p>
             <p tabindex="0">+86 (10) 63370491</p>
           </div>
         </div>
@@ -121,7 +125,7 @@
         aria-description="Partners & Connections"
       >
         <div class="title">
-          <span>Partners & Connections</span>
+          <span class="aria-theme-independent">Partners & Connections</span>
         </div>
         <div class="info">
           <router-link class="p" to="/Layout/About"
@@ -133,7 +137,7 @@
             <img src="../../assets/images/bott3.jpg" alt="Partners & Connections"/>
           </router-link>
           <div class="d">
-            <p class="n7" tabindex="0">Partners & Connections</p>
+            <p class="n7 aria-theme-independent" tabindex="0">Partners & Connections</p>
           </div>
         </div>
       </div>
@@ -143,7 +147,7 @@
         aria-description="Events"
       >
         <div class="title">
-          <span>Events</span>
+          <span class="aria-theme-independent">Events</span>
         </div>
         <div class="info">
           <router-link class="p" to="/Layout/Events"
@@ -155,7 +159,7 @@
             <img src="../../assets/images/bott4.jpg" alt="Events"/>
           </router-link>
           <div class="d">
-            <p class="n8" tabindex="0">Events</p>
+            <p class="n8 aria-theme-independent" tabindex="0">Events</p>
           </div>
         </div>
       </div>

web/src/views/JoinSupport/Give.vue

@@ -15,7 +15,7 @@
         </div>
       </div>
       <div
-        class="right"
+        class="right aria-theme-independent"
         @click="skip(4)"
         @keydown.enter.passive="skip(4)"
         tabindex="0"
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="right right2" 
+      <div class="right right2 aria-theme-independent"
         @click="skip(5)"
         @keydown.enter.passive="skip(5)"
         tabindex="0"

web/src/views/JoinSupport/GiveInfo.vue

@@ -2,13 +2,13 @@
 <template>
   <div class="GiveInfo">
     <div class="main">
-      <h1>{{ info.h3 }}</h1>
+      <h1 class="aria-theme-independent"><span>{{ info.h3 }}</span></h1>
       <div class="txt" v-html="info.txt"></div>
     </div>
     <div class="phw">
-      <div class="phone">
-        86 (10) 63370488<br />
-        86 (10) 63363388 to extension 6223
+      <div class="phone aria-theme-independent">
+        <span>86 (10) 63370488</span><br />
+        <span>86 (10) 63363388 to extension 6223</span>
       </div>
     </div>
   </div>

web/src/views/JoinSupport/Volunteer.vue

@@ -13,13 +13,13 @@
       :aria-description="item.h3"
     >
       <img :src="`/data/JoinSupport/v${index + 1}.jpg`" alt="" />
-      <h1>{{ item.h3 }}</h1>
+      <h1 class="aria-theme-independent">{{ item.h3 }}</h1>
       <div
-        class="y1"
+        class="y1 aria-theme-independent"
         :style="`background-image:url('/data/JoinSupport/y${index + 1}.png')`"
       ></div>
       <div
-        class="d1"
+        class="d1 aria-theme-independent"
         :style="`background-image:url('/data/JoinSupport/y${index + 1}Ac.png')`"
       ></div>
     </div>

web/src/views/JoinSupport/index.vue

@@ -19,7 +19,10 @@
     >
       <ul >
         <li
-          :class="{ cur: $route.meta.nameAll === item.url }"
+          :class="{
+            cur: $route.meta.nameAll === item.url,
+            'aria-inverse-theme': $route.meta.nameAll === item.url,
+          }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.url)"
@@ -32,7 +35,11 @@
             :src="`/data/JoinSupport/${item.img}`"
             alt=""
           />
-          <p>{{ item.name }}</p>
+          <p
+            :class="{
+              'aria-inverse-theme': $route.meta.nameAll === item.url,
+            }"
+          >{{ item.name }}</p>
         </li>
       </ul>
     </div>

web/src/views/LearnEngage/index.vue

@@ -17,7 +17,10 @@
     >
       <ul>
         <li
-          :class="{ cur: topId === item.url }"
+          :class="{
+            cur: topId === item.url,
+            'aria-inverse-theme': topId === item.url,
+          }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.url)"
@@ -27,7 +30,13 @@
           :aria-description="item.name"
         >
           <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
-          <p>{{ item.name }}</p>
+          <p
+            :class="{
+              'aria-inverse-theme': topId === item.url,
+            }"
+          >
+            {{ item.name }}
+          </p>
         </li>
       </ul>
     </div>

web/src/views/LearnEngage/info.vue

@@ -48,9 +48,9 @@
     >
       <div class="title" tabindex="0">{{ dataObj.title }}</div>
       <div class="info" >
-        <span class="info1" tabindex="0">{{ dataObj.time }}</span>
-        <span class="info2" tabindex="0">{{ dataObj.loc }}</span>
-        <span class="info3" tabindex="0">{{ dataObj.ren }}</span>
+        <span class="info1 aria-theme-independent" tabindex="0">{{ dataObj.time }}</span>
+        <span class="info2 aria-theme-independent" tabindex="0">{{ dataObj.loc }}</span>
+        <span class="info3 aria-theme-independent" tabindex="0">{{ dataObj.ren }}</span>
       </div>
       <div class="main" >
         <p v-html="dataObj.top" v-if="dataObj.top"
@@ -69,8 +69,8 @@
         ></div>
       </div>
       <div class="main bottom" >
-        <div class="top" tabindex="0" aria-description="Online Reservation">
-          <span tabindex="0">{{ dataObj.tipTime }}</span>
+        <div class="top aria-theme-independent" tabindex="0" aria-description="Online Reservation">
+          <span tabindex="0" class="aria-theme-independent">{{ dataObj.tipTime }}</span>
         </div>
         <div class="m2">
           <img src="/data/LearnEngage/m-27.jpg" alt="tip" 

web/src/views/Publications/Publications1.vue

@@ -7,13 +7,16 @@
       <div class="title" >
         <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
         <span tabindex="0">{{ $route.meta.nameAll }}</span>
-        <div class="xian"></div>
+        <div class="xian aria-theme-independent"></div>
       </div>
       <div class="conten" >
         <!-- 左侧 -->
         <div class="menu">
           <p
-            :class="{ cur: txtInd === index }"
+            class="aria-theme-independent"
+            :class="{
+              cur: txtInd === index
+            }"
             v-for="(item, index) in txtData"
             @click="txtInd = index"
             @keydown.enter.passive="txtInd = index"
@@ -21,7 +24,8 @@
             tabindex="0"
             aria-label="Link"
           >
-            {{ item.name }}<span v-show="txtInd === index"></span>
+            {{ item.name }}
+            <span v-show="txtInd === index"></span>
           </p>
         </div>
         <!-- 右侧 -->
@@ -37,7 +41,10 @@
         <span
           @mouseenter="dateInd = i"
           @focus="dateInd = i"
-          :class="{ cur: i === dateInd }"
+          :class="{
+            cur: i === dateInd,
+            'aria-inverse-theme': i === dateInd,
+          }"
           v-for="i in dateData"
           :key="i"
           tabindex="0"

web/src/views/Publications/Publications2.vue

@@ -6,7 +6,7 @@
     <div class="title" tabindex="-1">
       <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
       <span tabindex="0">{{ $route.meta.nameAll }}</span>
-      <div class="xian"></div>
+      <div class="xian aria-theme-independent"></div>
     </div>
     <div class="conten" tabindex="-1">
       <img src="/data/Publications/heng.png" alt="" />

web/src/views/Publications/index.vue

@@ -13,7 +13,10 @@
     >
       <ul >
         <li
-          :class="{ cur: $route.meta.nameAll === item.name }"
+          :class="{
+            cur: $route.meta.nameAll === item.name,
+            'aria-inverse-theme': $route.meta.nameAll === item.name,
+          }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.path)"
@@ -23,7 +26,14 @@
           :aria-description="item.name"
         >
           <img :src="`/data/Publications/${index + 1}.png`" alt="" />
-          <p>{{ item.name }}</p>
+          <p
+            :class="{
+              cur: $route.meta.nameAll === item.name,
+              'aria-inverse-theme': $route.meta.nameAll === item.name,
+            }"
+          >
+            {{ item.name }}
+          </p>
         </li>
       </ul>
     </div>

web/src/views/Visit/Visit2.vue

@@ -49,7 +49,7 @@
           >
             <span>Guidelines for Reservations</span>
             <span
-              class="arrow"
+              class="arrow aria-theme-independent"
               :class="{ 'arrow-up': flag === 'one' }"
               @keydown.enter.passive="cutFlag('one')"
             ></span>
@@ -393,7 +393,7 @@
           >
             <span>Group Visit</span>
             <span
-              class="arrow"
+              class="arrow aria-theme-independent"
               :class="{ 'arrow-up': flag === 'two' }"
               @keydown.enter.passive="cutFlag('two')"
             ></span>
@@ -511,7 +511,7 @@
           >
             <span tabindex="0">Relevant Information</span>
             <span
-              class="arrow"
+              class="arrow aria-theme-independent"
               :class="{ 'arrow-up': flag === 'three' }"
               @keydown.enter.passive="cutFlag('three')"
             ></span>

web/src/views/Visit/Visit3.vue

@@ -7,14 +7,21 @@
         <ul>
           <li class="titleon"
             v-for="(item,index) in topData"
-            :key="index" :class="{titleoff:index===topInd}"
+            :key="index"
+            :class="{
+              titleoff: index===topInd,
+            }"
             @mouseenter='topInd=index'
             @focus="topInd=index"
             tabindex="0"
             aria-label="Image link"
             :aria-description="`Floor Plans ${item}`"
           >
-            {{item}}&nbsp;&nbsp;&nbsp;
+            <span :class="{
+              'aria-inverse-theme': index === topInd,
+            }">
+              {{item}}&nbsp;&nbsp;&nbsp;
+            </span>
           </li>
         </ul>
       </div>

web/src/views/bottom/Employment.vue

@@ -31,8 +31,8 @@
           2017 Second-Half Public Recruitment Notice of the Capital Museum
         </div>
         <div class="info">
-          <span class="info_1" tabindex="0">2018</span>
-          <span class="info_3" tabindex="0">Capital Museum</span>
+          <span class="info_1 aria-theme-independent" tabindex="0">2018</span>
+          <span class="info_3 aria-theme-independent" tabindex="0">Capital Museum</span>
         </div>
         <div class="content_2">
           <div class="title_3">——<span tabindex="0">Exhibition Overview</span>——</div>

web/src/views/bottom/Index.vue

@@ -29,9 +29,10 @@
       <div class="main" >
         <img src="/data/Index/main.jpg" alt="" />
         <!-- 定位的盒子 -->
-        <div class="loc">
-          <div class="one">
+        <div class="loc aria-theme-independent">
+          <div class="one aria-theme-independent">
             <div
+              class="one aria-theme-independent"
               :class="{ active: item.path !== '' }"
               @click="skip(item.path, item.sroll)"
               @keydown.enter.passive="skip(item.path, item.sroll)"
@@ -46,8 +47,9 @@
               :aria-description="item.title"
             ></div>
           </div>
-          <div class="tow">
+          <div class="tow aria-theme-independent">
             <div
+              class="one aria-theme-independent"
               :class="{ active: item.path !== '' }"
               @click="skip(item.path, item.sroll)"
               @keydown.enter.passive="skip(item.path, item.sroll)"
@@ -62,8 +64,9 @@
               :aria-description="item.title"
             ></div>
           </div>
-          <div class="three">
+          <div class="three aria-theme-independent">
             <div
+              class="one aria-theme-independent"
               :class="{ active: item.path !== '' }"
               @click="skip(item.path, item.sroll)"
               @keydown.enter.passive="skip(item.path, item.sroll)"

web/src/views/bottom/Use.vue

@@ -29,8 +29,8 @@
       <div class="y_box" >
         <div class="title_2" tabindex="0">Terms of Use</div>
         <div class="info">
-          <span class="info_1" tabindex="0">2018</span>
-          <span class="info_3" tabindex="0">Capital Museum</span>
+          <span class="info_1 aria-theme-independent" tabindex="0">2018</span>
+          <span class="info_3 aria-theme-independent" tabindex="0">Capital Museum</span>
         </div>
         <div class="content_2">
           <div class="title_3">——<span tabindex="0">Exhibition Overview</span>——</div>

web/src/views/layout/index.vue

@@ -12,7 +12,7 @@
               v-if="[0, 2, 4].includes(themeIdx)"
             />
             <img src="@/assets/images/logo.webp" 
-              alt="" 
+              alt=""
               style="width: 198px; height: 40px;"
               v-if="[1, 3].includes(themeIdx)"
             />