Browse Source

无障碍提示里是否有冒号的逻辑优化,events模块在初始化和翻页时请求处理每个text元素和image元素。

任一存 3 years ago
parent
commit
ab8880a4cc
2 changed files with 27 additions and 6 deletions
  1. 12 4
      web/src/views/Events/info.vue
  2. 15 2
      web/src/views/accessibility.vue

+ 12 - 4
web/src/views/Events/info.vue

@@ -144,12 +144,23 @@ export default {
   },
   },
   //方法集合
   //方法集合
   methods: {
   methods: {
+    requestProcessElementInTxtMain() {
+      this.$nextTick(() => {
+        const txtMainList = document.getElementsByClassName('txtMain')
+        for (const iterator of txtMainList) {
+          this.$eventBus.$emit('request-process-text-element', iterator)
+          this.$eventBus.$emit('request-process-image-element', iterator)
+        }
+      })
+    },
     pageCut(i){
     pageCut(i){
       this.mainArr = i
       this.mainArr = i
       this.toTop()
       this.toTop()
+      this.requestProcessElementInTxtMain()
     },
     },
     skip(id) {
     skip(id) {
       this.$router.replace(`/Layout/EventsInfo/${id}`).catch(() => {});
       this.$router.replace(`/Layout/EventsInfo/${id}`).catch(() => {});
+      this.requestProcessElementInTxtMain()
     },
     },
     // 点击回到顶部
     // 点击回到顶部
     toTop() {
     toTop() {
@@ -210,10 +221,7 @@ export default {
       "request-read",
       "request-read",
       `You've reached the sub-page of the Events page.This page contains one navigation section, four window sections, and one interactive section. To choose an section, please hit the shortcut key.`
       `You've reached the sub-page of the Events page.This page contains one navigation section, four window sections, and one interactive section. To choose an section, please hit the shortcut key.`
     );
     );
-    const txtMainList = document.getElementsByClassName('txtMain')
-    for (const iterator of txtMainList) {
-      this.$eventBus.$emit('request-process-text-element', iterator)
-    }
+    this.requestProcessElementInTxtMain()
   },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeMount() {}, //生命周期 - 挂载之前

+ 15 - 2
web/src/views/accessibility.vue

@@ -21,7 +21,7 @@
     >
     >
       <div class="text-wrapper">
       <div class="text-wrapper">
         <p>
         <p>
-          {{ elemType + (elemType ? ': ' : '') + elemDisc }}
+          {{ elemType + ((elemType && elemDisc) ? ': ' : '') + elemDisc }}
         </p>
         </p>
       </div>
       </div>
       <button
       <button
@@ -667,6 +667,18 @@ export default {
         }
         }
       }
       }
     })
     })
+    this.$eventBus.$on('request-process-image-element', (rootElement) => {
+      console.log('无障碍组件收到request-process-image-element消息:', rootElement);
+      const tagNameList = [
+        'img',
+      ]
+      for (const tagName of tagNameList) {
+        const elemList = rootElement.getElementsByTagName(tagName)
+        for (const elemItem of elemList) {
+          elemItem.setAttribute('tabindex', '0')
+        }
+      }
+    })
 
 
     const config = { attributes: true, childList: true, subtree: true };
     const config = { attributes: true, childList: true, subtree: true };
     const callback = (mutationsList, observer) => {
     const callback = (mutationsList, observer) => {
@@ -703,7 +715,8 @@ export default {
     this.$eventBus.$off('request-read')
     this.$eventBus.$off('request-read')
     this.$eventBus.$off('request-magnify')
     this.$eventBus.$off('request-magnify')
     this.$eventBus.$off('request-process-text-element')
     this.$eventBus.$off('request-process-text-element')
-
+    this.$eventBus.$off('request-process-image-element')
+    
     this.mutationObserver.disconnect();
     this.mutationObserver.disconnect();
   },
   },
   methods: {
   methods: {