Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/ShouBo into master

web/src/assets/css/ariaGlobalStyle.less

@@ -42,13 +42,13 @@
     background-color: blue !important;
     color: yellow !important;
     &:focus {
-      outline: 3px solid blue;
+      outline: 3px solid yellow;
     }
     * {
       background-color: blue !important;
       color: yellow !important;
       &:focus {
-        outline: 3px solid blue;
+        outline: 3px solid yellow;
       }
     }
     a {
@@ -68,13 +68,13 @@
     background-color: yellow !important;
     color: black !important;
     &:focus {
-      outline: 3px solid yellow;
+      outline: 3px solid black;
     }
     * {
       background-color: yellow !important;
       color: black !important;
       &:focus {
-        outline: 3px solid yellow;
+        outline: 3px solid black;
       }
     }
     a {
@@ -94,13 +94,13 @@
     background-color: black !important;
     color: yellow !important;
     &:focus {
-      outline: 3px solid black;
+      outline: 3px solid yellow;
     }
     * {
       background-color: black !important;
       color: yellow !important;
       &:focus {
-        outline: 3px solid black;
+        outline: 3px solid yellow;
       }
     }
     a {

web/src/config.js

@@ -9,7 +9,7 @@ switch (process.env.NODE_ENV) {
     break;
 }
 
-const version = 'v0519.1049'
+const version = 'v0523.1411'
 
 module.exports = {
   publicPath,

web/src/utils.js

@@ -17,7 +17,8 @@ function mapTags(tag) {
     ret = 'Textbox'
     break
   default:
-    ret = 'Text'
+    ret = ''
+    // ret = 'Text'
     break
   }
   return ret
@@ -25,7 +26,7 @@ function mapTags(tag) {
 
 let lastMeaningfulNode = null
 function extractTextForMagnify(e, allowRepeatd = false) {
-  let meaningfulNode = e.path[0]
+  let meaningfulNode = e.target
 
   if (e.type === 'mouseover') {
     while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
@@ -185,7 +186,7 @@ function __focusNextFocusableNode(treeWalker) {
     }
     if (nextNode.focus) {
       nextNode.focus()
-      if (document.activeElement === nextNode) {
+      if (document.activeElement === nextNode && nextNode.tabIndex !== -1) {
         return true
       }
     }

web/src/views/About/Director.vue

@@ -35,7 +35,7 @@
       aria-label aria-description="You've reached the content area of the From the Director page, please use the tab key to navigate through the content."
     >
       <h1 class="webTitle" tabindex="0">From the Director</h1>
-      <div class="peopleBox" tabindex="-1">
+      <div class="peopleBox" >
         <h2 tabindex="0">——<span>Leadership</span>——</h2>
         <ul>
           <li>
@@ -47,7 +47,7 @@
           </li>
         </ul>
       </div>
-      <div class="contentBox" tabindex="-1">
+      <div class="contentBox" >
         <p tabindex="0">
           The Capital Museum of China is a comprehensive museum affiliated with
           the municipal government of Beijing. It is committed to displaying

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 tabindex="-1">
+      <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
@@ -70,7 +70,7 @@
     <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 tabindex="-1">
+      <div >
         <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
@@ -112,7 +112,7 @@
     <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."
     >
-      <ul tabindex="-1">
+      <ul >
         <li v-for="(item, index) in link" :key="index">
           <a :href="item.name" target="_blank" :title="item.pop"
             tabindex="0"
@@ -149,7 +149,7 @@
         Telephone reservation (group visitors): <span tabindex="0">+86 (10) 63370458</span>
       </p>
       <p tabindex="0">Inquiry Hotline: <span tabindex="0">+86 (10) 63370491</span></p>
-      <p tabindex="-1">
+      <p >
         <a href="mailto:ICD@capitalmuseum.org.cn"
           tabindex="0"
           aria-description="Email Us"

web/src/views/About/link.vue

@@ -37,10 +37,10 @@
       <div
         class="lmname"
         tabindex="0"
-        aria-label="Text"
+        aria-label=""
         aria-description="Partners & Connections"
       ></div>
-      <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index" tabindex="-1">
+      <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">
@@ -64,7 +64,7 @@
     >
       <img src="/data/About/botTxt.gif" alt=""
         tabindex="0"
-        aria-label="Text"
+        aria-label=""
         aria-description="Join US Telephone +86(10)63393339 E-mail ICD@capitalmuseum.org.cn"
       >
     </div>

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

@@ -125,7 +125,7 @@ export default {
               this.bigNumLeft = Math.ceil(Math.random() * maxLeft) + "px";
               this.bigNumTop = Math.ceil(Math.random() * maxTop) + "px";
             }
-          }, 2000);
+          }, 1000);
         }, 100);
       });
     },
@@ -183,7 +183,7 @@ export default {
             this.numLeft = Math.ceil(Math.random() * bigLeft) + "px";
             this.numTop = Math.ceil(Math.random() * bigTop) + "px";
           } else this.num = 0;
-        }, 2000);
+        }, 1000);
       }, 100);
     });
   },

web/src/views/Events/info.vue

@@ -38,7 +38,7 @@
           tabindex="0"
           aria-label="You've reached the content area of the Events sub-page, please use the tab key to go through the content."
         >
-          <div class="title" tabindex="-1">
+          <div class="title" >
             <div class="left">
               <h3 v-html="info.h3" tabindex="0"></h3>
               <div class="txt">
@@ -59,15 +59,15 @@
               <p tabindex="0">{{ info.i }}</p>
             </div>
           </div>
-          <div class="txtMain" v-html="info.main" v-if="info.main" tabindex="-1"></div>
+          <div class="txtMain" v-html="info.main" v-if="info.main" ></div>
           <div
             class="txtMain"
             v-if="info.mainArr"
             v-html="info.mainArr[mainArr]"
-            tabindex="-1"
+            
           ></div>
           <!-- 分页 -->
-          <div class="page" v-if="info.mainArr" tabindex="-1">
+          <div class="page" v-if="info.mainArr" >
             <span
               @click="pageCut(i-1)"
               @keydown.enter.passive="pageCut(i-1)"

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

@@ -125,6 +125,7 @@
           <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
             <img :src="item.cover" alt="" 
               tabindex="0"
+              aria-label="Image link"
               :aria-description="item.h3"
             />
             <p tabindex="0">{{ item.h3 }}</p>

web/src/views/Exhibitions/info.vue

@@ -41,7 +41,7 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
     >
-      <div tabindex="-1">
+      <div >
         <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home"
           replace
@@ -75,7 +75,7 @@
           aria-label aria-description="You've reached the section of exhibition title, please use the tab key to navigate through the content."
         >
           <div class="title_2" tabindex="0">{{ data.title }}</div>
-          <div class="info" tabindex="-1">
+          <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>
@@ -89,16 +89,17 @@
             v-show="index === pageInd"
             v-for="(item, index) in data.page"
             :key="index"
-            tabindex="-1"
+            
           >
             <p class="one" v-html="item.tit" tabindex="0"></p>
             <div class="fuTxt" v-html="item.article" tabindex="0"></div>
           </div>
           <!-- 分页 -->
-          <div class="paging" tabindex="-1">
+          <div class="paging" >
             <span v-show="pageInd !== 0"
               @click="pageCut(pageInd - 1)"
               @keydown.enter.passive="pageCut(pageInd - 1)"
+              tabindex="0"
               aria-label="Link"
               aria-description="Previous page"
             >
@@ -110,6 +111,7 @@
               :key="index"
               @click="pageCut(index)"
               @keydown.enter.passive="pageCut(index)"
+              tabindex="0"
               aria-label="Link"
             >
               {{ index + 1 }}
@@ -119,6 +121,7 @@
               v-show="pageInd !== data.page.length - 1"
               @click="pageCut(pageInd + 1)"
               @keydown.enter.passive="pageCut(pageInd + 1)"
+              tabindex="0"
               aria-label="Link"
               aria-description="Next page"
             >
@@ -133,7 +136,7 @@
       >
         <div class="title_3" tabindex="0">——<span>Exhibition Objects</span>——</div>
         <!-- 图片 -->
-        <div class="row" :class="{ show: showObjects }" tabindex="-1">
+        <div class="row" :class="{ show: showObjects }" >
           <div class="rowOne" :title="i" v-for="i in data.objects" :key="i"
             tabindex="0" aria-label="" aria-description=""
           >
@@ -163,7 +166,7 @@
             </div>
           </div>
         </div>
-        <div class="more" tabindex="-1">
+        <div class="more" >
           <span
             @click="showObjects = !showObjects"
             @keydown.enter.passive="showObjects = !showObjects"
@@ -185,7 +188,7 @@
       >
         <div class="title_3" tabindex="0">——<span>Exhibition Galleries</span>——</div>
         <!-- 图片 -->
-        <div class="box" :class="{ show: showGalleries }" tabindex="-1">
+        <div class="box" :class="{ show: showGalleries }" >
           <img
             :title="i"
             :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
@@ -196,7 +199,7 @@
             aria-description=""
           />
         </div>
-        <div class="more" v-show="data.galleries>3" tabindex="-1">
+        <div class="more" v-show="data.galleries>3" >
           <span
             @click="showGalleries = !showGalleries"
             @keydown.enter.passive="showGalleries = !showGalleries"

web/src/views/JoinSupport/index.vue

@@ -17,7 +17,7 @@
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the secondary menu of the Join & Support section; this menu has two options; please use the tab key to go through the menu."
     >
-      <ul tabindex="-1">
+      <ul >
         <li
           :class="{ cur: $route.meta.nameAll === item.url }"
           v-for="(item, index) in topLi"

web/src/views/LearnEngage/info.vue

@@ -17,7 +17,7 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
     >
-      <div tabindex="-1">
+      <div >
         <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home"
           replace
@@ -47,12 +47,12 @@
       aria-label aria-description="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."
     >
       <div class="title" tabindex="0">{{ dataObj.title }}</div>
-      <div class="info" tabindex="-1">
+      <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>
       </div>
-      <div class="main" tabindex="-1">
+      <div class="main" >
         <p v-html="dataObj.top" v-if="dataObj.top"
           tabindex="0"
           :aria-description="dataObj.top.replace(/(<([^>]+)>)/ig, '')"
@@ -68,7 +68,7 @@
           :aria-description="dataObj.txt.replace(/(<([^>]+)>)/ig, '')"
         ></div>
       </div>
-      <div class="main bottom" tabindex="-1">
+      <div class="main bottom" >
         <div class="top" tabindex="0">{{ dataObj.tipTime }}</div>
         <div class="m2">
           <img src="/data/LearnEngage/m-27.jpg" alt="tip" 

web/src/views/Publications/Publications1.vue

@@ -4,12 +4,12 @@
     <div class="magzines-wrapper" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Magazines page, please use the tab key to go through the content."
     >
-      <div class="title" tabindex="-1">
+      <div class="title" >
         <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
         <span tabindex="0">{{ $route.meta.nameAll }}</span>
         <div class="xian"></div>
       </div>
-      <div class="conten" tabindex="-1">
+      <div class="conten" >
         <!-- 左侧 -->
         <div class="menu">
           <p
@@ -33,7 +33,7 @@
     >
       <div class="title_2" tabindex="0">Our Magazines</div>
       <!-- 下面书籍 -->
-      <div class="tabTimeBox" tabindex="-1">
+      <div class="tabTimeBox" >
         <span
           @mouseenter="dateInd = i"
           @focus="dateInd = i"
@@ -46,7 +46,7 @@
           {{ i }}
         </span>
       </div>
-      <ul class="imgList" tabindex="-1">
+      <ul class="imgList" >
         <li v-for="item in imgList" :key="item.id"
           @click="jump(item.id)"
           @keydown.enter.passive="jump(item.id)"

web/src/views/Publications/Publications2.vue

@@ -12,9 +12,12 @@
       <img src="/data/Publications/heng.png" alt="" />
       <ul>
         <li v-for="(item, index) in list" :key="index">
-          <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt="" />
-          <div class="show" tabindex="0">
-            <a :href="item" target="_blank" tabindex="0">
+          <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt="" 
+            tabindex="0"
+            :aria-description="item.title"
+          />
+          <div class="show">
+            <a :href="item.url" target="_blank" tabindex="0">
               <img src="/data/Publications/Exhibition/href.png" />
               <p>Click here to open the catalogue</p>
             </a>
@@ -36,12 +39,30 @@ export default {
     //这里存放数据
     return {
       list: [
-        "http://download.china.cn/idc/pdf/A_brief_history_of_Beijing.pdf",
-        "http://images.china.cn/images1/en/pdf/Geneva.pdf",
-        "http://download.china.cn/idc/pdf/Renaissance.pdf",
-        "http://download.china.cn/idc/pdf/TheMetropolisesandtheProsperities.pdf",
-        "http://images.china.cn/images1/en/pdf/Andes.pdf",
-        "http://images.china.cn/images1/en/pdf/smileofkhmer.pdf",
+        {
+          url: "http://download.china.cn/idc/pdf/A_brief_history_of_Beijing.pdf",
+          title: 'A Brief History of Beijing',
+        },
+        {
+          url: "http://images.china.cn/images1/en/pdf/Geneva.pdf",
+          title: 'Geneva at the Heart of Time – Origin of Swiss Watchmaking Culture',
+        },
+        {
+          url: "http://download.china.cn/idc/pdf/Renaissance.pdf",
+          title: 'Art, Culture and Daily Life in Renaissance Italy',
+        },
+        {
+          url: "http://download.china.cn/idc/pdf/TheMetropolisesandtheProsperities.pdf",
+          title: 'The Metropolises and the Prosperities within — Tokyo and Beijing in the 18th Century',
+        },
+        {
+          url: "http://images.china.cn/images1/en/pdf/Andes.pdf",
+          title: 'ANCIENT CIVILIZATION OF THE ANDES',
+        },
+        {
+          url: "http://images.china.cn/images1/en/pdf/smileofkhmer.pdf",
+          title: 'Smile of Khmer: Cambodian Ancient Cultural Relics and Arts',
+        },
       ],
     };
   },

web/src/views/Publications/index.vue

@@ -11,7 +11,7 @@
     <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."
     >
-      <ul tabindex="-1">
+      <ul >
         <li
           :class="{ cur: $route.meta.nameAll === item.name }"
           v-for="(item, index) in topLi"

web/src/views/Search/About.vue

@@ -11,8 +11,8 @@
       aria-label="Link"
       :aria-description="item.h3"
     >
-      <h3 v-html="item.h3" tabindex="0"></h3>
-      <p v-html="item.p" tabindex="0"></p>
+      <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+      <p v-html="item.p" tabindex="0" aria-label="Link"></p>
     </div>
   </div>
 </template>

web/src/views/Search/All.vue

@@ -14,12 +14,13 @@
       <div class="left" v-if="item.cover">
         <img :src="item.cover" :alt="item.h3" 
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right" :class="{ rightAC: !item.p }">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
     <!-- 分页 -->

web/src/views/Search/Collections.vue

@@ -14,12 +14,13 @@
       <div class="left">
         <img :src="item.cover" :alt="item.h3" 
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
     <!-- 分页 -->

web/src/views/Search/Employment.vue

@@ -14,12 +14,13 @@
       <div class="left" v-if="item.cover">
         <img :src="item.cover" :alt="item.h3" 
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Events.vue

@@ -14,12 +14,13 @@
       <div class="left" v-if="item.cover">
         <img :src="item.cover" alt="item.h3"
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Exhibitions.vue

@@ -14,12 +14,13 @@
       <div class="left">
         <img :src="item.cover" alt="item.h3"
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
     <!-- 分页 -->

web/src/views/Search/Join.vue

@@ -14,12 +14,13 @@
       <div class="left" v-if="item.cover">
         <img :src="item.cover" alt="item.h3"
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Learn.vue

@@ -14,12 +14,13 @@
       <div class="left">
         <img :src="item.cover" :alt="item.h3" 
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
     <!-- 分页 -->

web/src/views/Search/Research.vue

@@ -14,12 +14,13 @@
       <div class="left" v-if="item.cover">
         <img :src="item.cover" :alt="item.h3" 
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
     <!-- 分页 -->

web/src/views/Search/Terms.vue

@@ -14,12 +14,13 @@
       <div class="left" v-if="item.cover">
         <img :src="item.cover" :alt="item.h3" 
           tabindex="0"
+          aria-label="Image link"
           :aria-description="item.h3"
         />
       </div>
       <div class="right">
-        <h3 v-html="item.h3" tabindex="0"></h3>
-        <p v-html="item.p" tabindex="0"></p>
+        <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+        <p v-html="item.p" tabindex="0" aria-label="Link"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Visit.vue

@@ -11,8 +11,8 @@
       aria-label="Link"
       :aria-description="item.h3"
     >
-      <h3 v-html="item.h3" tabindex="0"></h3>
-      <p v-html="item.p" tabindex="0"></p>
+      <h3 v-html="item.h3" tabindex="0" aria-label="Link"></h3>
+      <p v-html="item.p" tabindex="0" aria-label="Link"></p>
     </div>
   </div>
 </template>

web/src/views/Search/index.vue

@@ -50,7 +50,7 @@
     <div class="searchMenu" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Search results page, please use the tab key to navigate through the content."
     >
-      <div v-for="item in tabData" :key="item.id" tabindex="-1">
+      <div v-for="item in tabData" :key="item.id" >
         <span
           :class="{ active: cut === item.cut }"
           class="txt"
@@ -79,7 +79,7 @@
     <div class="comm" data-aria-viewport-area tabindex="0"
       aria-label :aria-description="`You've reached the content area of ${cut} list, please use the tab key to navigate through the content.`"
     >
-      <component ref="comSon" :is="cut" :txt='txt' :num.sync='num' tabindex="-1"></component>
+      <component ref="comSon" :is="cut" :txt='txt' :num.sync='num' ></component>
     </div>
   </div>
 </template>

web/src/views/Visit/Visit1.vue

@@ -4,8 +4,27 @@
 >
   <div class="box1">
     <img src="../../assets/images/Visit/Visit1.jpg" alt=""
+      tabindex="0"
       aria-label="Image"
-      aria-description="Café & Shop"
+      :aria-description="`
+Hours
+Tuesday - Sunday, 9:00 - 17:00 (No admission after 16:00)
+Closed on Mondays (Except for holidays)\n
+
+Direction
+16 Fuxingmenwai Street, Xicheng District, Beijing 100045
+Subway
+500 meters east to Muxidi Station, Line 1
+Bus
+Baiyun Road Station:
+By Bus 26, 45, 80,114, 308, 843, 844r 937 or 特 19
+Gonghui Dalou Station:
+By Bus 1 or 52
+
+Admission
+Capital Museum offers free admission to visitors.
+You can book a free ticket in advance.
+      `"
     >
   </div>
 </div>

web/src/views/Visit/Visit2.vue

@@ -15,7 +15,7 @@
         Museum's WeChat account for reservation.<span>X</span>
       </div>
     </div> -->
-    <div class="mm1">
+    <div class="mm1" >
       <div class="mm1l">
         <p>
           <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
@@ -37,7 +37,7 @@
         <!-- <h2 tabindex="0">Online Reservation</h2> -->
       </div>
     </div>
-    <div class="sidebar">
+    <div class="sidebar" >
       <ul>
         <!-- 第一个内容 -->
         <li class="title">
@@ -55,7 +55,7 @@
             <p style="text-align: center"><br /></p>
             <p>
               <img src="../../assets/images/Visit/pp1.jpg" alt=""
-                tabindex="0" aria-describedat="Ways of Reservation"
+                tabindex="0" aria-description="Ways of Reservation"
               />
             </p>
             <p><br /></p>
@@ -418,7 +418,6 @@
                         style="
                           font-family: arial, helvetica, sans-serif;
                           font-size: 14px;
-                          
                         "
                       >
                         Requirements: Name of the tour group,
@@ -461,6 +460,8 @@
                       <img
                         src="../../assets/images/Visit/pp6.jpg"
                         style="max-width: 100%"
+                        tabindex="0"
+                        aria-description="Group Visit"
                       />
                     </p>
                   </td>
@@ -470,6 +471,8 @@
                       <img
                         src="../../assets/images/Visit/pp5.jpg"
                         style="max-width: 100%"
+                        tabindex="0"
+                        aria-description="Group Visit"
                       /><br />
                     </p>
                   </td>

web/src/views/Visit/Visit4.vue

@@ -45,6 +45,7 @@
         </div>
         <div>
           <img src="../../assets/images/Visit/Audio3.jpg" alt="Volunteer Guide"
+            tabindex="0"
             aria-description="Volunteer Guide"
           >
         </div>

web/src/views/Visit/Visit6.vue

@@ -12,13 +12,17 @@
         </div>
         <div>
           <img src="../../assets/images/Visit/cafe1.jpg" alt="Cafeteria"
+            tabindex="0"
             aria-description="Cafeteria"
           >
         </div>
       </div>
       <div class="row">
         <div>
-          <img src="../../assets/images/Visit/cafe2.jpg" alt="Shop">
+          <img src="../../assets/images/Visit/cafe2.jpg" alt="Shop"
+            tabindex="0"
+            aria-description="Shop"
+          >
         </div>
         <div class="blank">
           <h3 tabindex="0">Shop</h3>

web/src/views/Visit/Visit7.vue

@@ -4,7 +4,7 @@
 >
   <div class="conten">
     <div class="top" tabindex="0"
-      aria-label="Text" aria-description="Visitor Guidelines"
+      aria-label="" aria-description="Visitor Guidelines"
     >
       <img src="../../assets/images/Visit/last1.jpg" alt="">
     </div>

web/src/views/accessibility.vue

@@ -28,7 +28,7 @@
         tabindex="0"
         aria-description="Close"
         type="button"
-        @click="ariaSettings.isMagnifying = !ariaSettings.isMagnifying"
+        @click="onClickMagnifier"
       >
         <img
           :src="assetUrls.closeMagnifyArea"
@@ -476,8 +476,11 @@ export default {
       viewportAreaNum: null,
       interactionAreaNum: null,
 
-      focusedNode: null,
-      focudedNodeTimeoutId: null,
+      // 为了避免朗读竞争
+      isJustMouseDown: false,
+      domChangeLastTime: null,
+      mutationObserver: null,
+      requestReadLastTime: null,
     }
   },
   watch: {
@@ -625,10 +628,20 @@ export default {
     document.addEventListener('focusin', this.onFocusIn, {
       passive: true,
     })
+    document.addEventListener('mousedown', this.onMouseDown, {
+      passive: true,
+    })
+    document.addEventListener('mouseover', this.onMouseOver, {
+      passive: true,
+    })
+    document.addEventListener("visibilitychange", this.onPageVisibilityChange, {
+      passive: true
+    })
 
     this.$eventBus.$on('request-read', (text) => {
       console.log('无障碍组件收到request-read消息：', text);
       if (this.ariaSettings.isCompActive) {
+        this.requestReadLastTime = Date.now()
         this.planToPlayAudio('', text)
       }
     })
@@ -653,6 +666,13 @@ export default {
         }
       }
     })
+
+    const config = { attributes: true, childList: true, subtree: true };
+    const callback = (mutationsList, observer) => {
+      this.domChangeLastTime = Date.now()
+    };
+    this.mutationObserver = new MutationObserver(callback);
+    this.mutationObserver.observe(document.body, config);
   },
   mounted() {
   },
@@ -666,19 +686,39 @@ export default {
     document.removeEventListener('focusin', this.onFocusIn, {
       passive: true,
     })
-
-    this.$eventBus.$off('request-read')
-    this.$eventBus.$off('request-magnify')
-    this.$eventBus.$off('request-process-text-element')
-
     document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
       passive: true,
     })
     document.removeEventListener('mouseover', this.onMouseOverForPointRead, {
       passive: true,
     })
+    document.removeEventListener('mousedown', this.onMouseDown, {
+      passive: true,
+    })
+    document.removeEventListener("visibilitychange", this.onPageVisibilityChange, {
+      passive: true
+    })
+
+    this.$eventBus.$off('request-read')
+    this.$eventBus.$off('request-magnify')
+    this.$eventBus.$off('request-process-text-element')
+
+    this.mutationObserver.disconnect();
   },
   methods: {
+    onPageVisibilityChange() {
+      if (document.visibilityState === 'hidden') {
+        if (this.audioPlayer && !this.audioPlayer.ended) {
+          this.audioPlayer.pause()
+        }
+      }
+    },
+    onMouseDown() {
+      this.isJustMouseDown = true
+      setTimeout(() => {
+        this.isJustMouseDown = false
+      }, 0);
+    },
     planToPlayAudio(taskId, text = '') {
       let XHR = new XMLHttpRequest()
       const that = this
@@ -834,23 +874,36 @@ export default {
       if (!this.ariaSettings.isCompActive) {
         return
       }
+      const curTime = Date.now()
+      if (curTime - this.domChangeLastTime <= 500 + 100) {
+        console.log('DOM刚改变，忽略hover。');
+        return
+      }
+      if (curTime - this.requestReadLastTime <= 500 + 100) {
+        console.log('刚被要求朗读，忽略hover。');
+        return
+      }
       const extractedText = utils.extractTextForMagnify(e)
       if (extractedText) {
         this.elemType = extractedText.elemType
         this.elemDisc = extractedText.elemDisc
 
-        if (extractedText.ariaNode === this.focusedNode) {
-          console.log('已经由于（可能是点击导致的）focus而朗读了，不用再因为hover而朗读了');
-          return
-        } else {
-          this.planToPlayAudio()
-        }
+        this.planToPlayAudio()
       }
     }, 500),
     onMouseOverForContinueRead(e) {
       if (!this.ariaSettings.isCompActive) {
         return
       }
+      const curTime = Date.now()
+      if (curTime - this.domChangeLastTime <= 100) {
+        console.log('DOM刚改变，忽略hover。');
+        return
+      }
+      if (curTime - this.requestReadLastTime <= 100) {
+        console.log('刚被要求朗读，忽略hover。');
+        return
+      }
       const extractedText = utils.extractTextForMagnify(e)
       if (extractedText) {
         this.elemType = extractedText.elemType
@@ -863,7 +916,7 @@ export default {
           }
           const continueReadTaskId = (new Date).getTime()
           this.continueReadTaskId = continueReadTaskId
-          utils.iterateOnFocusableNode(e.path[0], (node) => {
+          utils.iterateOnFocusableNode(e.target, (node) => {
             return new Promise((resolve, reject) => {
               this.continueReadIteratorStoper = reject
               this.$once('audio-end', (taskId) => {
@@ -890,18 +943,23 @@ export default {
       if (!this.ariaSettings.isCompActive) {
         return
       }
+      // 如果是点击鼠标引起的focus
+      if (this.isJustMouseDown) {
+        if (
+          document.activeElement.dataset.ariaNavigationArea !== undefined ||
+          document.activeElement.dataset.ariaViewportArea !== undefined ||
+          document.activeElement.dataset.ariaInteractionArea !== undefined
+        ) {
+          document.activeElement.blur()
+        }
+        console.log('刚按下鼠标，忽略focus。');
+        return
+      }
       const extractedText = utils.extractTextForMagnify(e, true)
       if (extractedText) {
         this.elemType = extractedText.elemType
         this.elemDisc = extractedText.elemDisc
 
-        this.focusedNode = extractedText.ariaNode
-        clearTimeout(this.focusedNodeTimeoutId)
-        this.focusedNodeTimeoutId = setTimeout(() => {
-          this.focusedNode = null
-          this.focudedNodeTimeoutId = null
-        }, 1000);
-
         this.planToPlayAudio(this.continueReadTaskId)
       }
     },
@@ -911,15 +969,15 @@ export default {
       this.ariaSettings = copy
     },
     onClickReset() {
-      this.planToPlayAudio('', "You've reset the feature settings")
+      this.$eventBus.$emit('request-read', "You've reset the feature settings")
       this.reset()
     },
     onClickMute() {
       this.ariaSettings.isMuted = !this.ariaSettings.isMuted
       if (this.ariaSettings.isMuted) {
-        // this.planToPlayAudio('', 'Sound off')
+        // this.$eventBus.$emit('request-read', "Sound off")
       } else {
-        this.planToPlayAudio('', 'Sound on')
+        this.$eventBus.$emit('request-read', "Sound on")
       }
       if (this.audioPlayer) {
         this.audioPlayer.muted = this.ariaSettings.isMuted
@@ -931,11 +989,11 @@ export default {
         this.ariaSettings.speechRateLevel = 0
       }
       if (this.ariaSettings.speechRateLevel === 0) {
-        this.planToPlayAudio('', 'Speak slowly')
+        this.$eventBus.$emit('request-read', "Speak slowly")
       } else if (this.ariaSettings.speechRateLevel === 1) {
-        this.planToPlayAudio('', 'Speak normally')
+        this.$eventBus.$emit('request-read', "Speak normally")
       } else if (this.ariaSettings.speechRateLevel === 2) {
-        this.planToPlayAudio('', 'Speak fast')
+        this.$eventBus.$emit('request-read', "Speak fast")
       }
       if (this.audioPlayer) {
         this.audioPlayer.playbackRate = speechRateFactors[this.ariaSettings.speechRateLevel]
@@ -943,10 +1001,10 @@ export default {
     },
     onClickScreenReaderMode() {
       if (this.ariaSettings.readMode === 'point') {
-        this.planToPlayAudio('', "You've enabled continuous reading mode.Please move the mouse over on the text you need to read，it'll start reading the screen in 1 second. When reading the link, tap the Enter key to enter the corresponding page.")
+        this.$eventBus.$emit('request-read', "You've enabled continuous reading mode.Please move the mouse over on the text you need to read，it'll start reading the screen in 1 second. When reading the link, tap the Enter key to enter the corresponding page.")
         this.ariaSettings.readMode = 'continue'
       } else if (this.ariaSettings.readMode === 'continue') {
-        this.planToPlayAudio('', "You've enabled read-only mode.Please move the mouse over on the text you need to read，Blind users can operate the keyboard directly.")
+        this.$eventBus.$emit('request-read', "You've enabled read-only mode.Please move the mouse over on the text you need to read，Blind users can operate the keyboard directly.")
         this.ariaSettings.readMode = 'point'
       }
     },
@@ -956,68 +1014,68 @@ export default {
         this.ariaSettings.themeIdx = 0
       }
       if (this.ariaSettings.themeIdx === 0) {
-        this.planToPlayAudio('', "Ajust to standard color.")
+        this.$eventBus.$emit('request-read', "Ajust to standard color.")
       } else if (this.ariaSettings.themeIdx === 1) {
-        this.planToPlayAudio('', "Adjust to black lettering on white background.")
+        this.$eventBus.$emit('request-read', "Adjust to black lettering on white background.")
       } else if (this.ariaSettings.themeIdx === 2) {
-        this.planToPlayAudio('', "Adjust to yellow lettering on blue background.")
+        this.$eventBus.$emit('request-read', "Adjust to yellow lettering on blue background.")
       } else if (this.ariaSettings.themeIdx === 3) {
-        this.planToPlayAudio('', "Adjust to black lettering on yellow background.")
+        this.$eventBus.$emit('request-read', "Adjust to black lettering on yellow background.")
       } else if (this.ariaSettings.themeIdx === 4) {
-        this.planToPlayAudio('', "Adjust to yellow lettering on black background.")
+        this.$eventBus.$emit('request-read', "Adjust to yellow lettering on black background.")
       }
     },
     onClickZoomIn() {
       if (this.ariaSettings.zoomLevel === zoomFactors.length - 1) {
         return
       }
-      this.planToPlayAudio('', "Zooming in on page")
+      this.$eventBus.$emit('request-read', "Zooming in on page")
       this.ariaSettings.zoomLevel++
     },
     onClickZoomOut() {
       if (this.ariaSettings.zoomLevel === 0) {
         return
       }
-      this.planToPlayAudio('', "Zooming out on page")
+      this.$eventBus.$emit('request-read', "Zooming out on page")
       this.ariaSettings.zoomLevel--
     },
     onClickCursorStyle() {
       this.ariaSettings.isBigCursor = !this.ariaSettings.isBigCursor
       if (this.ariaSettings.isBigCursor) {
-        this.planToPlayAudio('', "You've enabled the large cursor")
+        this.$eventBus.$emit('request-read', "You've enabled the large cursor")
       } else {
-        this.planToPlayAudio('', "You've disabled the large cursor")
+        this.$eventBus.$emit('request-read', "You've disabled the large cursor")
       }
     },
     onClickCrossCursor() {
       this.ariaSettings.isCursorCrosshair = !this.ariaSettings.isCursorCrosshair
       if (this.ariaSettings.isCursorCrosshair) {
-        this.planToPlayAudio('', "You've enabled the cross cursor")
+        this.$eventBus.$emit('request-read', "You've enabled the cross cursor")
       } else {
-        this.planToPlayAudio('', "You've disabled the cross cursor")
+        this.$eventBus.$emit('request-read', "You've disabled the cross cursor")
       }
     },
     onClickMagnifier() {
       this.ariaSettings.isMagnifying = !this.ariaSettings.isMagnifying
       if (this.ariaSettings.isMagnifying) {
-        this.planToPlayAudio('', "You've enabled the magnifier")
+        this.$eventBus.$emit('request-read', "You've enabled the magnifier")
       } else {
-        this.planToPlayAudio('', "You've disabled the magnifier")
+        this.$eventBus.$emit('request-read', "You've disabled the magnifier")
       }
     },
     onClickHelp() {
       window.open(config.publicPath + 'help.html')
     },
     onClickDownloadShortcut() {
-      this.planToPlayAudio('', "You are downloading the shortcut. Double click the shortcut to reach the website.")
+      this.$eventBus.$emit('request-read', "You are downloading the shortcut. Double click the shortcut to reach the website.")
     },
     onClickElderlyServicesAreaEntry() {
       this.ariaSettings.menuMode = 'old'
-      this.planToPlayAudio('', "You've switched to the elderly services mode.")
+      this.$eventBus.$emit('request-read', "You've switched to the elderly services mode.")
     },
     onClickScreenReaderAreaEntry() {
       this.ariaSettings.menuMode = 'blind'
-      this.planToPlayAudio('', "You've switched to screen the reading accessibility mode.")
+      this.$eventBus.$emit('request-read', "You've switched to screen the reading accessibility mode.")
     },
     onMouseDownNavigationArea(e) {
       e.preventDefault()
@@ -1122,6 +1180,7 @@ a {
       flex: 1 0 auto;
       overflow: auto;
       text-align: center;
+      white-space: break-spaces;
       p {
         vertical-align: middle;
         display: inline-block;

web/src/views/bottom/Employment.vue

@@ -13,7 +13,7 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has one link; please use the tab key to go through the content."
     >
-      <div tabindex="-1">
+      <div >
         <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home" replace tabindex="0"
           aria-description="Home"
@@ -26,7 +26,7 @@
       aria-label aria-description="You've reached the content area of the Employment page, please use the tab key to navigate through the content."
     >
       <!-- Exhibition Overview -->
-      <div class="y_box" tabindex="-1">
+      <div class="y_box" >
         <div class="title_2" tabindex="0">
           2017 Second-Half Public Recruitment Notice of the Capital Museum
         </div>

web/src/views/bottom/Index.vue

@@ -10,21 +10,21 @@
       src="/data/Index/1.jpg"
       alt=""
       tabindex="0"
-      aria-label="Text"
+      aria-label=""
       aria-description="Site Index"
     />
-    <div class="home" title="Home" tabindex="-1">
+    <div class="home" title="Home" >
       <img
         src="/data/Index/home.jpg"
         alt=""
         @click="skip('/')"
         @keydown.enter.passive="skip('/')"
         tabindex="0"
-        aria-label="Text"
+        aria-label=""
         aria-description="Home"
       />
     </div>
-    <div class="main" tabindex="-1">
+    <div class="main" >
       <img src="/data/Index/main.jpg" alt="" />
       <!-- 定位的盒子 -->
       <div class="loc">

web/src/views/bottom/Use.vue

@@ -12,7 +12,7 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has one link; please use the tab key to go through the content."
     >
-      <div tabindex="-1">
+      <div >
         <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home"
           replace
@@ -26,7 +26,7 @@
       aria-label aria-description="You've reached the content area of the Terms of Use page, please use the tab key to navigate through the content."
     >
       <!-- Exhibition Overview -->
-      <div class="y_box" tabindex="-1">
+      <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>

web/src/views/layout/index.vue

@@ -41,11 +41,11 @@
             <!-- 中文网 -->
             <li class="language"
               tabindex="0"
-              aria-description="EN"
+              aria-description="English"
             >
               <a href="http://www.capitalmuseum.org.cn/" target="_blank"
                 tabindex="0"
-                aria-description="中文网站"
+                aria-description="Chinese"
               >
                 中文
               </a>
@@ -94,7 +94,7 @@
         class="footer" data-aria-viewport-area tabindex="0"
         aria-label aria-description="You've reached footer section at the bottom of the website. This section contains five URLs. To browse the content, please use the tab key."
       >
-        <div tabindex="-1">
+        <div >
           <template v-for="item in footerData">
             |
             <router-link
@@ -104,7 +104,7 @@
               :key="item.name"
               v-html="item.name"
               tabindex="0"
-              :aria-describedat="item.name"
+              :aria-description="item.name"
             />
           </template>
         </div>
@@ -118,7 +118,7 @@
         class="rightNav" 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" tabindex="-1">
+        <ul class="rightIco" >
           <li title="game">
             <a
               href=""
@@ -132,12 +132,10 @@
             <img src="@/assets/images/code.png" alt="" tabindex="0"/>
             <div>
               <img src="@/assets/images/index_ewm1.png" alt="" 
-                tabindex="0"
-                aria-description=""
               />
               <img src="@/assets/images/index_ewm.jpg" alt=""
                 tabindex="0"
-                aria-description=""
+                aria-description="Official microblog and wechat QR code"
               />
             </div>
           </li>