fix(engine): support CSS content-visibility style

accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts

@@ -2523,7 +2523,7 @@ export class RPTUtil {
         // Get the innerText of the element
         let text = element.innerText;
 
-        if ((text === undefined || !text || text.trim().length === 0) && element.nodeName.toLowerCase() !== 'slot' && element.textContent !== undefined) {
+        if ((text === undefined || text === null || text.trim().length === 0) && element.nodeName.toLowerCase() !== 'slot' && element.textContent !== undefined) {
             //ignore slot because its text will be filled by the corresponding content in the light DOM 
             // innerText is sometimes 'undefined' in headless mode, or null if the element is invisible or not erxpanded 
             // so we try textContent as a workaround
@@ -2545,7 +2545,7 @@ export class RPTUtil {
     /* Return the inner text of the given element */
     public static getInnerText(element) {
         let retVal = element.innerText;
-        if (retVal === undefined || retVal.trim() === "")
+        if (retVal === undefined || retVal === null || retVal.trim() === "")
             retVal = element.textContent;
         return retVal;
     }

accessibility-checker-engine/src/v2/dom/VisUtil.ts

@@ -179,6 +179,12 @@ export class VisUtil {
                 setCache(node, "PT_NODE_HIDDEN", true);
                 return false;
             }
+
+            // check content-visibility: if the content-visibility is hiddenthen, return false as the element is not visible
+            if (VisUtil.isContentHidden(node)) {
+                setCache(node, "PT_NODE_HIDDEN", true);
+                return false;
+            }
         }
 
         // Get the parentNode for this node, becuase we have to check all parents to make sure they do not have
@@ -214,6 +220,34 @@ export class VisUtil {
         return true;
     }
 
+    /**
+     * return true if the node or its ancestor is hidden by CSS content-visibility:hidden
+     * At this time, CSS content-visibility is partially supported by Chrome & Edge, but not supported by Firefox
+     * The implementation TEMPORARILY follows the Chrome test results:
+     *   if content-visibility:hidden
+     *      if the element is block-level (default or specified by the user), then the element and its children are normally hidden;
+     *      if the element is inline (default or specified by the user), then the element and its children are normally NOT hidden; 
+     * 
+     * @param node
+     */
+    public static isContentHidden(node: Element) : boolean {
+        if (!node) return false;
+
+        const style =  getComputedStyle(node);
+        if (!style) return false;
+
+        const content_visibility = style.getPropertyValue("content-visibility");
+        if (content_visibility !== 'hidden') 
+            return false;  
+
+        const display = style.getPropertyValue("display"); 
+        // inline element only
+        if (display === 'inline')
+            return false;
+
+        return true;
+    }
+
     /**
      * return true if the node or its ancestor is natively hidden or aria-hidden = 'true'
      * @param node

accessibility-checker-engine/src/v4/rules/fieldset_legend_valid.ts

@@ -53,7 +53,8 @@ export let fieldset_legend_valid: Rule = {
     act: [],
     run: (context: RuleContext, options?: {}, contextHierarchies?: RuleContextHierarchy): RuleResult | RuleResult[] => {
         const ruleContext = context["dom"].node as Element;
-        //skip if the fieldset is hidden or disabled
+
+      //skip if the fieldset is hidden or disabled
         if (VisUtil.isNodeHiddenFromAT(ruleContext) || RPTUtil.isNodeDisabled(ruleContext))
             return null;
 

accessibility-checker-engine/src/v4/rules/heading_content_exists.ts

@@ -11,7 +11,7 @@
   limitations under the License.
 *****************************************************************************/
 
-import { Rule, RuleResult, RuleFail, RuleContext, RulePotential, RuleManual, RulePass, RuleContextHierarchy } from "../api/IRule";
+import { Rule, RuleResult, RuleFail, RuleContext, RulePass, RuleContextHierarchy } from "../api/IRule";
 import { eRulePolicy, eToolkitLevel } from "../api/IRule";
 import { RPTUtil } from "../../v2/checker/accessibility/util/legacy";
 

accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/contentvisibility-hidden.html

@@ -0,0 +1,226 @@
+<!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>RPT Test Suite</title>
+</head>
+
+<body>
+
+	<a href="#navskip">skip to main content</a>
+
+
+	<div>Test case: content-visibility:hidden</div>
+
+
+
+	<!-- ################################################################### -->
+
+
+	<div>content visibility Tests</div>
+
+
+	<ul>
+		<li>Test - content-visibility</li>
+	</ul>
+
+	<h4><span style="content-visibility: visible">H4 visible</span></h4>
+	<h5><span style="content-visibility: auto">H5 auto</span></h5>
+  <h6><span style="content-visibility:none">H6</span></h6>
+
+	<h6><span style="content-visibility: hidden;">H6 hidden</span></h6>
+  <h6><span style="content-visibility: hidden;display:inline">H6 hidden display inline</span></h6>
+
+  <h6><span style="content-visibility: hidden;display:block">H6 hidden display block</span></h6>
+  <h6><span style="content-visibility: hidden;display:inline-block">H6 hidden display inline block</span></h6>
+  <h6><span style="content-visibility: hidden;display:flex">H6 hidden display flex</span></h6>
+  <h6><span style="content-visibility: hidden;display:grid">H6 hidden display grid</span></h6>
+
+	<a name="navskip"></a>
+
+
+<script>
+    UnitTest = {
+      ruleIds: ["aria_accessiblename_exists"],
+      results: [
+      {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h4[1]",
+              "aria": "/document[1]/heading[1]"
+            },
+            "reasonId": "pass",
+            "message": "An accessible name is provided for the element",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h5[1]",
+              "aria": "/document[1]/heading[2]"
+            },
+            "reasonId": "pass",
+            "message": "An accessible name is provided for the element",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[1]",
+              "aria": "/document[1]/heading[3]"
+            },
+            "reasonId": "pass",
+            "message": "An accessible name is provided for the element",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[2]",
+              "aria": "/document[1]/heading[4]"
+            },
+            "reasonId": "pass",
+            "message": "An accessible name is provided for the element",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "PASS"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[3]",
+              "aria": "/document[1]/heading[5]"
+            },
+            "reasonId": "pass",
+            "message": "An accessible name is provided for the element",
+            "messageArgs": [],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "FAIL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[4]",
+              "aria": "/document[1]/heading[6]"
+            },
+            "reasonId": "fail_no_accessible_name",
+            "message": "Element <h6> with \"heading\" role has no accessible name",
+            "messageArgs": [
+              "h6",
+              "heading"
+            ],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "FAIL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[5]",
+              "aria": "/document[1]/heading[7]"
+            },
+            "reasonId": "fail_no_accessible_name",
+            "message": "Element <h6> with \"heading\" role has no accessible name",
+            "messageArgs": [
+              "h6",
+              "heading"
+            ],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "FAIL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[6]",
+              "aria": "/document[1]/heading[8]"
+            },
+            "reasonId": "fail_no_accessible_name",
+            "message": "Element <h6> with \"heading\" role has no accessible name",
+            "messageArgs": [
+              "h6",
+              "heading"
+            ],
+            "apiArgs": [],
+            "category": "Accessibility"
+          },
+          {
+            "ruleId": "aria_accessiblename_exists",
+            "value": [
+              "INFORMATION",
+              "FAIL"
+            ],
+            "path": {
+              "dom": "/html[1]/body[1]/h6[7]",
+              "aria": "/document[1]/heading[9]"
+            },
+            "reasonId": "fail_no_accessible_name",
+            "message": "Element <h6> with \"heading\" role has no accessible name",
+            "messageArgs": [
+              "h6",
+              "heading"
+            ],
+            "apiArgs": [],
+            "category": "Accessibility"
+          }
+      ]
+    };
+  </script>
+</body>
+
+</html>