Просмотр исходного кода

无障碍:优化无障碍辅助信息提取逻辑

任一存 3 лет назад
Родитель
Сommit
16d87a6683
3 измененных файлов с 38 добавлено и 21 удалено
  1. 1 1
      web/README.md
  2. 1 1
      web/src/assets/css/ariaGlobalStyle.less
  3. 36 19
      web/src/utils.js

Разница между файлами не показана из-за своего большого размера
+ 1 - 1
web/README.md


+ 1 - 1
web/src/assets/css/ariaGlobalStyle.less

@@ -136,7 +136,7 @@ html.aria-active {
 // 对于有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;
   }
 }

+ 36 - 19
web/src/utils.js

@@ -26,31 +26,48 @@ function mapTags(tag) {
 function extractTextForMagnify(e) {
   let meaningfulNode = e.path[0]
 
-  // 如果天然能focus,但没有被加上tabindex属性,比如focus到了第三方组件内部的可focus元素,直接返回。
-  if (
-    ['A', 'AREA', 'BUTTON', 'INPUT', 'SELECT', 'IFRAME'].includes(meaningfulNode.tagName) &&
-    !meaningfulNode.getAttribute('tabindex')
-  ) {
-    return
-  }
-  
-  while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
-    meaningfulNode = meaningfulNode.parentNode
-    if (!meaningfulNode) {
+  if (e.type === 'mouseover') {
+    while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
+      meaningfulNode = meaningfulNode.parentNode
+      if (!meaningfulNode) {
+        return
+      }
+    }
+
+    if (meaningfulNode.getAttribute('tabindex') === '-1') {
       return
     }
-  }
-  
-  // mouseover事件冒泡到有data-aria-xxx-area attribute的区域时,不应该提取该区域的无障碍辅助信息。
-  if (e.type === 'mouseover' && (
+
+    // mouseover事件冒泡到有data-aria-xxx-area attribute的区域包裹元素时,不应该提取该区域包裹元素的无障碍辅助信息。
+    if (
       meaningfulNode.getAttribute('data-aria-navigation-area') !== null ||
       meaningfulNode.getAttribute('data-aria-viewport-area') !== null ||
       meaningfulNode.getAttribute('data-aria-interaction-area') !== null
-    )
-  ) {
-    return
-  }
+    ) {
+      return
+    }
+  } else if (e.type === 'focusin') {
+    // 如果天然能focus,但没有被加上tabindex属性,比如focus到了第三方组件内部的可focus元素,直接返回。
+    if (
+      ['A', 'AREA', 'BUTTON', 'INPUT', 'SELECT', 'IFRAME'].includes(meaningfulNode.tagName) &&
+      !meaningfulNode.getAttribute('tabindex')
+    ) {
+      return
+    }
+
+    while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
+      meaningfulNode = meaningfulNode.parentNode
+      if (!meaningfulNode) {
+        return
+      }
+    }
 
+    // 约定:tabindex属性值为-1的元素只用于在点击有data-aria-xxx-area attribute的区域包裹元素的子孙元素时,避免focus到区域包裹元素。
+    if (meaningfulNode.getAttribute('tabindex') === '-1') {
+      return
+    }
+  }
+  
   let elemType = ''
   const ariaLabel = meaningfulNode.getAttribute('aria-label')
   if (ariaLabel !== null) {