svg-focusable.ts 860 Bytes
Newer Older
1 2 3 4
import { HtmlElement } from "../dom";
import { ElementReadyEvent } from "../event";
import { Rule, RuleDocumentation, ruleDocumentationUrl } from "../rule";

5
export default class SvgFocusable extends Rule {
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
	public documentation(): RuleDocumentation {
		return {
			description: `Inline SVG elements in IE are focusable by default which may cause issues with tab-ordering. The \`focusable\` attribute should explicitly be set to avoid unintended behaviour.`,
			url: ruleDocumentationUrl(__filename),
		};
	}

	public setup(): void {
		this.on("element:ready", (event: ElementReadyEvent) => {
			if (event.target.is("svg")) {
				this.validate(event.target);
			}
		});
	}

	private validate(svg: HtmlElement): void {
		if (svg.hasAttribute("focusable")) {
			return;
		}

26
		this.report(svg, `<${svg.tagName}> is missing required "focusable" attribute`);
27 28
	}
}