bug

web/src/config.js

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

web/src/views/About/index.vue

@@ -37,7 +37,9 @@
     <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 v-if="themeIdx === 0" class="director-title-for-focus" tabindex="0" aria-description="From the Director"></div>
+      <div v-if="themeIdx !== 0" class="director-title-visible" tabindex="0">From the Director</div>
+      <div class="text-wrapper">
         <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
@@ -70,7 +72,9 @@
     <div class="history" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the History section, please use the tab key to go through the content."
     >
-      <div >
+      <div v-if="themeIdx === 0" class="history-title-for-focus" tabindex="0" aria-description="History"></div>
+      <div v-if="themeIdx !== 0" class="history-title-visible" tabindex="0">History</div>
+      <div class="text-wrapper" >
         <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
@@ -112,14 +116,20 @@
     <div class="partner" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Patrners & Connections section, please use the tab key to go through the information."
     >
+      <div v-if="themeIdx === 0" class="partners-title-for-focus" tabindex="0" aria-description="Partners & Connections"></div>
+      <div v-if="themeIdx !== 0" class="partners-title-visible" tabindex="0">Partners & Connections</div>
       <ul >
-        <li v-for="(item, index) in link" :key="index">
+        <li v-for="(item, index) in link" :key="index"
+          class="aria-theme-independent"
+        >
           <a :href="item.name" target="_blank" :title="item.pop"
             tabindex="0"
             aria-label="Image link"
             :aria-description="item.pop"
+            class="aria-theme-independent"
           >
             <span
+              class="aria-theme-independent"
               :style="`background-image: url(/data/About/link${index + 1}.jpg)`"
             ></span>
           </a>
@@ -140,6 +150,8 @@
     <div class="contact" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Contact section, please use the tab key to go through the information."
     >
+      <div v-if="themeIdx === 0" class="contact-title-for-focus" tabindex="0" aria-description="Contact"></div>
+      <div v-if="themeIdx !== 0" class="contact-title-visible" tabindex="0">Contact</div>
       <p tabindex="0">Official website of Capital Museum: <a :href="$homePageUrl" tabindex="0">{{$homePageUrl}}</a></p>
       <p tabindex="0">
         Telephone reservation (individual visitors):
@@ -162,9 +174,12 @@
 </template>
 
 <script>
+import accessibilityMixin from "/src/views/accessibilityMixin.js"
+
 export default {
   name: "About",
   components: {},
+  mixins: [accessibilityMixin],
   data() {
     //这里存放数据
     return {
@@ -230,7 +245,24 @@ export default {
     color: #fff;
     line-height: 20px;
     padding-bottom: 20px;
-    & > div {
+    > .director-title-for-focus {
+      position: absolute;
+      width: 425px;
+      height: 55px;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 45px;
+    }
+    > .director-title-visible {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 60px;
+      font-size: 48px;
+      line-height: 1;
+      font-weight: bold;
+    }
+    & > .text-wrapper {
       width: 750px;
       margin: 0 auto;
       padding-left: 50px;
@@ -261,7 +293,24 @@ export default {
     background-image: url("/data/About/au3.gif");
     background-repeat: no-repeat;
     background-position: center top;
-    & > div {
+    > .history-title-for-focus {
+      position: absolute;
+      width: 150px;
+      height: 40px;
+      left: calc(50% - 509px);
+      transform: translateX(-50%);
+      top: 85px;
+    }
+    > .history-title-visible {
+      position: absolute;
+      left: calc(50% - 509px);
+      transform: translateX(-50%);
+      top: 95px;
+      font-size: 24px;
+      line-height: 1;
+      font-weight: bold;
+    }
+    & > .text-wrapper {
       width: 1120px;
       margin: 0 auto;
       padding-top: 165px;
@@ -271,11 +320,29 @@ export default {
     }
   }
   .partner {
+    position: relative;
     clear: both;
     width: 100%;
     height: 559px;
     position: relative;
     background: url("/data/About/a6.jpg") no-repeat top center;
+    > .partners-title-for-focus {
+      position: absolute;
+      width: 425px;
+      height: 55px;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 45px;
+    }
+    > .partners-title-visible {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 60px;
+      font-size: 36px;
+      line-height: 1;
+      font-weight: bold;
+    }
     & > ul {
       width: 1190px;
       position: absolute;
@@ -345,6 +412,24 @@ export default {
     padding: 143px 35px 35px;
     font-size: 24px;
     line-height: 30px;
+    position: relative;
+    > .contact-title-for-focus {
+      position: absolute;
+      width: 208;
+      height: 55px;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 34px;
+    }
+    > .contact-title-visible {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 34px;
+      font-size: 48px;
+      line-height: 1;
+      font-weight: bold;
+    }
     & > p {
       padding: 10px 0;
       font-size: 14px;

web/src/views/About/link.vue

@@ -35,7 +35,7 @@
       aria-label aria-description="You've reached the list of Partners & Connections, please use the tab key to navigate through the list."
     >
       <div
-        class="lmname"
+        class="lmname aria-theme-independent"
         tabindex="0"
         aria-label=""
         aria-description="Partners & Connections"
@@ -43,8 +43,9 @@
       <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index" >
         <div class="box">
           <h2 :title="item.title" tabindex="0">{{item.title}}</h2>
-          <div class="row" v-for="val in item.son" :key="val.img" :title="val.pop">
-            <a 
+          <div class="row aria-theme-independent" v-for="val in item.son" :key="val.img" :title="val.pop">
+            <a
+              class="aria-theme-independent"
               :href="val.url"
               target="_blank" 
               tabindex="0"
@@ -52,6 +53,7 @@
               :aria-description="val.pop"
             >
               <span
+                class="aria-theme-independent"
                 :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
               ></span>
             </a>