update the rule #1674

IBMa · Oct 23, 2023 · a5e35b8 · a5e35b8
1 parent e9b4fe8
commit a5e35b8
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 9 deletions.
diff --git a/accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts b/accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts
@@ -465,16 +465,64 @@ export class RPTUtil {
     public static isInline(element) {
         if (!element) return false;
 
-        var cStyle = getComputedStyle(element);
-        var uStyle =  getDefinedStyles(element);
-        if (!uStyle) 
-            return true;
+        var uStyle =  getComputedStyle(element);
+        if (!uStyle) return false;
+        const udisplay = cStyle.getPropertyValue("display");  
+        // focus on inline element only
+        if (udisplay !== 'inline')
+            return false;
 
-        const display = cStyle.getPropertyValue("display");    
-
-        if (display === 'inline' || (display === 'inline-block' && uStyle['width'] === 'undefined' && uStyle['height'] === 'undefined' )) 
-            return true;
-
+        const parent = element.parentElement;
+        if (parent) {
+            var cStyle = getComputedStyle(parent);
+            var display = cStyle.getPropertyValue("display");    
+            if (display === 'block' || display === 'inline-block') {
+                let multipleInline = false;
+                let containText = false;
+                // more than one inline elements with text in the same line: <inline>text<target>, <target><inline>text, text<target><inline>
+                let walkNode = element.nextSibling;
+                while (walkNode) {
+                    if (walkNode.nodeType === Node.TEXT_NODE && walkNode.nodeValue && walkNode.nodeValue.trim().length > 0) {
+                        containText = true;
+                    } else if (walkNode.nodeType === Node.ELEMENT_NODE) {
+                        cStyle = getComputedStyle(walkNode);
+                        display = cStyle.getPropertyValue("display");    
+                        if (display !== 'inline') {
+                            multipleInline = false;
+                            break;
+                        }
+                        multipleInline = true;
+                    }
+                    walkNode = walkNode.nextSibling;    
+                } 
+
+                walkNode = element.previousSibling;
+                while (walkNode) {
+                    if (walkNode.nodeType === Node.TEXT_NODE && walkNode.nodeValue && walkNode.nodeValue.trim().length > 0) {
+                        containText = true;
+                    } else if (walkNode.nodeType === Node.ELEMENT_NODE) {
+                        cStyle = getComputedStyle(walkNode);
+                        display = cStyle.getPropertyValue("display");    
+                        if (display !== 'inline') {
+                            multipleInline = false;
+                            break;
+                        }
+                        multipleInline = true;
+                    }
+                    walkNode = walkNode.previousSibling;    
+                } 
+
+                // an inline element is the only element in the line inside a block
+                // note browsers insert Text nodes to represent whitespaces.
+                if (parent.childNodes.length === 1)
+                    return false;
+
+                // multiple inline elements are in the same line with text
+
+
+            }
+        }
+        // all other cases    
         return false;
     }
 

diff --git a/.../test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_in_text.html b/.../test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_in_text.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+  <title>Links</title>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <main>
+    <div>This is a <a href="#">link</a> in text.</div>
+    <div style="margin-top: 2rem;">
+    <div>
+      <a href="#">Link 1</a> &nbsp;&nbsp;&nbsp; <a href="#">Link 2</a> &nbsp;&nbsp;&nbsp; <a href="#">Link 3</a>.
+    </div>
+
+    <div style="margin-top: 2rem;">
+    <div style="height:50px;"><a href="#">Link 1</a> &nbsp;&nbsp;&nbsp; <a href="#">Link 2</a> &nbsp;&nbsp;&nbsp;<a href="#">Link 3</a></div>
+    <div><a href="#">Link 2</a></div>
+    <div><a href="#">Link 3</a></div>
+    </div>
+
+  </main>
+
+  </body>
+  </html>
diff --git a/...hecker/accessibility/rules/target_spacing_sufficient_ruleunit/link_inline_with_block.html b/...hecker/accessibility/rules/target_spacing_sufficient_ruleunit/link_inline_with_block.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+  <title>Links</title>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <div style="width:150px;">
+    <div>This is X <a href="#" style="display:inline;">l</a> in text. This is Y <a href="#" style="display:inline;">l</a> in text.</div>
+    <div style="margin-top: 2rem;">
+    <div style="width:110px;line-height:50px;"><a href="#" style="display:inline;">z</a><a href="#" style="display:inline;">v</a>.</div>  
+
+  </div>
+
+  </body>
+  </html>