瀏覽代碼

无障碍组件优化,并优化其文档

任一存 3 年之前
父節點
當前提交
991d5494ed
共有 4 個文件被更改,包括 27 次插入9 次删除
  1. 8 7
      web/README.md
  2. 8 0
      web/src/assets/css/ariaGlobalStyle.less
  3. 2 1
      web/src/utils.js
  4. 9 1
      web/src/views/accessibility.vue

File diff suppressed because it is too large
+ 8 - 7
web/README.md


+ 8 - 0
web/src/assets/css/ariaGlobalStyle.less

@@ -131,4 +131,12 @@ body.aria-active.aria-magnifying {
 
 html.aria-active {
   scroll-padding-top: @accessibility-menu-height;
+}
+
+// 对于有data-aria-xxx-area attribute的元素,鼠标点击(或者点击其不可focus的子元素)时不应该导致focus到这个元素上,换言之,这种元素只应该能通过tab键focus。
+*[data-aria-navigation-area], *[data-aria-viewport-area], *[data-aria-interaction-area] {
+  pointer-events: none;
+  * {
+    pointer-events: initial;
+  }
 }

+ 2 - 1
web/src/utils.js

@@ -26,7 +26,7 @@ function mapTags(tag) {
 function extractTextForMagnify(e) {
   let meaningfulNode = e.path[0]
 
-  // 如果天然能focus,但没有被加上tabindex属性,比如第三方组件内部可focus元素的情况
+  // 如果天然能focus,但没有被加上tabindex属性,比如focus到了第三方组件内部的可focus元素,直接返回。
   if (
     ['A', 'AREA', 'BUTTON', 'INPUT', 'SELECT', 'IFRAME'].includes(meaningfulNode.tagName) &&
     !meaningfulNode.getAttribute('tabindex')
@@ -41,6 +41,7 @@ function extractTextForMagnify(e) {
     }
   }
   
+  // mouseover事件冒泡到有data-aria-xxx-area attribute的区域时,不应该提取该区域的无障碍辅助信息。
   if (e.type === 'mouseover' && (
       meaningfulNode.getAttribute('data-aria-navigation-area') !== null ||
       meaningfulNode.getAttribute('data-aria-viewport-area') !== null ||

+ 9 - 1
web/src/views/accessibility.vue

@@ -616,10 +616,17 @@ export default {
 
     this.$eventBus.$on('request-read', (text) => {
       console.log('无障碍组件收到request-read消息:', text);
-      if (this.isCompActive) {
+      if (this.ariaSettings.isCompActive) {
         this.planToPlayAudio('', text)
       }
     })
+    this.$eventBus.$on('request-magnify', (textObj) => {
+      console.log('无障碍组件收到request-magnify消息:', textObj);
+      if (this.ariaSettings.isCompActive) {
+        this.elemType = textObj.elemType
+        this.elemDisc = textObj.elemDisc
+      }
+    })
   },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
@@ -633,6 +640,7 @@ export default {
     })
 
     this.$eventBus.$off('request-read')
+    this.$eventBus.$off('request-magnify')
 
     document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
       passive: true,