Forráskód Böngészése

无障碍组件功能:自动给指定节点的所有表示文字的叶子节点加上tabindex=“0”

任一存 3 éve
szülő
commit
7eb14654d3
2 módosított fájl, 15 hozzáadás és 0 törlés
  1. 1 0
      web/README.md
  2. 14 0
      web/src/views/accessibility.vue

+ 1 - 0
web/README.md

@@ -63,6 +63,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 用于在js中进行无障碍辅助信息的提供
 * request-read: 请求朗读指定的文本。
 * request-magnify: 请求在大屏幕或曰放大镜区域显示指定的文字
+* request-process-text-element: 请求对某个元素的子孙元素中所有符合【是包含文字的叶子节点】这一条件的元素,都添加上tabindex="0"这一attribute。(工作量太大时可以用这招。)
 
 ## 使用无障碍组件时,路由跳转相关规则
 * 单纯的路由跳转,尽量用a标签或router-link标签,不要在点击事件回调里跳转,因为上述标签天生支持键盘操作。

+ 14 - 0
web/src/views/accessibility.vue

@@ -627,6 +627,19 @@ export default {
         this.elemDisc = textObj.elemDisc
       }
     })
+    this.$eventBus.$on('request-process-text-element', (rootElement) => {
+      const tagNameList = [
+        'span', 'em', 'i', 'small', 'b', 'strong', 'del', 'q', 'sub',
+        'div', 'pre', 'p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'td', 'th',
+      ]
+      for (const tagName of tagNameList) {
+        const elemList = rootElement.getElementsByTagName(tagName)
+        for (const elemItem of elemList) {
+          elemItem.setAttribute('tabindex', '0')
+        }
+      }
+    })
   },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
@@ -641,6 +654,7 @@ export default {
 
     this.$eventBus.$off('request-read')
     this.$eventBus.$off('request-magnify')
+    this.$eventBus.$off('request-process-text-element')
 
     document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
       passive: true,