update the rules for customer checkbox and radio button #1610

IBMa · Feb 20, 2024 · dd6ec67 · dd6ec67
1 parent c9bf572
commit dd6ec67
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 27 deletions.
diff --git a/accessibility-checker-engine/src/v4/rules/element_tabbable_visible.ts b/accessibility-checker-engine/src/v4/rules/element_tabbable_visible.ts
@@ -63,11 +63,23 @@ export let element_tabbable_visible: Rule = {
 
         if (defined_styles['position']==='absolute' && defined_styles['clip'] && defined_styles['clip'].replaceAll(' ', '')==='rect(0px,0px,0px,0px)'
             && !onfocus_styles['clip']) {
-            // ignore, Carbon design uses proxy for checkbox and radio button, and they are tabbable and visible
-            let classValue = ruleContext.getAttribute("class");
-            if (classValue && (classValue.includes("bx--checkbox") || classValue.includes("cds--checkbox")
-                || classValue.includes("bx--radio-button") || classValue.includes("cds--radio-button")))
-                return RulePass("pass");
+            /** 
+             * note that checkbox and radio buttons are automatically tabbable, and an event can be triggered on them by selecting either the button or text
+             * even though a checkbox or radio button is clipped to 0 size, it is still available to a keyboard or a screen reader 
+             * the rule passes as long as the label text exists and the button on-focus style defined which likely incurs the changes of the text style   
+             */ 
+            if (nodeName === 'input' && (ruleContext.getAttribute('type')==='checkbox' || ruleContext.getAttribute('type')==='radio')) {
+                const label = RPTUtil.getLabelForElement(ruleContext);
+                if (label && !RPTUtil.isInnerTextEmpty(label)) {
+                    const focus_styles = getDefinedStyles(ruleContext, ":focus");
+                    const focus_visible_styles = getDefinedStyles(ruleContext, ":focus-visible");
+                    const focus_within_styles = getDefinedStyles(ruleContext, ":focus-within");
+                    const checked_styles = getDefinedStyles(ruleContext, ":checked");
+
+                    if (focus_styles || focus_visible_styles || focus_within_styles || checked_styles)
+                        return RulePass("pass");
+                }     
+            }    
             return RulePotential("potential_visible", []);
         }    
 

diff --git a/accessibility-checker-engine/src/v4/util/CSSUtil.ts b/accessibility-checker-engine/src/v4/util/CSSUtil.ts
@@ -65,11 +65,14 @@ export function getComputedStyle(elem: HTMLElement, pseudoElt?: PseudoClass) {
  * for example, for 'transform: rotate(2.5deg);', the computed style returns 'matrix(-0.0436194, 0.999048, -0.999048, -0.0436194, 0, 0)' 
  *  and the defined style returns 'rotate(2.5deg)'  
  * 
+ * change the type of the parameter pseudoClass from PseudoClass to string to include both pseudo classes (e.g., :focus, :checked) 
+ * and pseudo elements (e.g., ::before, ::after).  
+ * 
  * @param {HTMLElement} elem 
  * @param {string} [pseudoClass] If specified, will return values that are different
  * than when the pseudoClass does not match.
  */
-export function getDefinedStyles(elem: HTMLElement, pseudoClass?: PseudoClass) {
+export function getDefinedStyles(elem: HTMLElement, pseudoClass?: string ) {
     // console.log("Function: getDefinedStyles");
     let definedStyles = {};
     let definedStylePseudo = {};

diff --git a/...e_ruleunit/Elements-clip-zero-carbon.html → ..._visible_ruleunit/Checkbox-clip-zero.html b/...e_ruleunit/Elements-clip-zero-carbon.html → ..._visible_ruleunit/Checkbox-clip-zero.html
@@ -23,7 +23,7 @@
 <head>
 	<title>Test Example</title>
   <style>
-    .bx--checkbox, .bx--radio-button {
+    .catalog--checkbox {
 		    position: absolute;
 		    width: 1px;
 		    height: 1px;
@@ -38,16 +38,28 @@
 
     }
 
-
+    .catalog--checkbox-label-text::before {
+        position: absolute;
+        top: 0.125rem;
+        left: 0;
+        width: 1rem;
+        height: 1rem;
+        border: 1px solid var(--cds-icon-01, #161616);
+        margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
+        background-color: rgba(0,0,0,0);
+        border-radius: 1px;
+        display:block;
+        content: "";
+    }  
 
 </style>
 </head>
 
 <body>
 
-<div class="wrapper">    
-  <input type="checkbox" class="bx--checkbox" id="catalog">
-  <input type="radio" class="bx--radio-button" id="catalog selection">
+<div> 
+  <input type="checkbox" class="catalog--checkbox" id="catalog">
+  <label for="catalog" class="catalog--checkbox-label-text">iOS</label>
 </div>
 <script>
   UnitTest = {
@@ -68,22 +80,6 @@
             "messageArgs": [],
             "apiArgs": [],
             "category": "Accessibility"
-          },
-          {
-            "ruleId": "element_tabbable_visible",
-            "value": [
-              "INFORMATION",
-              "PASS"
-            ],
-            "path": {
-              "dom": "/html[1]/body[1]/div[1]/input[2]",
-              "aria": "/document[1]/radio[1]"
-            },
-            "reasonId": "pass",
-            "message": "The tabbable element is visible on the screen",
-            "messageArgs": [],
-            "apiArgs": [],
-            "category": "Accessibility"
           }
       ]
   }

diff --git a/...est/v2/checker/accessibility/rules/element_tabbable_visible_ruleunit/Radio-clip-zero.html b/...est/v2/checker/accessibility/rules/element_tabbable_visible_ruleunit/Radio-clip-zero.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
+<!--
+   /******************************************************************************
+     Copyright:: 2020- IBM, Inc
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+  *****************************************************************************/
+-->
+
+<html lang="en">
+
+<head>
+	<title>Test Example</title>
+  <style>
+    .catalog--radio {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+
+    }
+
+    .catalog--radio-label-text {
+        flex: auto;
+        background-color: #FFF;
+        color: #1E69A6;
+        text-align: center;
+        padding: 4px 8px;
+        border: 1px solid #999CA0;
+        border-radius: 0;
+        transition: all 0.2s ease-in-out;
+    }  
+
+</style>
+</head>
+
+<body>
+
+<div> 
+  <input type="radio" class="catalog--radio" id="catalog">
+  <label for="catalog" class="catalog--radio-label-text">iOS</label>
+</div>
+<script>
+  UnitTest = {
+      ruleIds: ["element_tabbable_visible"],
+      results: [
+      {
+            "ruleId": "element_tabbable_visible",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/div[1]/input[1]",
+              "aria": "/document[1]/radio[1]"
+            },
+            "reasonId": "pass",
+            "message": "The tabbable element is visible on the screen",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          }
+      ]
+  }
+</script>
+
+</body>
+
+</html>