update rule and test cases #1674

IBMa · Oct 19, 2023 · 1157e8e · 1157e8e
1 parent dcb35ab
commit 1157e8e
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 55 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
@@ -20,7 +20,7 @@ import { ARIAMapper } from "../../../aria/ARIAMapper";
 import { DOMWalker } from "../../../dom/DOMWalker";
 import { VisUtil } from "../../../dom/VisUtil";
 import { FragmentUtil } from "./fragment";
-import { getDefinedStyles } from "../../../../v4/util/CSSUtil";
+import { getDefinedStyles, getComputedStyle } from "../../../../v4/util/CSSUtil";
 import { DOMUtil } from "../../../dom/DOMUtil";
 
 export class RPTUtil {
@@ -453,7 +453,7 @@ export class RPTUtil {
      * an "inline" CSS display property tells the element to fit itself on the same line. An 'inline' element's width and height are ignored. 
      * some element has default inline property, such as <span>, <a>
      * most formatting elements inherent inline property, such as <em>, <strong>, <i>, <small> 
-     * other inline elements: <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <input> <kbd> <label> 
+     * other inline elements: <abbr> <acronym> <b> <bdo> <big> <br> <cite> <code> <dfn> <em> <i> <input> <kbd> <label> 
      * <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
      * an "inline-block" element still place element in the same line without breaking the line, but the element's width and height are applied.
      * inline-block elements: img, button, select, meter, progress, marguee, also in Chrome: textarea, input 
@@ -465,28 +465,16 @@ export class RPTUtil {
     public static isInline(element) {
         if (!element) return false;
 
-        const inline_elements = ["listitem", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch", "treeitem"];
-        if (element.hasAttribute("tabindex") || RPTUtil.isTabbable(element)) return true;
-
-        const roles = RPTUtil.getRoles(element, true); 
-        if (!roles && roles.length === 0)
-            return false;
+        var cStyle = getComputedStyle(element);
+        var uStyle =  getDefinedStyles(element);
+        if (!uStyle) 
+            return true;
 
-        let tagProperty = RPTUtil.getElementAriaProperty(element);
-        let allowedRoles = RPTUtil.getAllowedAriaRoles(element, tagProperty);
-        if (!allowedRoles && allowedRoles.length === 0)
-            return false;
-
-        let parent = element.parentElement;
-        // datalist, fieldset, optgroup, etc. may be just used for grouping purpose, so go up to the parent
-        while (parent && roles.some(role => role === 'group'))
-            parent = parent.parentElement;
-
-        if (parent && (parent.hasAttribute("tabindex") || RPTUtil.isTabbable(parent))) {
-            const target_roles =["listitem", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch", "treeitem"];
-            if (allowedRoles.includes('any') || roles.some(role => target_roles.includes(role)))
-                return true;
-        }
+        const display = cStyle.getPropertyValue("display");    
+
+        if (display === 'inline' || (display === 'inline-block' && uStyle['width'] === 'undefined' && uStyle['height'] === 'undefined' )) 
+            return true;
+
         return false;
     }
 

diff --git a/accessibility-checker-engine/src/v4/rules/target_spacing_sufficient.ts b/accessibility-checker-engine/src/v4/rules/target_spacing_sufficient.ts
@@ -16,7 +16,7 @@
     import { eRulePolicy, eToolkitLevel } from "../api/IRule";
     import { VisUtil } from "../../v2/dom/VisUtil";
     import { DOMMapper } from "../../v2/dom/DOMMapper";
-    import { DOMUtil } from "../../v2/dom/DOMUtil";
+    import { getDefinedStyles, getComputedStyle } from "../util/CSSUtil";
 
     export let target_spacing_sufficient: Rule = {
         id: "target_spacing_sufficient",
@@ -50,15 +50,20 @@
         act: [],
         run: (context: RuleContext, options?: {}, contextHierarchies?: RuleContextHierarchy): RuleResult | RuleResult[] => {
             const ruleContext = context["dom"].node as HTMLElement;
-            if (!VisUtil.isNodeVisible(ruleContext) || (!RPTUtil.isTarget(ruleContext)))
-                return null;
-
             const nodeName = ruleContext.nodeName.toLocaleLowerCase(); 
-
             //ignore certain elements
-            if (RPTUtil.getAncestor(ruleContext, ["pre", "code", "script", "meta"]) !== null 
+            if (RPTUtil.getAncestor(ruleContext, ["pre", "code", "script", "meta", 'head']) !== null 
                 || nodeName === "body" || nodeName === "html" )
                 return null;
+            console.log("node=" + nodeName +", inline=" +RPTUtil.isInline(ruleContext));
+            if (RPTUtil.isInline(ruleContext))
+                return null;
+
+            if (!VisUtil.isNodeVisible(ruleContext) || !RPTUtil.isTarget(ruleContext))
+                return null;
+
+
+
 
             const bounds = context["dom"].bounds;    
 
@@ -73,12 +78,8 @@
             if (!doc) {
                 return null;
             }
-            var win = doc.defaultView;
-            if (!win) {
-                return null;
-            }
 
-            var cStyle = win.getComputedStyle(ruleContext);
+            var cStyle = getComputedStyle(ruleContext);
             if (cStyle === null) 
                 return null;
 
@@ -94,7 +95,7 @@
             let violations = [];
             let before = true;
             for (let i=0; i < elems.length; i++) {
-                const elem = elems[i];
+                const elem = elems[i] as HTMLElement;
                 /**
                  *  the nodes returned from querySelectorAll is in document order
                  *  if two elements overlap and z-index are not defined, then the node rendered earlier will be overlaid by the node rendered later
@@ -109,7 +110,7 @@
                 const bnds = mapper.getBounds(elem);
                 if (bnds.height === 0 || bnds.width === 0) continue;
 
-                var zStyle = win.getComputedStyle(elem); 
+                var zStyle = getComputedStyle(elem); 
                 let z_index = '0';
                 if (zStyle) {
                     z_index = zStyle.zIndex;

diff --git a/.../checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_element_inline.html b/.../checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_element_inline.html
@@ -46,6 +46,11 @@
       background-color: yellow; 
     }
 
+    button.btn3 {
+      display: inline;
+
+    }
+
     p {
       display: block;
       width: 100px;
@@ -62,8 +67,13 @@
   <h1>The display Property</h1>
 
 <h2>display: inline</h2>
-<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <a class='link' href="google.com">Aliquam</a> <button class='btn' value='venenatis'></button> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
-
+<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. 
+  <a class='link' href="google.com">Aliquam</a> 
+  <button class='btn' value='venenatis'></button> 
+  gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
+  <button class='btn2' value='venenatis'></button> 
+  gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
+  <button class='btn3' value='venenatis'></button> 
 <h2>display: inline-block</h2>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
 
@@ -74,7 +84,7 @@ <h2>display: block</h2>
 
 <script>
   UnitTest = {
-    ruleIds: ["element_tabbable_unobscured"],
+    ruleIds: ["target_spacing_sufficient"],
     results: [
     {
             "ruleId": "element_tabbable_unobscured",

diff --git a/...accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_default.html b/...accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_default.html
@@ -57,7 +57,7 @@
 
 <script>
   UnitTest = {
-    ruleIds: ["element_tabbable_unobscured"],
+    ruleIds: ["target_spacing_sufficient"],
     results: [
     {
             "ruleId": "element_tabbable_unobscured",

diff --git a/.../accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_zindex.html b/.../accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_zindex.html
@@ -59,7 +59,7 @@
 
 <script>
   UnitTest = {
-    ruleIds: ["element_tabbable_unobscured"],
+    ruleIds: ["target_spacing_sufficient"],
     results: [
     {
             "ruleId": "element_tabbable_unobscured",

diff --git a/...accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_visible_zindex.html b/...accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_visible_zindex.html
@@ -59,7 +59,7 @@
 
 <script>
   UnitTest = {
-    ruleIds: ["element_tabbable_unobscured"],
+    ruleIds: ["target_spacing_sufficient"],
     results: [
     {
             "ruleId": "element_tabbable_unobscured",

diff --git a/...est/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_inline.html b/...est/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_inline.html
@@ -31,14 +31,19 @@
       padding: 5px;*/
     }
 
+    a.link1 {
+      display: inline; /* the default for a */
+
+    }
+
     button.btn, img#image1, span.span1 {
       display: inline;
       /**width: 100px;
       height: 100px;
       padding: 5px;*/
     }
 
-    button.btn2, img#image2, a.link1 {
+    button.btn2, img#image2, a.link2 {
       display: inline;
       width: 100px;
       height: 100px;
@@ -56,13 +61,41 @@
       background-color: yellow; 
     }
 
+    button.btn4, img.image3 {
+      display: inline;
+      width: 24px;
+      height: 10px;
+
+    }
+
   </style>
 </head>
 
 <body>
 
   <h1>The display Property</h1>
 
+  <h2>link in small text: link size is controlled by the default text </h2>
+  <small>
+    Vestibulum consequat scelerisque 
+    <a class='link' href="google.com">aliquam</a> 
+    consectetur adipiscing elit.
+    gravida nisl sit amet facilisis 
+    gravida nisl sit amet facilisis 
+    Aliquam 
+    Vestibulum consequat scelerisque 
+    consectetur adipiscing elit. 
+    gravida nisl sit amet facilisis
+    gravida nisl sit amet facilisis 
+    gravida nisl sit amet facilisis 
+    Aliquam <input type="text" value="example text" size="10" />
+    Vestibulum consequat scelerisque
+    consectetur adipiscing elit. 
+    gravida nisl sit amet facilisis 
+    gravida nisl sit amet facilisis 
+  </small>
+
+
 <h2>inline links only -- browser default</h2>
 <div>
   <a class='link' href="google.com">Aliquam</a> 
@@ -83,34 +116,53 @@ <h2>inline links only -- browser default</h2>
   <a class='link' href="google.com">gravida nisl sit amet facilisis</a> 
 </div>
 
-<h2>display: inline</h2>
+
+<h2>display: inline with large size</h2>
 <div>
   Lorem ipsum dolor sit amet,
   <a class='link' href="google.com">Aliquam</a> 
   Vestibulum consequat scelerisque 
-  <img id="image1" src="../support/nav_home.gif" />
+  <a class='link1' href="google.com">Aliquam</a> 
+  Vestibulum consequat scelerisque 
+  <img tabindex='0' id="image1" src="../support/nav_home.gif" />
   consectetur adipiscing elit. 
-  <img id="image2" src="../support/nav_home.gif" />
+  <img tabindex='0' id="image2" src="../support/nav_home.gif" />
   elit sit amet consequat. 
-  <button class='btn' value='venenatis'></button> 
+  <button class='btn' >venenatis</button> 
   gravida nisl sit amet facilisis.
-  <button class='btn2' value='something'></button> 
+  <button class='btn2'>something</button> 
   consectetur adipiscing elit. 
 </div>
 
+<h2>display: inline with small text</h2>
+<div>
+  Lorem ipsum dolor sit amet,
+  Vestibulum consequat scelerisque 
+  Vestibulum consequat scelerisque 
+  <img tabindex='0' class="image3" src="../support/nav_home.gif" />
+  consectetur adipiscing elit. 
+  <img tabindex='0' class="image3" src="../support/nav_home.gif" />
+  elit sit amet consequat. 
+  <button class='btn4' >ok</button> 
+  gravida nisl sit amet facilisis.
+  <button class='btn4'>no</button> 
+  consectetur adipiscing elit. 
+</div>
+
+
 <h2>display: inline-block</h2>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. 
-<button class='btn3' value='anotherthing'></button> 
+<button class='btn3' >anotherthing</button> 
 </div>
 <h2 style="margin-top:100px;">display: mixed</h2>
 <div>Lorem ipsum dolor sit amet,
-  <a class='link1' href="google.com">Aliquam</a> 
+  <a class='link2' href="google.com">Aliquam</a> 
   Vestibulum consequat scelerisque elit sit amet consequat. 
-  <button class='btn' value='venenatis'></button> 
+  <button class='btn' >venenatis</button> 
   gravida nisl sit amet facilisis.
-  <button class='btn2' value='something'></button> 
+  <button class='btn2' >something</button> 
   consectetur adipiscing elit. 
-  <button class='btn3' value='anotherthing'></button> 
+  <button class='btn3' >anotherthing</button> 
   Aliquam erat volutpat. 
 </div>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
@@ -119,7 +171,7 @@ <h2 style="margin-top:100px;">display: mixed</h2>
 
 <script>
   UnitTest = {
-    ruleIds: ["element_tabbable_unobscured"],
+    ruleIds: ["target_spacing_sufficient"],
     results: [
     {
             "ruleId": "element_tabbable_unobscured",