update the rule and add a test case #dev-2085 (#2180)

shunguoy · philljenkins · web-flow · commit 786005bda5cf · 2025-02-10T10:03:24.000-06:00
Co-authored-by: Phill Jenkins &lt;pjenkins@us.ibm.com&gt;
diff --git a/accessibility-checker-engine/src/v4/util/AccNameUtil.ts b/accessibility-checker-engine/src/v4/util/AccNameUtil.ts
@@ -144,7 +144,15 @@ export class AccNameUtil {
                 let pair = AccNameUtil.computeAccessibleName(image); 
                 if (pair && pair.name && pair.name.trim().length > 0) 
                     return pair;
-            }       
+            }
+            
+            // for a button with a svg image
+            const svg = elem.querySelector('svg');
+            if (svg && !VisUtil.isNodeHiddenFromAT(svg) && !VisUtil.isNodePresentational(svg)) {
+                let pair = AccNameUtil.computeAccessibleNameForSVGElement(svg); 
+                if (pair && pair.name && pair.name.trim().length > 0) 
+                    return pair;
+            }
         }
 
         // fieldset
@@ -397,7 +405,7 @@ export class AccNameUtil {
         const contentElem = elem.ownerDocument.defaultView.getComputedStyle(elem,type);
         if (contentElem) {
             let content = contentElem.content;
-            if (content && content !== "none") {
+            if (content && content !== "none" && content !== "no" && content !== "normal") {
                 content = content.replace(/^"/,"").replace(/"$/,"");
                 if (content.trim().length > 0)
                     return {"name": CommonUtil.truncateText(content), "nameFrom": "css-"+type};
diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/input_label_visible_ruleunit/element_with_aria.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/input_label_visible_ruleunit/element_with_aria.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Input with image child</title>
+
+</head>
+
+<body>
+
+  <hr style="margin: 20px;">
+
+  <button aria-hidden="true" tabindex="-1" aria-label="Scroll right"
+    class="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--next cds--tab--overflow-nav-button--hidden"
+    type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="16" height="16"
+      viewBox="0 0 16 16" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
+    </svg>
+  </button>
+
+  <hr style="margin: 20px;">
+  <button type="button">
+      <svg focusable="false">
+          <defs><style>.cls-1{fill:none;}</style></defs>
+          <rect class="cls-1" width="32" height="32"></rect>
+          <title>text</title>
+      </svg>
+  </button>
+
+  <hr style="margin: 20px;">
+  <button type="button">
+      <svg focusable="false" aria-label="svg image">
+          <defs><style>.cls-1{fill:none;}</style></defs>
+          <rect class="cls-1" width="32" height="32"></rect>
+      </svg>
+  </button>
+
+  <hr style="margin: 50px;">
+</body>
+<script>
+  UnitTest = {
+    ruleIds: ["input_label_visible"],
+    results: [
+    {
+            "ruleId": "input_label_visible",
+            "value": [
+              "INFORMATION",
+              "POTENTIAL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/button[1]",
+              "aria": "/document[1]/button[1]"
+            },
+            "reasonId": "potential_no_label",
+            "message": "The input element does not have an associated visible label",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "input_label_visible",
+            "value": [
+              "INFORMATION",
+              "POTENTIAL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/button[2]",
+              "aria": "/document[1]/button[2]"
+            },
+            "reasonId": "potential_no_label",
+            "message": "The input element does not have an associated visible label",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "input_label_visible",
+            "value": [
+              "INFORMATION",
+              "POTENTIAL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/button[3]",
+              "aria": "/document[1]/button[3]"
+            },
+            "reasonId": "potential_no_label",
+            "message": "The input element does not have an associated visible label",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          }
+    ]
+  };
+</script>
+
+</html>
