优化主题色效果

web/src/assets/css/ariaGlobalStyle.less

@@ -18,7 +18,7 @@
     &:focus {
       outline: 3px solid black;
     }
-    * { // TODO: 看看博物馆项目代码有没有精细地只给需要变色的元素添加class。
+    *:not(.aria-theme-independent) {
       background-color: white !important;
       color: black !important;
       &:focus {
@@ -44,7 +44,7 @@
     &:focus {
       outline: 3px solid yellow;
     }
-    * {
+    *:not(.aria-theme-independent) {
       background-color: blue !important;
       color: yellow !important;
       &:focus {
@@ -70,7 +70,7 @@
     &:focus {
       outline: 3px solid black;
     }
-    * {
+    *:not(.aria-theme-independent) {
       background-color: yellow !important;
       color: black !important;
       &:focus {
@@ -96,7 +96,7 @@
     &:focus {
       outline: 3px solid yellow;
     }
-    * {
+    *:not(.aria-theme-independent) {
       background-color: black !important;
       color: yellow !important;
       &:focus {

web/src/views/Visit/Visit2.vue

@@ -41,16 +41,14 @@
       <ul>
         <!-- 第一个内容 -->
         <li class="title">
-          <div class="showCon" @click="cutFlag('one')"></div>
-          <span tabindex="0">Guidelines for Reservations</span>
-          <span
-            class="arrow"
-            :class="{ 'arrow-up': flag === 'one' }"
-            @keydown.enter.passive="cutFlag('one')"
-            tabindex="0"
-            aria-label="Button"
-            aria-description="Show / hide detail"
-          ></span>
+          <div class="showCon" aria-label="Button" @click="cutFlag('one')">
+            <span>Guidelines for Reservations</span>
+            <span
+              class="arrow"
+              :class="{ 'arrow-up': flag === 'one' }"
+              @keydown.enter.passive="cutFlag('one')"
+            ></span>
+          </div>
           <div class="in-sidebar" :class="{ inSidebarOne: flag === 'one' }">
             <p style="text-align: center"><br /></p>
             <p>
@@ -372,16 +370,19 @@
         </li>
         <!-- 第二个内容 -->
         <li class="title title2">
-          <div class="showCon" @click="cutFlag('tow')"></div>
-          <span tabindex="0">Group Visit</span>
-          <span
-            class="arrow"
-            :class="{ 'arrow-up': flag === 'tow' }"
-            @keydown.enter.passive="cutFlag('tow')"
+          <div
+            class="showCon"
             tabindex="0"
             aria-label="Button"
-            aria-description="Show / hide detail"
-          ></span>
+            @click="cutFlag('tow')"
+          >
+            <span>Group Visit</span>
+            <span
+              class="arrow"
+              :class="{ 'arrow-up': flag === 'tow' }"
+              @keydown.enter.passive="cutFlag('tow')"
+            ></span>
+          </div>
           <div class="in-sidebar" :class="{ inSidebarTow: flag === 'tow' }">
             <table data-sort="sortDisabled">
               <tbody>
@@ -484,16 +485,14 @@
         </li>
         <!-- 第三个内容 -->
         <li class="title title3">
-          <div class="showCon" @click="cutFlag('three')"></div>
-          <span tabindex="0">Relevant Information</span>
-          <span
-            class="arrow"
-            :class="{ 'arrow-up': flag === 'three' }"
-            @keydown.enter.passive="cutFlag('three')"
-            tabindex="0"
-            aria-label="Button"
-            aria-description="Show / hide detail"
-          ></span>
+          <div class="showCon" tabindex="0" aria-label="Button" @click="cutFlag('three')">
+            <span tabindex="0">Relevant Information</span>
+            <span
+              class="arrow"
+              :class="{ 'arrow-up': flag === 'three' }"
+              @keydown.enter.passive="cutFlag('three')"
+            ></span>
+          </div>
           <div class="in-sidebar" :class="{ inSidebarThree: flag === 'three' }">
             <p><br /></p>
             <p tabindex="0">
@@ -683,33 +682,30 @@ export default {
         background: url("../../assets/images/Visit/m-28.jpg") no-repeat;
         .showCon{
           cursor: pointer;
-          position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 50px;
+          span {
+            margin-left: 10px;
+          }
+          .arrow {
+            float: right;
+            cursor: pointer;
+            width: 50px;
+            height: 50px;
+            background: url("../../assets/images/Visit/m-31.png") no-repeat center
+              left;
+          }
+          .arrow-up {
+            background: url("../../assets/images/Visit/m-32.png") no-repeat center
+              left;
+          }
         }
-        span {
-          margin-left: 10px;
-        }
-        .arrow {
-          float: right;
-          cursor: pointer;
-          width: 50px;
-          height: 50px;
-          background: url("../../assets/images/Visit/m-31.png") no-repeat center
-            left;
-        }
-        .arrow-up {
-          background: url("../../assets/images/Visit/m-32.png") no-repeat center
-            left;
-        }
-        div {
+        .in-sidebar {
           font-size: 18px;
           line-height: 28px;
           color: #000;
-        }
-        .in-sidebar {
           height: 0px;
           overflow: hidden;
           transition: all 0.3s;

web/src/views/layout/index.vue

@@ -115,7 +115,7 @@
       </div>
       <!-- 固定的二维码和游戏 -->
       <div
-        class="rightNav" data-aria-viewport-area tabindex="0"
+        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" >