Merge pull request #1775 from IBMa/dev-761

fixrule(`input_label_exists`) fix issue related to button element with a label
IBMa · Dec 18, 2023 · 85d6d62 · 85d6d62
2 parents 4be30c1 + d7bdbd8
commit 85d6d62
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 17 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
@@ -2188,6 +2188,7 @@ export class RPTUtil {
         // Test  a) if the parent is a label which is the implicit label
         //       b) if the form element is the first child of the label
         //       c) if the form element requires an implicit or explicit label : "input",  "textarea", "select", "keygen", "progress", "meter", "output"
+        //       d) form elements which may have a label: button
         // form elements that do not require implicit or explicit label element are:
         // "optgroup", "option", "datalist"(added later). These were handled differently in the main rule, might need to refactor the code later
 

diff --git a/accessibility-checker-engine/src/v4/rules/input_label_exists.ts b/accessibility-checker-engine/src/v4/rules/input_label_exists.ts
@@ -140,6 +140,17 @@ export let input_label_exists: Rule = {
             if (!passed) POF = 2 + textTypes.length + buttonTypes.length + 1;
         }
 
+        //check if a native button is labelled
+        if (!passed && nodeName == "button") {
+             if (RPTUtil.hasImplicitLabel(ruleContext))
+                passed = true;
+             else {
+                let label = RPTUtil.getLabelForElement(ruleContext);
+                if (label && RPTUtil.hasInnerContentHidden(label))
+                    passed = true;    
+             }    
+        }
+
         // Rpt_Aria_ValidIdRef determines if the aria-labelledby id points to a valid element
         if (!passed && (buttonTypes.indexOf(type) !== -1)) {
             if (ruleContext.hasAttribute("class") && ruleContext.getAttribute("class") == "dijitOffScreen" && DOMWalker.parentElement(ruleContext).hasAttribute("widgetid")) {
@@ -163,23 +174,7 @@ export let input_label_exists: Rule = {
             passed = RPTUtil.attributeNonEmpty(ruleContext, "label") || ruleContext.innerHTML.trim().length > 0;
             if (!passed) POF = 2 + textTypes.length + buttonTypes.length + 3;
         } 
-        /**if (!passed) {
-            // check aria role
-            //any more roles for input? 
-            const nameFromBoth = RPTUtil.hasRoleInSemantics(ruleContext, "menuitemcheckbox") || RPTUtil.hasRoleInSemantics(ruleContext, "menuitemradio")
-                || RPTUtil.hasRoleInSemantics(ruleContext, "radio") || RPTUtil.hasRoleInSemantics(ruleContext, "checkbox");
-            const nameFromAuthorOnly = RPTUtil.hasRoleInSemantics(ruleContext, "listbox") || RPTUtil.hasRoleInSemantics(ruleContext, "searchbox") 
-                || RPTUtil.hasRoleInSemantics(ruleContext, "textbox") || RPTUtil.hasRoleInSemantics(ruleContext, "combobox")
-                || !RPTUtil.hasAnyRole(ruleContext, true);   
-            
-            if (nameFromBoth)
-                passed = RPTUtil.getInnerText(ruleContext) && RPTUtil.getInnerText(ruleContext).trim().length > 0;
-            
-            if (!passed) {
-                if (nameFromBoth || nameFromAuthorOnly)
-                passed = RPTUtil.getAriaLabel(ruleContext).trim().length > 0 || RPTUtil.attributeNonEmpty(ruleContext, "title");
-            } 
-        }*/
+
         if (!passed)
             passed = RPTUtil.getAriaLabel(ruleContext).trim().length > 0 || RPTUtil.attributeNonEmpty(ruleContext, "title");
 

diff --git a/...-engine/test/v2/checker/accessibility/rules/input_label_exists_ruleunit/button_label.html b/...-engine/test/v2/checker/accessibility/rules/input_label_exists_ruleunit/button_label.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Sandbox</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <main>
+      <h1>Test page</h1>
+      <div class="cds--toggle">
+        <button
+          id="toggle-1"
+          class="cds--toggle__button"
+          role="switch"
+          type="button"
+          aria-checked="true"
+        ></button>
+        <label for="toggle-1" class="cds--toggle__label">
+          <span class="cds--toggle__label-text">Toggle element label 1</span>
+        </label>
+      </div>
+      <div>
+        <label for="toggle-2" class="cds--toggle__label">
+          <button 
+            id="toggle-2"
+            class="cds--toggle__button"
+            type="button"
+          ></button>
+          <span class="cds--toggle__label-text">Toggle element label 2</span>
+        </label>
+      </div>
+    </main>
+
+  <script>
+    UnitTest = {
+      ruleIds: ["input_label_exists"],
+      results: [
+      {
+            "ruleId": "input_label_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/main[1]/div[1]/button[1]",
+              "aria": "/document[1]/main[1]/switch[1]"
+            },
+            "reasonId": "Pass_0",
+            "message": "Rule Passed",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "input_label_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/main[1]/div[2]/label[1]/button[1]",
+              "aria": "/document[1]/main[1]/button[1]"
+            },
+            "reasonId": "Pass_0",
+            "message": "Rule Passed",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          }
+      ]
+    };
+  </script>
+</body>
+</html>