Skip to content

Commit

Permalink
Merge pull request #1785 from IBMa/dev-1008
Browse files Browse the repository at this point in the history 
fix(engine): support CSS content-visibility style
  • Loading branch information
@ErickRenteria
ErickRenteria authored Jan 22, 2024
2 parents c95dd7b + 8c2a3cd commit 3044945
Show file tree
Hide file tree
Showing 8 changed files with 734 additions and 4 deletions.
4 changes: 2 additions & 2 deletions accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}
Expand Down
34 changes: 34 additions & 0 deletions accessibility-checker-engine/src/v2/dom/VisUtil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion accessibility-checker-engine/src/v4/rules/fieldset_legend_valid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion accessibility-checker-engine/src/v4/rules/heading_content_exists.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
226 changes: 226 additions & 0 deletions ...ker/accessibility/rules/aria_accessiblename_exists_ruleunit/contentvisibility-hidden.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 3044945

Please sign in to comment.