Commit 2843680d authored by David Sveningsson's avatar David Sveningsson
Browse files

feat(rules): `no-missing-references` handles more aria attributes

parent 2afcd86c
Pipeline #365089860 passed with stages
in 11 minutes and 52 seconds
......@@ -14,9 +14,14 @@ Checked attributes:
- `label[for]`
- `input[list]`
- `*[aria-activedescendant]`
- `*[aria-controls]`
- `*[aria-describedby]`
- `*[aria-details]`
- `*[aria-errormessage]`
- `*[aria-flowto]`
- `*[aria-labelledby]`
- `*[aria-owns]`
## Rule details
......
......@@ -76,6 +76,16 @@ describe("rule no-missing-references", () => {
expect(report).toHaveError("no-missing-references", 'Element references missing id "missing"');
});
it('should report error when <ANY aria-activedescendant=".."> is referencing missing element', () => {
expect.assertions(2);
const markup = '<div aria-activedescendant="missing id"></div>';
const report = htmlvalidate.validateString(markup);
expect(report).toBeInvalid();
expect(report).toHaveErrors([
{ ruleId: "no-missing-references", message: 'Element references missing id "missing id"' },
]);
});
it('should report error when <ANY aria-labelledby=".."> is referencing missing element', () => {
expect.assertions(2);
const report = htmlvalidate.validateString('<div aria-labelledby="missing id"></div>');
......@@ -106,6 +116,48 @@ describe("rule no-missing-references", () => {
]);
});
it('should report error when <ANY aria-details=".."> is referencing missing element', () => {
expect.assertions(2);
const markup = '<div aria-details="missing id"></div>';
const report = htmlvalidate.validateString(markup);
expect(report).toBeInvalid();
expect(report).toHaveErrors([
{ ruleId: "no-missing-references", message: 'Element references missing id "missing id"' },
]);
});
it('should report error when <ANY aria-errormessage=".."> is referencing missing element', () => {
expect.assertions(2);
const markup = '<div aria-errormessage="missing id"></div>';
const report = htmlvalidate.validateString(markup);
expect(report).toBeInvalid();
expect(report).toHaveErrors([
{ ruleId: "no-missing-references", message: 'Element references missing id "missing id"' },
]);
});
it('should report error when <ANY aria-flowto=".."> is referencing missing element', () => {
expect.assertions(2);
const markup = '<div aria-flowto="foo bar baz"></div><span id="bar"></span>';
const report = htmlvalidate.validateString(markup);
expect(report).toBeInvalid();
expect(report).toHaveErrors([
{ ruleId: "no-missing-references", message: 'Element references missing id "foo"' },
{ ruleId: "no-missing-references", message: 'Element references missing id "baz"' },
]);
});
it('should report error when <ANY aria-owns=".."> is referencing missing element', () => {
expect.assertions(2);
const markup = '<div aria-owns="foo bar baz"></div><span id="bar"></span>';
const report = htmlvalidate.validateString(markup);
expect(report).toBeInvalid();
expect(report).toHaveErrors([
{ ruleId: "no-missing-references", message: 'Element references missing id "foo"' },
{ ruleId: "no-missing-references", message: 'Element references missing id "baz"' },
]);
});
it("should contain documentation", () => {
expect.assertions(1);
htmlvalidate = new HtmlValidate({
......
......@@ -13,9 +13,14 @@ interface AriaAttribute {
}
const ARIA: AriaAttribute[] = [
{ property: "aria-activedescendant", isList: false },
{ property: "aria-controls", isList: true },
{ property: "aria-describedby", isList: true },
{ property: "aria-details", isList: false },
{ property: "aria-errormessage", isList: false },
{ property: "aria-flowto", isList: true },
{ property: "aria-labelledby", isList: true },
{ property: "aria-owns", isList: true },
];
function idMissing(document: DOMTree, id: string): boolean {
......
Supports Markdown
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