Commit 064514b8 authored by Mihkel Eidast's avatar Mihkel Eidast

fix(rules): ignore links hidden from accessibility tree - fixes #97

parent d887bcff
......@@ -4,7 +4,8 @@ const markup: { [key: string]: string } = {};
markup["incorrect"] = `<a><img src="cat.gif"></a>`;
markup["correct"] = `<a>lorem ipsum</a>
<a><img src="cat.gif" alt="cat page"></a>
<a aria-label="lorem ipsum"></a>`;
<a aria-label="lorem ipsum"></a>
<a aria-hidden="true"></a>`;
describe("docs/rules/wcag/h30.md", () => {
it("inline validation: incorrect", () => {
......
......@@ -16,11 +16,14 @@ links and determine whenever to follow the link or not. Assistive technology may
also present a list of links in which case the description is the only thing the
user will be presented with.
Links can be excluded from the accessibility tree with `aria-hidden="true"`.
The rule recognizes the following patterns:
- Text (non-whitespace) inside the link
- Images with `alt` text (non-whitespace)
- `aria-label` either on the link or at least one descendant.
- `aria-hidden` on the link
[1]: https://www.w3.org/WAI/WCAG21/Techniques/html/H30
......@@ -38,4 +41,5 @@ Examples of **correct** code for this rule:
<a>lorem ipsum</a>
<a><img src="cat.gif" alt="cat page"></a>
<a aria-label="lorem ipsum"></a>
<a aria-hidden="true"></a>
</validate>
......@@ -34,6 +34,12 @@ describe("wcag/h30", () => {
expect(report).toBeValid();
});
it("should not report when link is hidden from accessibility tree", () => {
expect.assertions(1);
const report = htmlvalidate.validateString('<a aria-hidden="true">');
expect(report).toBeValid();
});
it("should report error when link is missing text", () => {
expect.assertions(2);
const report = htmlvalidate.validateString("<a></a>");
......
import { DOMReadyEvent } from "../../event";
import { Rule, RuleDocumentation, ruleDocumentationUrl } from "../../rule";
import { hasAltText, hasAriaLabel } from "../helper";
import { inAccessibilityTree } from "../helper/a17y";
import { classifyNodeText, TextClassification } from "../helper/text";
export default class H30 extends Rule {
......@@ -16,6 +17,11 @@ export default class H30 extends Rule {
this.on("dom:ready", (event: DOMReadyEvent) => {
const links = event.document.getElementsByTagName("a");
for (const link of links) {
/* ignore links with aria-hidden="true" */
if (!inAccessibilityTree(link)) {
continue;
}
/* check if text content is present (or dynamic) */
const textClassification = classifyNodeText(link);
if (textClassification !== TextClassification.EMPTY_TEXT) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment