Commit e00e1ed3 authored by David Sveningsson's avatar David Sveningsson
Browse files

fix(rules): wcag/h32 support custom form elements

parent eb3c5934

src/rules/wcag/h32.spec.ts

+17 −0
Original line number Diff line number Diff line
@@ -6,6 +6,14 @@ describe("wcag/h32", () => { 


	beforeAll(() => {

		htmlvalidate = new HtmlValidate({

			elements: [

				"html5",

				{

					"my-form": {

						form: true,

					},

				},

			],

			rules: { "wcag/h32": "error" },

		});

	});
@@ -44,6 +52,15 @@ describe("wcag/h32", () => { 
		);

	});



	it("should support custom elements", () => {

		const report = htmlvalidate.validateString("<my-form></my-form>");

		expect(report).toBeInvalid();

		expect(report).toHaveError(

			"WCAG/H32",

			"<my-form> element must have a submit button"

		);

	});



	it("smoketest", () => {

		const report = htmlvalidate.validateFile("test-files/rules/wcag/h32.html");

		expect(report.results).toMatchSnapshot();

src/rules/wcag/h32.ts

+11 −2
Original line number Diff line number Diff line
@@ -17,8 +17,14 @@ class H32 extends Rule { 
	}



	public setup(): void {

		/* query all tags with form property, normally this is only the <form> tag

		 * but with custom element metadata other tags might be considered form

		 * (usually a component wrapping a <form> element) */

		const formTags = this.getTagsWithProperty("form");

		const formSelector = formTags.join(",");



		this.on("dom:ready", (event: DOMReadyEvent) => {

			const forms = event.document.getElementsByTagName("form");

			const forms = event.document.querySelectorAll(formSelector);

			forms.forEach((node: HtmlElement) => {

				/* find submit buttons */

				for (const button of node.querySelectorAll("button,input")) {
@@ -28,7 +34,10 @@ class H32 extends Rule { 
					}

				}



				this.report(node, "<form> element must have a submit button");

				this.report(

					node,

					`<${node.tagName}> element must have a submit button`

				);

			});

		});

	}