@flint.fyi/jsx 0.0.0

package/lib/rules/roleSupportedAriaProps.js

@@ -0,0 +1,420 @@
+import { ruleCreator } from "./ruleCreator.js";
+import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
+import { SyntaxKind } from "typescript";
+
+//#region src/rules/roleSupportedAriaProps.ts
+const globalAriaProperties = new Set([
+	"aria-atomic",
+	"aria-busy",
+	"aria-controls",
+	"aria-current",
+	"aria-describedby",
+	"aria-details",
+	"aria-disabled",
+	"aria-dropeffect",
+	"aria-errormessage",
+	"aria-flowto",
+	"aria-grabbed",
+	"aria-haspopup",
+	"aria-hidden",
+	"aria-invalid",
+	"aria-keyshortcuts",
+	"aria-label",
+	"aria-labelledby",
+	"aria-live",
+	"aria-owns",
+	"aria-relevant",
+	"aria-roledescription"
+]);
+const roleToSupportedProps = {
+	alert: new Set(["aria-expanded"]),
+	alertdialog: new Set(["aria-expanded", "aria-modal"]),
+	application: new Set(["aria-activedescendant", "aria-expanded"]),
+	article: new Set([
+		"aria-expanded",
+		"aria-posinset",
+		"aria-setsize"
+	]),
+	banner: new Set(["aria-expanded"]),
+	button: new Set(["aria-expanded", "aria-pressed"]),
+	cell: new Set([
+		"aria-colindex",
+		"aria-colspan",
+		"aria-expanded",
+		"aria-rowindex",
+		"aria-rowspan"
+	]),
+	checkbox: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required"
+	]),
+	columnheader: new Set([
+		"aria-colindex",
+		"aria-colspan",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required",
+		"aria-rowindex",
+		"aria-rowspan",
+		"aria-selected",
+		"aria-sort"
+	]),
+	combobox: new Set([
+		"aria-activedescendant",
+		"aria-autocomplete",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required"
+	]),
+	command: new Set(["aria-expanded"]),
+	complementary: new Set(["aria-expanded"]),
+	composite: new Set(["aria-activedescendant", "aria-expanded"]),
+	contentinfo: new Set(["aria-expanded"]),
+	definition: new Set(["aria-expanded"]),
+	dialog: new Set(["aria-expanded", "aria-modal"]),
+	directory: new Set(["aria-expanded"]),
+	document: new Set(["aria-expanded"]),
+	feed: new Set(["aria-expanded"]),
+	figure: new Set(["aria-expanded"]),
+	form: new Set(["aria-expanded"]),
+	grid: new Set([
+		"aria-activedescendant",
+		"aria-colcount",
+		"aria-expanded",
+		"aria-level",
+		"aria-multiselectable",
+		"aria-readonly",
+		"aria-rowcount"
+	]),
+	gridcell: new Set([
+		"aria-colindex",
+		"aria-colspan",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required",
+		"aria-rowindex",
+		"aria-rowspan",
+		"aria-selected"
+	]),
+	group: new Set(["aria-activedescendant", "aria-expanded"]),
+	heading: new Set(["aria-expanded", "aria-level"]),
+	img: new Set(["aria-expanded"]),
+	input: new Set(["aria-expanded"]),
+	landmark: new Set(["aria-expanded"]),
+	link: new Set(["aria-expanded"]),
+	list: new Set(["aria-expanded"]),
+	listbox: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-multiselectable",
+		"aria-orientation",
+		"aria-readonly",
+		"aria-required"
+	]),
+	listitem: new Set([
+		"aria-expanded",
+		"aria-level",
+		"aria-posinset",
+		"aria-setsize"
+	]),
+	log: new Set(["aria-expanded"]),
+	main: new Set(["aria-expanded"]),
+	marquee: new Set(["aria-expanded"]),
+	math: new Set(["aria-expanded"]),
+	menu: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-orientation"
+	]),
+	menubar: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-orientation"
+	]),
+	menuitem: new Set([
+		"aria-expanded",
+		"aria-posinset",
+		"aria-setsize"
+	]),
+	menuitemcheckbox: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-posinset",
+		"aria-readonly",
+		"aria-setsize"
+	]),
+	menuitemradio: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-posinset",
+		"aria-readonly",
+		"aria-setsize"
+	]),
+	navigation: new Set(["aria-expanded"]),
+	none: /* @__PURE__ */ new Set([]),
+	note: new Set(["aria-expanded"]),
+	option: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-posinset",
+		"aria-selected",
+		"aria-setsize"
+	]),
+	presentation: /* @__PURE__ */ new Set([]),
+	progressbar: new Set([
+		"aria-expanded",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"aria-valuetext"
+	]),
+	radio: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-posinset",
+		"aria-readonly",
+		"aria-setsize"
+	]),
+	radiogroup: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-orientation",
+		"aria-readonly",
+		"aria-required"
+	]),
+	range: new Set([
+		"aria-expanded",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"aria-valuetext"
+	]),
+	region: new Set(["aria-expanded"]),
+	roletype: new Set(["aria-expanded"]),
+	row: new Set([
+		"aria-activedescendant",
+		"aria-colindex",
+		"aria-expanded",
+		"aria-level",
+		"aria-rowindex",
+		"aria-selected"
+	]),
+	rowgroup: new Set(["aria-activedescendant", "aria-expanded"]),
+	rowheader: new Set([
+		"aria-colindex",
+		"aria-colspan",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required",
+		"aria-rowindex",
+		"aria-rowspan",
+		"aria-selected",
+		"aria-sort"
+	]),
+	scrollbar: new Set([
+		"aria-controls",
+		"aria-expanded",
+		"aria-orientation",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"aria-valuetext"
+	]),
+	search: new Set(["aria-expanded"]),
+	searchbox: new Set([
+		"aria-activedescendant",
+		"aria-autocomplete",
+		"aria-expanded",
+		"aria-multiline",
+		"aria-placeholder",
+		"aria-readonly",
+		"aria-required"
+	]),
+	section: new Set(["aria-expanded"]),
+	sectionhead: new Set(["aria-expanded"]),
+	select: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-orientation"
+	]),
+	separator: new Set([
+		"aria-expanded",
+		"aria-orientation",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"aria-valuetext"
+	]),
+	slider: new Set([
+		"aria-expanded",
+		"aria-orientation",
+		"aria-readonly",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"aria-valuetext"
+	]),
+	spinbutton: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required",
+		"aria-valuemax",
+		"aria-valuemin",
+		"aria-valuenow",
+		"aria-valuetext"
+	]),
+	status: new Set(["aria-expanded"]),
+	structure: new Set(["aria-expanded"]),
+	switch: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-readonly",
+		"aria-required"
+	]),
+	tab: new Set([
+		"aria-expanded",
+		"aria-posinset",
+		"aria-selected",
+		"aria-setsize"
+	]),
+	table: new Set([
+		"aria-colcount",
+		"aria-expanded",
+		"aria-level",
+		"aria-multiselectable",
+		"aria-rowcount"
+	]),
+	tablist: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-level",
+		"aria-multiselectable",
+		"aria-orientation"
+	]),
+	tabpanel: new Set(["aria-expanded"]),
+	term: new Set(["aria-expanded"]),
+	textbox: new Set([
+		"aria-activedescendant",
+		"aria-autocomplete",
+		"aria-expanded",
+		"aria-multiline",
+		"aria-placeholder",
+		"aria-readonly",
+		"aria-required"
+	]),
+	timer: new Set(["aria-expanded"]),
+	toolbar: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-orientation"
+	]),
+	tooltip: new Set(["aria-expanded"]),
+	tree: new Set([
+		"aria-activedescendant",
+		"aria-expanded",
+		"aria-multiselectable",
+		"aria-orientation",
+		"aria-required"
+	]),
+	treegrid: new Set([
+		"aria-activedescendant",
+		"aria-colcount",
+		"aria-expanded",
+		"aria-level",
+		"aria-multiselectable",
+		"aria-orientation",
+		"aria-readonly",
+		"aria-required",
+		"aria-rowcount"
+	]),
+	treeitem: new Set([
+		"aria-checked",
+		"aria-expanded",
+		"aria-level",
+		"aria-posinset",
+		"aria-selected",
+		"aria-setsize"
+	]),
+	widget: new Set(["aria-expanded"]),
+	window: new Set(["aria-expanded", "aria-modal"])
+};
+const implicitRoles = {
+	a: "link",
+	article: "article",
+	aside: "complementary",
+	button: "button",
+	dialog: "dialog",
+	footer: "contentinfo",
+	form: "form",
+	h1: "heading",
+	h2: "heading",
+	h3: "heading",
+	h4: "heading",
+	h5: "heading",
+	h6: "heading",
+	header: "banner",
+	hr: "separator",
+	img: "img",
+	input: "textbox",
+	li: "listitem",
+	main: "main",
+	nav: "navigation",
+	ol: "list",
+	section: "region",
+	select: "listbox",
+	textarea: "textbox",
+	ul: "list"
+};
+function getSupportedPropsForRole(role) {
+	return new Set([...roleToSupportedProps[role] ?? [], ...globalAriaProperties]);
+}
+var roleSupportedAriaProps_default = ruleCreator.createRule(typescriptLanguage, {
+	about: {
+		description: "Reports ARIA properties that are not supported by an element's role.",
+		id: "roleSupportedAriaProps",
+		presets: ["logical"]
+	},
+	messages: { unsupportedProp: {
+		primary: "The `{{ prop }}` ARIA property is not supported by the `{{ role }}` role.",
+		secondary: [
+			"Elements with ARIA roles should only use ARIA properties that are supported by that role.",
+			"Using unsupported ARIA properties can confuse assistive technologies.",
+			"This is required for WCAG 4.1.2 compliance."
+		],
+		suggestions: ["Remove the unsupported ARIA property or change the element's role."]
+	} },
+	setup(context) {
+		function checkElement(node, { sourceFile }) {
+			if (node.tagName.kind !== SyntaxKind.Identifier) return;
+			const elementName = node.tagName.text.toLowerCase();
+			const roleProperty = node.attributes.properties.find((property) => property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier && property.name.text === "role");
+			const role = roleProperty && roleProperty.kind === SyntaxKind.JsxAttribute && roleProperty.initializer && roleProperty.initializer.kind === SyntaxKind.StringLiteral ? roleProperty.initializer.text.toLowerCase() : implicitRoles[elementName];
+			if (!role) return;
+			const supportedProps = getSupportedPropsForRole(role);
+			for (const property of node.attributes.properties) {
+				if (property.kind !== SyntaxKind.JsxAttribute || property.name.kind !== SyntaxKind.Identifier) continue;
+				const propertyName = property.name.text.toLowerCase();
+				if (!propertyName.startsWith("aria-") || supportedProps.has(propertyName)) continue;
+				context.report({
+					data: {
+						prop: propertyName,
+						role
+					},
+					message: "unsupportedProp",
+					range: getTSNodeRange(property.name, sourceFile)
+				});
+			}
+		}
+		return { visitors: {
+			JsxOpeningElement: checkElement,
+			JsxSelfClosingElement: checkElement
+		} };
+	}
+});
+
+//#endregion
+export { roleSupportedAriaProps_default as default };
+//# sourceMappingURL=roleSupportedAriaProps.js.map

package/lib/rules/roleTags.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@flint.fyi/core").Rule<import("@flint.fyi/core").RuleAboutWithPresetsAndUrl<"logical" | "logicalStrict" | "stylistic">, object, object, "preferSemanticElement", import("@flint.fyi/core").AnyOptionalSchema>;
+export default _default;
+//# sourceMappingURL=roleTags.d.ts.map

package/lib/rules/roleTags.js

@@ -0,0 +1,73 @@
+import { ruleCreator } from "./ruleCreator.js";
+import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
+import { SyntaxKind } from "typescript";
+
+//#region src/rules/roleTags.ts
+const roleToElement = {
+	article: "article",
+	banner: "header",
+	button: "button",
+	checkbox: "input[type='checkbox']",
+	complementary: "aside",
+	contentinfo: "footer",
+	definition: "dd",
+	dialog: "dialog",
+	figure: "figure",
+	form: "form",
+	heading: "h1-h6",
+	img: "img",
+	link: "a",
+	list: "ul/ol",
+	listitem: "li",
+	main: "main",
+	navigation: "nav",
+	radio: "input[type='radio']",
+	region: "section",
+	row: "tr",
+	rowgroup: "tbody/tfoot/thead",
+	table: "table",
+	term: "dt",
+	textbox: "input[type='text']/textarea"
+};
+var roleTags_default = ruleCreator.createRule(typescriptLanguage, {
+	about: {
+		description: "Reports ARIA roles that have semantic HTML element equivalents.",
+		id: "roleTags",
+		presets: ["logical", "logicalStrict"]
+	},
+	messages: { preferSemanticElement: {
+		primary: "<{{ currentElement }}> with role='{{ role }}' is a less-accessible equivalent to <{{ semanticElement }}>.",
+		secondary: [
+			"Semantic HTML elements have built-in accessibility features.",
+			"Using native elements is more maintainable than ARIA roles.",
+			"Browsers provide better default behavior for semantic elements."
+		],
+		suggestions: ["Replace with the semantic HTML element"]
+	} },
+	setup(context) {
+		function checkRole(node, { sourceFile }) {
+			if (node.tagName.kind !== SyntaxKind.Identifier || node.tagName.text.toLowerCase() !== node.tagName.text) return;
+			const roleProperty = node.attributes.properties.find((property) => property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier && property.name.text === "role");
+			if (!roleProperty || roleProperty.kind !== SyntaxKind.JsxAttribute || !roleProperty.initializer || roleProperty.initializer.kind !== SyntaxKind.StringLiteral) return;
+			const role = roleProperty.initializer.text;
+			const semanticElement = roleToElement[role];
+			if (semanticElement) context.report({
+				data: {
+					currentElement: node.tagName.text,
+					role,
+					semanticElement
+				},
+				message: "preferSemanticElement",
+				range: getTSNodeRange(roleProperty, sourceFile)
+			});
+		}
+		return { visitors: {
+			JsxOpeningElement: checkRole,
+			JsxSelfClosingElement: checkRole
+		} };
+	}
+});
+
+//#endregion
+export { roleTags_default as default };
+//# sourceMappingURL=roleTags.js.map

package/lib/rules/ruleCreator.d.ts

@@ -0,0 +1,3 @@
+import { RuleCreator } from "@flint.fyi/core";
+export declare const ruleCreator: RuleCreator<"logical" | "logicalStrict" | "stylistic">;
+//# sourceMappingURL=ruleCreator.d.ts.map

package/lib/rules/ruleCreator.js

@@ -0,0 +1,16 @@
+import { RuleCreator } from "@flint.fyi/core";
+
+//#region src/rules/ruleCreator.ts
+const ruleCreator = new RuleCreator({
+	docs: (ruleId) => `https://flint.fyi/rules/jsx/${ruleId.toLowerCase()}`,
+	pluginId: "jsx",
+	presets: [
+		"logical",
+		"logicalStrict",
+		"stylistic"
+	]
+});
+
+//#endregion
+export { ruleCreator };
+//# sourceMappingURL=ruleCreator.js.map

package/lib/rules/scopeProps.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@flint.fyi/core").Rule<import("@flint.fyi/core").RuleAboutWithPresetsAndUrl<"logical" | "logicalStrict" | "stylistic">, object, object, "invalidScope", import("@flint.fyi/core").AnyOptionalSchema>;
+export default _default;
+//# sourceMappingURL=scopeProps.d.ts.map

package/lib/rules/scopeProps.js

@@ -0,0 +1,42 @@
+import { ruleCreator } from "./ruleCreator.js";
+import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
+import { SyntaxKind } from "typescript";
+
+//#region src/rules/scopeProps.ts
+var scopeProps_default = ruleCreator.createRule(typescriptLanguage, {
+	about: {
+		description: "Reports scope props on non-th elements.",
+		id: "scopeProps",
+		presets: ["logical"]
+	},
+	messages: { invalidScope: {
+		primary: "The `scope` prop only has an effect on <th> elements.",
+		secondary: [
+			"The scope attribute defines whether a table header is a column header or row header.",
+			"Using it on non-<th> elements has no semantic meaning and may confuse assistive technologies.",
+			"This is required for WCAG 1.3.1 and 4.1.1 compliance."
+		],
+		suggestions: ["Remove the scope prop from this element", "Change this element to a <th> element if it's a table header"]
+	} },
+	setup(context) {
+		function checkElement(node, { sourceFile }) {
+			if (node.tagName.kind !== SyntaxKind.Identifier || node.tagName.text.toLowerCase() === "th") return;
+			const scopeProperty = node.attributes.properties.find((property) => {
+				return property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier && property.name.text.toLowerCase() === "scope";
+			});
+			if (!scopeProperty) return;
+			context.report({
+				message: "invalidScope",
+				range: getTSNodeRange(scopeProperty, sourceFile)
+			});
+		}
+		return { visitors: {
+			JsxOpeningElement: checkElement,
+			JsxSelfClosingElement: checkElement
+		} };
+	}
+});
+
+//#endregion
+export { scopeProps_default as default };
+//# sourceMappingURL=scopeProps.js.map

package/lib/rules/staticElementInteractions.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@flint.fyi/core").Rule<import("@flint.fyi/core").RuleAboutWithPresetsAndUrl<"logical" | "logicalStrict" | "stylistic">, object, object, "missingRole", import("@flint.fyi/core").AnyOptionalSchema>;
+export default _default;
+//# sourceMappingURL=staticElementInteractions.d.ts.map

package/lib/rules/staticElementInteractions.js

@@ -0,0 +1,61 @@
+import { ruleCreator } from "./ruleCreator.js";
+import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
+import { SyntaxKind } from "typescript";
+
+//#region src/rules/staticElementInteractions.ts
+const interactiveHandlers = [
+	"onClick",
+	"onKeyDown",
+	"onKeyPress",
+	"onKeyUp",
+	"onMouseDown",
+	"onMouseUp"
+];
+const interactiveElements = new Set([
+	"a",
+	"button",
+	"input",
+	"select",
+	"textarea"
+]);
+var staticElementInteractions_default = ruleCreator.createRule(typescriptLanguage, {
+	about: {
+		description: "Reports static elements with event handlers that lack ARIA roles.",
+		id: "staticElementInteractions",
+		presets: ["logical"]
+	},
+	messages: { missingRole: {
+		primary: "This static element that handles events is missing a role attribute.",
+		secondary: [
+			"Static HTML elements like <div> and <span> have no semantic meaning.",
+			"Interactive handlers require a role to convey purpose to assistive technology and search engine crawlers.",
+			"Required for WCAG 4.1.2 compliance."
+		],
+		suggestions: ["Add a role attribute (e.g. `role='button'`)", "Use a semantic HTML element instead (e.g. `<button>`)"]
+	} },
+	setup(context) {
+		function checkElement(node, { sourceFile }) {
+			if (node.tagName.kind !== SyntaxKind.Identifier || node.tagName.text.toLowerCase() !== node.tagName.text) return;
+			const elementName = node.tagName.text.toLowerCase();
+			if (interactiveElements.has(elementName)) return;
+			let hadInteractiveHandler = false;
+			for (const property of node.attributes.properties) if (property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier) {
+				if (property.name.text === "role") return;
+				if (interactiveHandlers.includes(property.name.text)) hadInteractiveHandler = true;
+			}
+			if (!hadInteractiveHandler) return;
+			context.report({
+				message: "missingRole",
+				range: getTSNodeRange(node.tagName, sourceFile)
+			});
+		}
+		return { visitors: {
+			JsxOpeningElement: checkElement,
+			JsxSelfClosingElement: checkElement
+		} };
+	}
+});
+
+//#endregion
+export { staticElementInteractions_default as default };
+//# sourceMappingURL=staticElementInteractions.js.map

package/lib/rules/svgTitles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@flint.fyi/core").Rule<import("@flint.fyi/core").RuleAboutWithPresetsAndUrl<"logical" | "logicalStrict" | "stylistic">, object, object, "missingTitle", import("@flint.fyi/core").AnyOptionalSchema>;
+export default _default;
+//# sourceMappingURL=svgTitles.d.ts.map