diff --git a/accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts b/accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts index 2262fcc10..29484c5e1 100644 --- 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: text, text, text + 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/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_in_text.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_in_text.html new file mode 100644 index 000000000..98780cac3 --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_in_text.html @@ -0,0 +1,24 @@ + + + + Links + + + +
+
This is a link in text.
+
+
+ Link 1     Link 2     Link 3. +
+ +
+
Link 1     Link 2    Link 3
+ + +
+ +
+ + + \ No newline at end of file diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_inline_with_block.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_inline_with_block.html new file mode 100644 index 000000000..08ace8e72 --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/link_inline_with_block.html @@ -0,0 +1,16 @@ + + + + Links + + + +
+
This is X l in text. This is Y l in text.
+
+ + +
+ + + \ No newline at end of file