From 1157e8ee5588b10aaccea139c09ba287fd858266 Mon Sep 17 00:00:00 2001
From: Shunguo <shunguoy@us.ibm.com>
Date: Thu, 19 Oct 2023 10:54:05 -0500
Subject: [PATCH] update rule and test cases #1674

---
 .../v2/checker/accessibility/util/legacy.ts   | 34 +++-----
 .../src/v4/rules/target_spacing_sufficient.ts | 27 +++---
 .../block_element_inline.html                 | 16 +++-
 .../block_overlaid_hidden_default.html        |  2 +-
 .../block_overlaid_hidden_zindex.html         |  2 +-
 .../block_overlaid_visible_zindex.html        |  2 +-
 .../element_inline.html                       | 76 ++++++++++++++---
 .../element_list.html                         | 82 +++++++++++++++++++
 .../element_target.html                       |  2 +-
 9 files changed, 188 insertions(+), 55 deletions(-)
 create mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_list.html

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 7fe26ae23..2262fcc10 100644
--- 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
index 7993bc346..8fb1a3aa6 100644
--- 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/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_element_inline.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_element_inline.html
index 204c8c8dc..d61c4d500 100755
--- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_element_inline.html
+++ b/accessibility-checker-engine/test/v2/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-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_default.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_default.html
index 02268eb3d..0c828839d 100755
--- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_default.html
+++ b/accessibility-checker-engine/test/v2/checker/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-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_zindex.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_zindex.html
index ac5812e05..af5de593b 100755
--- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_hidden_zindex.html
+++ b/accessibility-checker-engine/test/v2/checker/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-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_visible_zindex.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_visible_zindex.html
index f8dce5098..44464b00f 100755
--- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/block_overlaid_visible_zindex.html
+++ b/accessibility-checker-engine/test/v2/checker/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/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_inline.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_inline.html
index e5c4cdfed..49d729429 100755
--- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_inline.html
+++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_inline.html
@@ -31,6 +31,11 @@
       padding: 5px;*/
     }
 
+    a.link1 {
+      display: inline; /* the default for a */
+      
+    }
+
     button.btn, img#image1, span.span1 {
       display: inline;
       /**width: 100px;
@@ -38,7 +43,7 @@
       padding: 5px;*/
     }
 
-    button.btn2, img#image2, a.link1 {
+    button.btn2, img#image2, a.link2 {
       display: inline;
       width: 100px;
       height: 100px;
@@ -56,6 +61,13 @@
       background-color: yellow; 
     }
 
+    button.btn4, img.image3 {
+      display: inline;
+      width: 24px;
+      height: 10px;
+      
+    }
+
   </style>
 </head>
 
@@ -63,6 +75,27 @@
 
   <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",
diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_list.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_list.html
new file mode 100644
index 000000000..7975496b0
--- /dev/null
+++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_list.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <style>
+    option.opt {
+      display: block;
+      line-height: 1px;
+      margin-top:-5px; 
+    }
+
+  </style>
+</head>
+<body>
+  <main>
+    <div class="testcase1">
+      <label for="pet">
+        Select your favorite pet:</label><br>
+        <select id='pet' name="pet" multiple>
+          <option> </option>
+          <option class="opt">first pet: Furry Cat</option>
+          <option class="opt">second pet: Cunning Dog</option>
+          <option class="opt">third pet: Guinea Pig</option>
+          <option class="opt">fourth pet: Hamster </option> 
+          <option class="opt">fifth pet: Bunny </option> 
+        </select>
+  </div>
+
+    <div class="testcase2" style="margin-top:30px;">
+        <label for="pet">
+          Select your favorite flower:</label><br>
+          <select id='pet' name="pet" multiple>
+            <option> </option>
+            <option>first flower: Carnation</option>
+            <option class="normal">second flower: Rose</option>
+            <option class="normal">third flower: Iris</option>
+            <option class="normal">fourth flower: Lily</option> 
+            <option class="normal">fifth flower: Tulip </option> 
+          </select>
+    </div>
+  </main>
+  <script>
+    UnitTest = {
+      ruleIds: ["target_spacing_sufficient"],
+      results: [
+        {
+          "ruleId": "input_label_exists",
+          "value": [
+            "INFORMATION",
+            "PASS"
+          ],
+          "path": {
+            "dom": "/html[1]/body[1]/main[1]/div[1]/label[1]/input[1]",
+            "aria": "/document[1]/main[1]/combobox[1]"
+          },
+          "reasonId": "Pass_0",
+          "message": "Rule Passed",
+          "messageArgs": [],
+          "apiArgs": [],
+          "category": "Accessibility"
+        },
+        {
+          "ruleId": "widget_tabbable_exists",
+          "value": [
+            "INFORMATION",
+            "PASS"
+          ],
+          "path": {
+            "dom": "/html[1]/body[1]/main[1]/div[1]/label[1]/input[1]",
+            "aria": "/document[1]/main[1]/combobox[1]"
+          },
+          "reasonId": "pass",
+          "message": "Rule Passed",
+          "messageArgs": [],
+          "apiArgs": [],
+          "category": "Accessibility"
+        }
+      ]
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_target.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_target.html
index 131a952a8..afd8b5286 100755
--- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_target.html
+++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/target_spacing_sufficient_ruleunit/element_target.html
@@ -122,7 +122,7 @@
 </div>
 <script>
   UnitTest = {
-    ruleIds: ["element_tabbable_unobscured"],
+    ruleIds: ["target_spacing_sufficient"],
     results: [
     {
             "ruleId": "element_tabbable_unobscured",