@flint.fyi/jsx 0.4.0 → 0.6.0

package/lib/rules/roleSupportedAriaProps.js

@@ -1,417 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/roleSupportedAriaProps.ts
-const globalAriaProperties = /* @__PURE__ */ 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: /* @__PURE__ */ new Set(["aria-expanded"]),
-	alertdialog: /* @__PURE__ */ new Set(["aria-expanded", "aria-modal"]),
-	application: /* @__PURE__ */ new Set(["aria-activedescendant", "aria-expanded"]),
-	article: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-posinset",
-		"aria-setsize"
-	]),
-	banner: /* @__PURE__ */ new Set(["aria-expanded"]),
-	button: /* @__PURE__ */ new Set(["aria-expanded", "aria-pressed"]),
-	cell: /* @__PURE__ */ new Set([
-		"aria-colindex",
-		"aria-colspan",
-		"aria-expanded",
-		"aria-rowindex",
-		"aria-rowspan"
-	]),
-	checkbox: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required"
-	]),
-	columnheader: /* @__PURE__ */ new Set([
-		"aria-colindex",
-		"aria-colspan",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required",
-		"aria-rowindex",
-		"aria-rowspan",
-		"aria-selected",
-		"aria-sort"
-	]),
-	combobox: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-autocomplete",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required"
-	]),
-	command: /* @__PURE__ */ new Set(["aria-expanded"]),
-	complementary: /* @__PURE__ */ new Set(["aria-expanded"]),
-	composite: /* @__PURE__ */ new Set(["aria-activedescendant", "aria-expanded"]),
-	contentinfo: /* @__PURE__ */ new Set(["aria-expanded"]),
-	definition: /* @__PURE__ */ new Set(["aria-expanded"]),
-	dialog: /* @__PURE__ */ new Set(["aria-expanded", "aria-modal"]),
-	directory: /* @__PURE__ */ new Set(["aria-expanded"]),
-	document: /* @__PURE__ */ new Set(["aria-expanded"]),
-	feed: /* @__PURE__ */ new Set(["aria-expanded"]),
-	figure: /* @__PURE__ */ new Set(["aria-expanded"]),
-	form: /* @__PURE__ */ new Set(["aria-expanded"]),
-	grid: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-colcount",
-		"aria-expanded",
-		"aria-level",
-		"aria-multiselectable",
-		"aria-readonly",
-		"aria-rowcount"
-	]),
-	gridcell: /* @__PURE__ */ new Set([
-		"aria-colindex",
-		"aria-colspan",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required",
-		"aria-rowindex",
-		"aria-rowspan",
-		"aria-selected"
-	]),
-	group: /* @__PURE__ */ new Set(["aria-activedescendant", "aria-expanded"]),
-	heading: /* @__PURE__ */ new Set(["aria-expanded", "aria-level"]),
-	img: /* @__PURE__ */ new Set(["aria-expanded"]),
-	input: /* @__PURE__ */ new Set(["aria-expanded"]),
-	landmark: /* @__PURE__ */ new Set(["aria-expanded"]),
-	link: /* @__PURE__ */ new Set(["aria-expanded"]),
-	list: /* @__PURE__ */ new Set(["aria-expanded"]),
-	listbox: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-multiselectable",
-		"aria-orientation",
-		"aria-readonly",
-		"aria-required"
-	]),
-	listitem: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-level",
-		"aria-posinset",
-		"aria-setsize"
-	]),
-	log: /* @__PURE__ */ new Set(["aria-expanded"]),
-	main: /* @__PURE__ */ new Set(["aria-expanded"]),
-	marquee: /* @__PURE__ */ new Set(["aria-expanded"]),
-	math: /* @__PURE__ */ new Set(["aria-expanded"]),
-	menu: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-orientation"
-	]),
-	menubar: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-orientation"
-	]),
-	menuitem: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-posinset",
-		"aria-setsize"
-	]),
-	menuitemcheckbox: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-posinset",
-		"aria-readonly",
-		"aria-setsize"
-	]),
-	menuitemradio: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-posinset",
-		"aria-readonly",
-		"aria-setsize"
-	]),
-	navigation: /* @__PURE__ */ new Set(["aria-expanded"]),
-	none: /* @__PURE__ */ new Set([]),
-	note: /* @__PURE__ */ new Set(["aria-expanded"]),
-	option: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-posinset",
-		"aria-selected",
-		"aria-setsize"
-	]),
-	presentation: /* @__PURE__ */ new Set([]),
-	progressbar: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-valuemax",
-		"aria-valuemin",
-		"aria-valuenow",
-		"aria-valuetext"
-	]),
-	radio: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-posinset",
-		"aria-readonly",
-		"aria-setsize"
-	]),
-	radiogroup: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-orientation",
-		"aria-readonly",
-		"aria-required"
-	]),
-	range: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-valuemax",
-		"aria-valuemin",
-		"aria-valuenow",
-		"aria-valuetext"
-	]),
-	region: /* @__PURE__ */ new Set(["aria-expanded"]),
-	roletype: /* @__PURE__ */ new Set(["aria-expanded"]),
-	row: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-colindex",
-		"aria-expanded",
-		"aria-level",
-		"aria-rowindex",
-		"aria-selected"
-	]),
-	rowgroup: /* @__PURE__ */ new Set(["aria-activedescendant", "aria-expanded"]),
-	rowheader: /* @__PURE__ */ new Set([
-		"aria-colindex",
-		"aria-colspan",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required",
-		"aria-rowindex",
-		"aria-rowspan",
-		"aria-selected",
-		"aria-sort"
-	]),
-	scrollbar: /* @__PURE__ */ new Set([
-		"aria-controls",
-		"aria-expanded",
-		"aria-orientation",
-		"aria-valuemax",
-		"aria-valuemin",
-		"aria-valuenow",
-		"aria-valuetext"
-	]),
-	search: /* @__PURE__ */ new Set(["aria-expanded"]),
-	searchbox: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-autocomplete",
-		"aria-expanded",
-		"aria-multiline",
-		"aria-placeholder",
-		"aria-readonly",
-		"aria-required"
-	]),
-	section: /* @__PURE__ */ new Set(["aria-expanded"]),
-	sectionhead: /* @__PURE__ */ new Set(["aria-expanded"]),
-	select: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-orientation"
-	]),
-	separator: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-orientation",
-		"aria-valuemax",
-		"aria-valuemin",
-		"aria-valuenow",
-		"aria-valuetext"
-	]),
-	slider: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-orientation",
-		"aria-readonly",
-		"aria-valuemax",
-		"aria-valuemin",
-		"aria-valuenow",
-		"aria-valuetext"
-	]),
-	spinbutton: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required",
-		"aria-valuemax",
-		"aria-valuemin",
-		"aria-valuenow",
-		"aria-valuetext"
-	]),
-	status: /* @__PURE__ */ new Set(["aria-expanded"]),
-	structure: /* @__PURE__ */ new Set(["aria-expanded"]),
-	switch: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-readonly",
-		"aria-required"
-	]),
-	tab: /* @__PURE__ */ new Set([
-		"aria-expanded",
-		"aria-posinset",
-		"aria-selected",
-		"aria-setsize"
-	]),
-	table: /* @__PURE__ */ new Set([
-		"aria-colcount",
-		"aria-expanded",
-		"aria-level",
-		"aria-multiselectable",
-		"aria-rowcount"
-	]),
-	tablist: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-level",
-		"aria-multiselectable",
-		"aria-orientation"
-	]),
-	tabpanel: /* @__PURE__ */ new Set(["aria-expanded"]),
-	term: /* @__PURE__ */ new Set(["aria-expanded"]),
-	textbox: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-autocomplete",
-		"aria-expanded",
-		"aria-multiline",
-		"aria-placeholder",
-		"aria-readonly",
-		"aria-required"
-	]),
-	timer: /* @__PURE__ */ new Set(["aria-expanded"]),
-	toolbar: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-orientation"
-	]),
-	tooltip: /* @__PURE__ */ new Set(["aria-expanded"]),
-	tree: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-expanded",
-		"aria-multiselectable",
-		"aria-orientation",
-		"aria-required"
-	]),
-	treegrid: /* @__PURE__ */ new Set([
-		"aria-activedescendant",
-		"aria-colcount",
-		"aria-expanded",
-		"aria-level",
-		"aria-multiselectable",
-		"aria-orientation",
-		"aria-readonly",
-		"aria-required",
-		"aria-rowcount"
-	]),
-	treeitem: /* @__PURE__ */ new Set([
-		"aria-checked",
-		"aria-expanded",
-		"aria-level",
-		"aria-posinset",
-		"aria-selected",
-		"aria-setsize"
-	]),
-	widget: /* @__PURE__ */ new Set(["aria-expanded"]),
-	window: /* @__PURE__ */ 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 /* @__PURE__ */ 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", "logicalStrict"]
-	},
-	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?.kind === SyntaxKind.JsxAttribute && 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 };

package/lib/rules/roleTags.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports ARIA roles that have semantic HTML element equivalents.";
-    readonly id: "roleTags";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "preferSemanticElement", undefined>;
-export default _default;

package/lib/rules/roleTags.js

@@ -1,70 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#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?.kind !== SyntaxKind.JsxAttribute || 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 };

package/lib/rules/ruleCreator.d.ts

@@ -1,2 +0,0 @@
-import { RuleCreator } from "@flint.fyi/core";
-export declare const ruleCreator: RuleCreator<"logical" | "logicalStrict" | "stylistic", import("@flint.fyi/core").RuleAbout<"logical" | "logicalStrict" | "stylistic">>;

package/lib/rules/ruleCreator.js

@@ -1,13 +0,0 @@
-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 };

package/lib/rules/scopeProps.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports scope props on non-th elements.";
-    readonly id: "scopeProps";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "invalidScope", undefined>;
-export default _default;

package/lib/rules/scopeProps.js

@@ -1,39 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/scopeProps.ts
-var scopeProps_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Reports scope props on non-th elements.",
-		id: "scopeProps",
-		presets: ["logical", "logicalStrict"]
-	},
-	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 };

package/lib/rules/staticElementInteractions.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports static elements with event handlers that lack ARIA roles.";
-    readonly id: "staticElementInteractions";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "missingRole", undefined>;
-export default _default;

package/lib/rules/staticElementInteractions.js

@@ -1,58 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/staticElementInteractions.ts
-const interactiveHandlers = [
-	"onClick",
-	"onKeyDown",
-	"onKeyPress",
-	"onKeyUp",
-	"onMouseDown",
-	"onMouseUp"
-];
-const interactiveElements = /* @__PURE__ */ 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", "logicalStrict"]
-	},
-	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 };

package/lib/rules/svgTitles.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports <svg> elements without a <title> child element.";
-    readonly id: "svgTitles";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "missingTitle", undefined>;
-export default _default;