Commit 9e9805dc authored by David Sveningsson's avatar David Sveningsson

feat(rules): check references from `aria-controls`

parent 9a6753c8
Pipeline #110182802 passed with stages
in 10 minutes and 24 seconds
......@@ -13,8 +13,9 @@ current document.
Checked attributes:
- `for`
- `aria-labelledby`
- `aria-controls`
- `aria-describedby`
- `aria-labelledby`
## Rule details
......
......@@ -31,6 +31,13 @@ describe("rule no-missing-references", () => {
expect(report).toBeValid();
});
it('should not report error when <ANY aria-controls=".."> is referencing existing element', () => {
const report = htmlvalidate.validateString(
'<div aria-controls="existing"></div><span id="existing"></span>'
);
expect(report).toBeValid();
});
it("should not report error when reference is empty string", () => {
const report = htmlvalidate.validateString('<label for=""></label>');
expect(report).toBeValid();
......@@ -67,6 +74,17 @@ describe("rule no-missing-references", () => {
);
});
it('should report error when <ANY aria-controls=".."> is referencing missing element', () => {
const report = htmlvalidate.validateString(
'<div aria-controls="missing"></div>'
);
expect(report).toBeInvalid();
expect(report).toHaveError(
"no-missing-references",
'Element references missing id "missing"'
);
});
it("should contain documentation", () => {
htmlvalidate = new HtmlValidate({
rules: { "no-missing-references": "error" },
......
......@@ -7,6 +7,8 @@ interface Context {
value: string;
}
const ARIA = ["aria-controls", "aria-describedby", "aria-labelledby"];
class NoMissingReferences extends Rule<Context> {
public documentation(context: Context): RuleDocumentation {
if (context) {
......@@ -32,16 +34,12 @@ class NoMissingReferences extends Rule<Context> {
this.validateReference(document, node, attr);
}
/* verify <ANY aria-labelledby=".."> */
for (const node of document.querySelectorAll("[aria-labelledby]")) {
const attr = node.getAttribute("aria-labelledby");
this.validateReference(document, node, attr);
}
/* verify <ANY aria-describedby=".."> */
for (const node of document.querySelectorAll("[aria-describedby]")) {
const attr = node.getAttribute("aria-describedby");
this.validateReference(document, node, attr);
/* verify WAI-ARIA properties */
for (const property of ARIA) {
for (const node of document.querySelectorAll(`[${property}]`)) {
const attr = node.getAttribute(property);
this.validateReference(document, node, attr);
}
}
});
}
......
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