给无障碍菜单本身加上无障碍注释

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) {

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,14 +246,18 @@
       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">
@@ -239,6 +274,10 @@
         class="text-button"
       >
         <button
+          tabindex="0"
+          aria-description="Window area"
+          @mousedown="onMouseDownWindowArea"
+          @click="onClickWindowArea"
           type="button"
         >
           <div class="button-name">
@@ -255,6 +294,10 @@
         class="text-button"
       >
         <button
+          tabindex="0"
+          aria-description="Interaction area"
+          @mousedown="onMouseDownInteractionArea"
+          @click="onClickInteractionArea"
           type="button"
         >
           <div class="button-name">
@@ -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"
         >
@@ -845,6 +898,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('ariaInteractiveArea')
+    },
     onClickQuit() {
       this.ariaSettings.isCompActive = false
     },