无障碍：菜单里显示的特殊区域数量动态变化

web/src/utils.js

@@ -35,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

@@ -263,7 +263,7 @@
           <div class="button-name">
             Navigation
             <br>
-            area (1)
+            area ({{navigationAreaNum}})
           </div>
           <div class="button-shortcut">
             Alt+1
@@ -283,7 +283,7 @@
           <div class="button-name">
             Window
             <br>
-            area (3)
+            area ({{viewportAreaNum}})
           </div>
           <div class="button-shortcut">
             Alt+2
@@ -303,7 +303,7 @@
           <div class="button-name">
             Interaction
             <br>
-            area (1)
+            area ({{interactionAreaNum}})
           </div>
           <div class="button-shortcut">
             Alt+3
@@ -467,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')
@@ -617,6 +631,9 @@ export default {
     document.removeEventListener('focusin', this.onFocusIn, {
       passive: true,
     })
+
+    this.$eventBus.$off('request-read')
+
     document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
       passive: true,
     })
@@ -727,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() {
@@ -914,7 +931,7 @@ export default {
       e.preventDefault()
     },
     onClickInteractionArea() {
-      utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractiveArea')
+      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"
         >