From c35b5f3b9899ef7d02eebe75dc0eba071a62618d Mon Sep 17 00:00:00 2001 From: Shunguo Date: Mon, 8 Jan 2024 16:16:21 -0600 Subject: [PATCH 1/4] add test case for #1008 --- .../src/v4/rules/heading_content_exists.ts | 2 +- .../contentvisibility-auto.html | 165 ++++++++++++++++++ .../contentvisibility-hidden.html | 90 ++++++++++ 3 files changed, 256 insertions(+), 1 deletion(-) create mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html create mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html diff --git a/accessibility-checker-engine/src/v4/rules/heading_content_exists.ts b/accessibility-checker-engine/src/v4/rules/heading_content_exists.ts index 9e208953f..5f40b4398 100644 --- a/accessibility-checker-engine/src/v4/rules/heading_content_exists.ts +++ b/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"; diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html new file mode 100644 index 000000000..791ed8349 --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html @@ -0,0 +1,165 @@ + + + + + + + RPT Test Suite + + + + + Click me for first H2 info +
+
+

+ Test 111 +

+ +

+ Test 222 +

+ +

+ +

+ +

+ +

+ +

+ Test + +

+
+ + + \ No newline at end of file diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html new file mode 100644 index 000000000..da1800f58 --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html @@ -0,0 +1,90 @@ + + + + + + + + RPT Test Suite + + + + + skip to main content + + +
Test case: Headings-invalidHidden.html
+ + + + + + +
Headings Tests
+ + + + +

+

H2

+

H3

+

H4

+
H5
+
H6
+ +
test div
+
test span in div
+

test p in div

+
test a in div
+
test strong in div
+
+ +

+ + + + +
cell 11cell12cell 21cell22
+

+

+ + + +
+ + + + + + + + + + From 2c480b431311cdbe7dc18507186f0950306b3c6e Mon Sep 17 00:00:00 2001 From: Shunguo Date: Tue, 9 Jan 2024 10:41:38 -0600 Subject: [PATCH 2/4] fix the text calculation for content-visibility:auto #1008 --- .../src/v2/checker/accessibility/util/legacy.ts | 4 ++-- .../contentvisibility-auto.html | 2 +- 2 files changed, 3 insertions(+), 3 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 index e1a83102e..6eb2ed627 100644 --- a/accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts +++ b/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; } diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html index 791ed8349..0e874ab05 100644 --- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-auto.html @@ -29,7 +29,7 @@ - Click me for first H2 info + Static link

From 3ab60340fb935784e4c8fdd9ea6c506bc0459d29 Mon Sep 17 00:00:00 2001 From: Shunguo Date: Wed, 10 Jan 2024 15:49:56 -0600 Subject: [PATCH 3/4] update engine for content-visibility style #1008 --- .../src/v2/dom/VisUtil.ts | 34 ++++ .../heading-contentvisibility-hidden.html | 149 ++++++++++++++++++ .../fieldset-contentvisibility.html | 90 +++++++++++ .../contentvisibility-hidden.html | 90 ----------- 4 files changed, 273 insertions(+), 90 deletions(-) create mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html create mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/fieldset_label_valid_ruleunit/fieldset-contentvisibility.html delete mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html diff --git a/accessibility-checker-engine/src/v2/dom/VisUtil.ts b/accessibility-checker-engine/src/v2/dom/VisUtil.ts index 2e9a2b6ca..9e97b006a 100644 --- a/accessibility-checker-engine/src/v2/dom/VisUtil.ts +++ b/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 diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html new file mode 100644 index 000000000..b3cfaa2a2 --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html @@ -0,0 +1,149 @@ + + + + + + + + RPT Test Suite + + + + + skip to main content + + +
Test case: content-visibility:hidden
+ + + + + + +
content visibility Tests
+ + +
    +
  • Test - content-visibility
  • +
+ +

H4 visible

+
H5 auto
+
H6
+ +
H6 hidden
+ +
H6 hidden display block
+ + + + + + + + diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/fieldset_label_valid_ruleunit/fieldset-contentvisibility.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/fieldset_label_valid_ruleunit/fieldset-contentvisibility.html new file mode 100644 index 000000000..d2ead9a68 --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/fieldset_label_valid_ruleunit/fieldset-contentvisibility.html @@ -0,0 +1,90 @@ + + + + + + + + RPT Test Suite + + + + + skip to main content + + +
Test case: content-visibility:hidden
+ + + + + + +
content visibility Tests
+ + +
    +
  • Test - content-visibility
  • +
+ +
+ this is a fieldset1 + + + +
+ +
+ this is a fieldset2 hidden + + + +
+ + + + + + + + diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html deleted file mode 100644 index da1800f58..000000000 --- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/contentvisibility-hidden.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - - - RPT Test Suite - - - - - skip to main content - - -
Test case: Headings-invalidHidden.html
- - - - - - -
Headings Tests
- - -
    -
  • Test - headings with content-visibility
  • -
- -

-

H2

-

H3

-

H4

-
H5
-
H6
- -
test div
-
test span in div
-

test p in div

- -
test strong in div
-
- -

- - - - -
cell 11cell12cell 21cell22
-

-

- - - -
- -
    -
  • Coffee
  • -
  • Tea
  • -
  • Milk
  • -
- - - - - - - - From 84676e0d83567206daf53f1f4e20590132d7ae40 Mon Sep 17 00:00:00 2001 From: Shunguo Date: Thu, 11 Jan 2024 11:04:03 -0600 Subject: [PATCH 4/4] update test cases for the content-visibility style #1008 --- .../src/v4/rules/fieldset_legend_valid.ts | 6 + ...den.html => contentvisibility-hidden.html} | 79 ++++++- .../heading-contentvisibility-hidden.html | 214 ++++++++++++++++++ 3 files changed, 298 insertions(+), 1 deletion(-) rename accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/{heading-contentvisibility-hidden.html => contentvisibility-hidden.html} (61%) create mode 100644 accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/heading-contentvisibility-hidden.html diff --git a/accessibility-checker-engine/src/v4/rules/fieldset_legend_valid.ts b/accessibility-checker-engine/src/v4/rules/fieldset_legend_valid.ts index 0f0cd5d0e..861ff7b00 100644 --- a/accessibility-checker-engine/src/v4/rules/fieldset_legend_valid.ts +++ b/accessibility-checker-engine/src/v4/rules/fieldset_legend_valid.ts @@ -14,6 +14,7 @@ import { Rule, RuleResult, RuleFail, RuleContext, RulePass, RuleContextHierarchy } from "../api/IRule"; import { eRulePolicy, eToolkitLevel } from "../api/IRule"; import { RPTUtil } from "../../v2/checker/accessibility/util/legacy"; +import { VisUtil } from "../../v2/dom/VisUtil"; export let fieldset_legend_valid: Rule = { id: "fieldset_legend_valid", @@ -52,6 +53,11 @@ export let fieldset_legend_valid: Rule = { act: [], run: (context: RuleContext, options?: {}, contextHierarchies?: RuleContextHierarchy): RuleResult | RuleResult[] => { const ruleContext = context["dom"].node as Element; + + //skip the check if the element is hidden or disabled + if (VisUtil.isNodeHiddenFromAT(ruleContext) || RPTUtil.isNodeDisabled(ruleContext)) + return; + // In the case a legend is hidden, we should still trigger a violations for this let legends = RPTUtil.getChildByTagHidden(ruleContext, "legend", true, false); if (legends.length === 0) { diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/contentvisibility-hidden.html similarity index 61% rename from accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html rename to accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/contentvisibility-hidden.html index b3cfaa2a2..30c9c6b2b 100644 --- a/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/heading-contentvisibility-hidden.html +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/aria_accessiblename_exists_ruleunit/contentvisibility-hidden.html @@ -48,8 +48,12 @@
H5 auto
H6
H6 hidden
+
H6 hidden display inline
H6 hidden display block
+
H6 hidden display inline block
+
H6 hidden display flex
+
H6 hidden display grid
@@ -126,12 +130,85 @@
H6 hidden display blo "ruleId": "aria_accessiblename_exists", "value": [ "INFORMATION", - "FAIL" + "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
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
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
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
with \"heading\" role has no accessible name", "messageArgs": [ diff --git a/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/heading-contentvisibility-hidden.html b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/heading-contentvisibility-hidden.html new file mode 100644 index 000000000..abef7727b --- /dev/null +++ b/accessibility-checker-engine/test/v2/checker/accessibility/rules/heading_content_exists_ruleunit/heading-contentvisibility-hidden.html @@ -0,0 +1,214 @@ + + + + + + + + RPT Test Suite + + + + + skip to main content + + +
Test case: content-visibility:hidden
+ + + + + + +
content visibility Tests
+ + +
    +
  • Test - content-visibility
  • +
+ +

H4 visible

+
H5 auto
+
H6
+ +
H6 hidden
+
H6 hidden display inline
+ +
H6 hidden display block
+
H6 hidden display inline block
+
H6 hidden display flex
+
H6 hidden display grid
+ + + + + + + +