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

web/src/utils.js

@@ -5,7 +5,7 @@ function mapTags(tag) {
     ret = 'Link: '
     break
   case 'BUTTON':
-    ret = 'Link: '
+    ret = 'Button: '
     break
   case 'IMG':
     ret = 'Image: '
@@ -25,7 +25,6 @@ function mapTags(tag) {
 
 function extractTextForMagnify(e) {
   let meaningfulNode = e.path[0]
-  console.log(meaningfulNode);
   while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
     meaningfulNode = meaningfulNode.parentNode
     if (!meaningfulNode) {
@@ -36,7 +35,7 @@ function extractTextForMagnify(e) {
   if (e.type === 'mouseover' && (
       meaningfulNode.getAttribute('data-aria-navigation-area') !== null ||
       meaningfulNode.getAttribute('data-aria-viewport-area') !== null ||
-      meaningfulNode.getAttribute('data-aria-interactive-area') !== null
+      meaningfulNode.getAttribute('data-aria-interaction-area') !== null
     )
   ) {
     return

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

@@ -1,7 +1,7 @@
 <template>
   <div class="ExhibitionsList">
     <div class="conten">
-      <div class="search" data-aria-interactive-area tabindex="0"
+      <div class="search" data-aria-interaction-area tabindex="0"
         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">

web/src/views/Search/index.vue

@@ -12,7 +12,7 @@
       Search
       <span> {{num}} results</span>
     </div>
-    <div class="searchForm" data-aria-interactive-area tabindex="0"
+    <div class="searchForm" data-aria-interaction-area tabindex="0"
       aria-label aria-description="You've reached the Search interactive section, please use the tab key to go through the content."
     >
       <input class="searchWord" type="text" v-model="txt" />

web/src/views/accessibility.vue

@@ -25,6 +25,8 @@
         </p>
       </div>
       <button
+        tabindex="0"
+        aria-description="Close"
         type="button"
         @click="onClickMagnifier"
       >
@@ -41,6 +43,8 @@
     >
       <li>
         <button
+          tabindex="0"
+          aria-description="Reset"
           type="button"
           @click="onClickReset"
         >
@@ -53,6 +57,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Mute"
           type="button"
           @click="onClickMute"
         >
@@ -65,6 +71,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Speech Rate"
           type="button"
           @click="onClickSpeechRate"
         >
@@ -77,6 +85,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Screen Reader"
           type="button"
           @click="onClickScreenReaderMode"
         >
@@ -89,6 +99,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Coor Modification"
           type="button"
           @click="onClickColorModification"
         >
@@ -101,6 +113,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Zoom In"
           type="button"
           @click="onClickZoomIn"
         >
@@ -113,6 +127,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Zoom Out"
           type="button"
           @click="onClickZoomOut"
         >
@@ -125,6 +141,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Cursor Style"
           type="button"
           @click="onClickCursorStyle"
         >
@@ -137,6 +155,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Cross Cursor"
           type="button"
           @click="onClickCrossCursor"
         >
@@ -149,6 +169,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Magnifier"
           type="button"
           @click="onClickMagnifier"
         >
@@ -161,6 +183,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Help"
           type="button"
           @click="onClickHelp"
         >
@@ -173,9 +197,12 @@
       </li>
       <li>
         <a
+          tabindex="0"
+          aria-label="Button"
+          aria-description="Download Shortcut"
           ref="shortcutBtnRef"
           :href="shortcutFileText"
-          download="首都博物馆.url"
+          download="CapitalMuseum.url"
         >
           <img
             :src="assetUrls.shotcut"
@@ -186,6 +213,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Screen Reading Accessibility"
           type="button"
           @click="onClickScreenReaderAreaEntry"
         >
@@ -198,6 +227,8 @@
       </li>
       <li>
         <button
+          tabindex="0"
+          aria-description="Quit"
           type="button"
           @click="onClickQuit"
         >
@@ -215,20 +246,24 @@
       class="blind-mode-menu"
     >
       <div class="blind-mode-title">
-        <h5>Intelligent blind guide</h5>
+        <h5 tabindex="0">Intelligent blind guide</h5>
         <div class="splitter-line" />
-        <h5>Regional guidelines</h5>
+        <h5 tabindex="0">Regional guidelines</h5>
       </div>
       <li
         class="text-button"
       >
         <button
+          tabindex="0"
+          aria-description="Navigation area"
+          @mousedown="onMouseDownNavigationArea"
+          @click="onClickNavigationArea"
           type="button"
         >
           <div class="button-name">
             Navigation
             <br>
-            area (1)
+            area ({{navigationAreaNum}})
           </div>
           <div class="button-shortcut">
             Alt+1
@@ -239,12 +274,16 @@
         class="text-button"
       >
         <button
+          tabindex="0"
+          aria-description="Window area"
+          @mousedown="onMouseDownWindowArea"
+          @click="onClickWindowArea"
           type="button"
         >
           <div class="button-name">
             Window
             <br>
-            area (3)
+            area ({{viewportAreaNum}})
           </div>
           <div class="button-shortcut">
             Alt+2
@@ -255,12 +294,16 @@
         class="text-button"
       >
         <button
+          tabindex="0"
+          aria-description="Interaction area"
+          @mousedown="onMouseDownInteractionArea"
+          @click="onClickInteractionArea"
           type="button"
         >
           <div class="button-name">
             Interaction
             <br>
-            area (1)
+            area ({{interactionAreaNum}})
           </div>
           <div class="button-shortcut">
             Alt+3
@@ -271,6 +314,8 @@
         class="image-button"
       >
         <button
+          tabindex="0"
+          aria-description="Mute"
           type="button"
           @click="onClickMute"
         >
@@ -285,6 +330,8 @@
         class="image-button"
       >
         <button
+          tabindex="0"
+          aria-description="Help"
           type="button"
           @click="onClickHelp"
         >
@@ -299,6 +346,8 @@
         class="image-button"
       >
         <button
+          tabindex="0"
+          aria-description="Magnifier"
           type="button"
           @click="onClickMagnifier"
         >
@@ -313,6 +362,8 @@
         class="image-button"
       >
         <button
+          tabindex="0"
+          aria-description="Elerly services"
           type="button"
           @click="onClickElderlyServicesAreaEntry"
         >
@@ -327,6 +378,8 @@
         class="image-button"
       >
         <button
+          tabindex="0"
+          aria-description="Quit"
           type="button"
           @click="onClickQuit"
         >
@@ -414,9 +467,23 @@ export default {
       `),
 
       audioPlayer: null,
+
+      navigationAreaNum: null,
+      viewportAreaNum: null,
+      interactionAreaNum: null,
     }
   },
   watch: {
+    $route: {
+      handler(v) {
+        this.$nextTick(() => {
+          this.navigationAreaNum = document.querySelectorAll('*[data-aria-navigation-area]').length
+          this.viewportAreaNum = document.querySelectorAll('*[data-aria-viewport-area]').length
+          this.interactionAreaNum = document.querySelectorAll('*[data-aria-interaction-area]').length
+        })
+      },
+      immediate: true,
+    },
     ariaSettings: {
       handler(v) {
         let storedSettings = localStorage.getItem('ariaSettings')
@@ -564,6 +631,9 @@ export default {
     document.removeEventListener('focusin', this.onFocusIn, {
       passive: true,
     })
+
+    this.$eventBus.$off('request-read')
+
     document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
       passive: true,
     })
@@ -674,7 +744,7 @@ export default {
       } else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
         utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
       } else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractiveArea')
+        utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractionArea')
       }
     },
     loadStoredSettings() {
@@ -845,6 +915,24 @@ export default {
     onClickScreenReaderAreaEntry() {
       this.ariaSettings.menuMode = 'blind'
     },
+    onMouseDownNavigationArea(e) {
+      e.preventDefault()
+    },
+    onClickNavigationArea() {
+      utils.getAndFocusNextNodeWithCustomAttribute('ariaNavigationArea')
+    },
+    onMouseDownWindowArea(e) {
+      e.preventDefault()
+    },
+    onClickWindowArea() {
+      utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
+    },
+    onMouseDownInteractionArea(e) {
+      e.preventDefault()
+    },
+    onClickInteractionArea() {
+      utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractionArea')
+    },
     onClickQuit() {
       this.ariaSettings.isCompActive = false
     },

web/src/views/layout/index.vue

@@ -44,7 +44,7 @@
         <!-- 右侧的输入框 -->
         <div
           class="search" @keyup.enter="search" v-if="!menaInd.includes('Search')"
-          data-aria-interactive-area
+          data-aria-interaction-area
           aria-label aria-description="You've reached the seach field, please use the tab key to browse the content."
           tabindex="0"
         >