@flint.fyi/jsx 0.4.0 → 0.5.0

package/lib/rules/nonInteractiveElementInteractions.js

@@ -1,93 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/nonInteractiveElementInteractions.ts
-const interactiveHandlers = [
-	"onClick",
-	"onKeyDown",
-	"onKeyPress",
-	"onKeyUp",
-	"onMouseDown",
-	"onMouseUp"
-];
-const nonInteractiveElements = /* @__PURE__ */ new Set([
-	"area",
-	"article",
-	"aside",
-	"body",
-	"br",
-	"details",
-	"footer",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"header",
-	"hr",
-	"img",
-	"li",
-	"main",
-	"nav",
-	"ol",
-	"p",
-	"section",
-	"table",
-	"td",
-	"ul"
-]);
-const nonInteractiveRoles = /* @__PURE__ */ new Set([
-	"article",
-	"banner",
-	"complementary",
-	"img",
-	"listitem",
-	"main",
-	"navigation",
-	"region",
-	"tooltip"
-]);
-var nonInteractiveElementInteractions_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Reports non-interactive elements with interactive event handlers.",
-		id: "nonInteractiveElementInteractions",
-		presets: ["logical", "logicalStrict"]
-	},
-	messages: { invalidHandler: {
-		primary: "`<{{ element }}>` elements are non-interactive and so should not have interactive event handlers.",
-		secondary: [
-			"Non-interactive elements indicate content and containers in the user interface.",
-			"Use native interactive elements like <button> or <a> instead, or add an interactive role.",
-			"This is required for WCAG 4.1.2 compliance."
-		],
-		suggestions: [
-			"Use a native interactive element instead (e.g. <button>)",
-			"Add an interactive role attribute (e.g. role='button')",
-			"Move the handler to an inner element with an interactive role"
-		]
-	} },
-	setup(context) {
-		function checkElement(element, { sourceFile }) {
-			if (element.tagName.kind !== SyntaxKind.Identifier) return;
-			const elementName = element.tagName.text.toLowerCase();
-			if (elementName !== element.tagName.text || !nonInteractiveElements.has(elementName)) return;
-			let hasInteractiveHandler = false;
-			for (const property of element.attributes.properties) if (property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier) {
-				if (property.name.text === "role" && property.initializer?.kind === SyntaxKind.StringLiteral && !nonInteractiveRoles.has(property.initializer.text)) return;
-				if (interactiveHandlers.includes(property.name.text)) hasInteractiveHandler = true;
-			}
-			if (hasInteractiveHandler) context.report({
-				data: { element: elementName },
-				message: "invalidHandler",
-				range: getTSNodeRange(element.tagName, sourceFile)
-			});
-		}
-		return { visitors: {
-			JsxOpeningElement: checkElement,
-			JsxSelfClosingElement: checkElement
-		} };
-	}
-});
-//#endregion
-export { nonInteractiveElementInteractions_default as default };

package/lib/rules/nonInteractiveElementRoles.d.ts

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

package/lib/rules/nonInteractiveElementRoles.js

@@ -1,116 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/nonInteractiveElementRoles.ts
-const nonInteractiveElements = /* @__PURE__ */ new Set([
-	"article",
-	"aside",
-	"body",
-	"br",
-	"details",
-	"div",
-	"footer",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"header",
-	"hr",
-	"img",
-	"li",
-	"main",
-	"nav",
-	"ol",
-	"p",
-	"section",
-	"table",
-	"td",
-	"ul"
-]);
-const interactiveRoles = /* @__PURE__ */ new Set([
-	"button",
-	"checkbox",
-	"link",
-	"menuitem",
-	"menuitemcheckbox",
-	"menuitemradio",
-	"option",
-	"radio",
-	"searchbox",
-	"slider",
-	"spinbutton",
-	"switch",
-	"tab",
-	"textbox"
-]);
-const allowedExceptions = {
-	li: /* @__PURE__ */ new Set([
-		"menuitem",
-		"option",
-		"row",
-		"tab",
-		"treeitem"
-	]),
-	ol: /* @__PURE__ */ new Set([
-		"listbox",
-		"menu",
-		"menubar",
-		"radiogroup",
-		"tablist",
-		"tree",
-		"treegrid"
-	]),
-	table: /* @__PURE__ */ new Set(["grid"]),
-	td: /* @__PURE__ */ new Set(["gridcell"]),
-	ul: /* @__PURE__ */ new Set([
-		"listbox",
-		"menu",
-		"menubar",
-		"radiogroup",
-		"tablist",
-		"tree",
-		"treegrid"
-	])
-};
-var nonInteractiveElementRoles_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Reports non-interactive elements with interactive ARIA roles.",
-		id: "nonInteractiveElementRoles",
-		presets: ["logical", "logicalStrict"]
-	},
-	messages: { invalidRole: {
-		primary: "Non-interactive element <{{ element }}> should not have the interactive role `'{{ role }}'`.",
-		secondary: [
-			"Non-interactive elements should not be converted to interactive controls using ARIA roles.",
-			"Use native interactive elements like <button> or <a> instead.",
-			"This is required for WCAG 4.1.2 compliance."
-		],
-		suggestions: ["Use a native interactive element instead", "Remove the role attribute"]
-	} },
-	setup(context) {
-		function checkElement(element, { sourceFile }) {
-			if (element.tagName.kind !== SyntaxKind.Identifier) return;
-			const elementName = element.tagName.text.toLowerCase();
-			if (!nonInteractiveElements.has(elementName)) return;
-			const roleProperty = element.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;
-			if (interactiveRoles.has(role) && !allowedExceptions[elementName]?.has(role)) context.report({
-				data: {
-					element: elementName,
-					role
-				},
-				message: "invalidRole",
-				range: getTSNodeRange(roleProperty, sourceFile)
-			});
-		}
-		return { visitors: {
-			JsxOpeningElement: checkElement,
-			JsxSelfClosingElement: checkElement
-		} };
-	}
-});
-//#endregion
-export { nonInteractiveElementRoles_default as default };

package/lib/rules/nonInteractiveElementTabIndexes.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports non-interactive elements with positive or zero tabIndex values.";
-    readonly id: "nonInteractiveElementTabIndexes";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "nonInteractiveTabIndex", undefined>;
-export default _default;

package/lib/rules/nonInteractiveElementTabIndexes.js

@@ -1,107 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/nonInteractiveElementTabIndexes.ts
-const nonInteractiveElements = /* @__PURE__ */ new Set([
-	"article",
-	"aside",
-	"body",
-	"br",
-	"details",
-	"div",
-	"footer",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"header",
-	"hr",
-	"img",
-	"li",
-	"main",
-	"nav",
-	"ol",
-	"p",
-	"section",
-	"span",
-	"ul"
-]);
-const interactiveRoles = /* @__PURE__ */ new Set([
-	"button",
-	"checkbox",
-	"link",
-	"menuitem",
-	"menuitemcheckbox",
-	"menuitemradio",
-	"option",
-	"radio",
-	"searchbox",
-	"slider",
-	"spinbutton",
-	"switch",
-	"tab",
-	"textbox"
-]);
-var nonInteractiveElementTabIndexes_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Reports non-interactive elements with positive or zero tabIndex values.",
-		id: "nonInteractiveElementTabIndexes",
-		presets: ["logical", "logicalStrict"]
-	},
-	messages: { nonInteractiveTabIndex: {
-		primary: "Non-interactive element `<{{ element }}>` should not have an explicit, non-negative `tabIndex`.",
-		secondary: [
-			"Tab navigation should be limited to interactive elements.",
-			"Non-interactive elements with tabIndex add unnecessary stops in the tab order.",
-			"Use tabIndex='-1' if you need to programmatically focus the element."
-		],
-		suggestions: [
-			"Remove the tabIndex attribute",
-			"Use tabIndex='-1' instead",
-			"Add an interactive role to the element"
-		]
-	} },
-	setup(context) {
-		function getTabIndexValue(attr) {
-			if (!attr.initializer) return;
-			if (attr.initializer.kind === SyntaxKind.StringLiteral) {
-				const value = parseInt(attr.initializer.text, 10);
-				return Number.isNaN(value) ? void 0 : value;
-			}
-			if (attr.initializer.kind === SyntaxKind.JsxExpression) {
-				const expr = attr.initializer.expression;
-				if (expr?.kind === SyntaxKind.NumericLiteral) {
-					const value = parseInt(expr.text, 10);
-					return Number.isNaN(value) ? void 0 : value;
-				}
-			}
-		}
-		function getRoleValue(attributes) {
-			const roleProperty = 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 roleProperty.initializer.text;
-		}
-		function checkTabIndex(node, { sourceFile }) {
-			if (node.tagName.kind !== SyntaxKind.Identifier) return;
-			const elementName = node.tagName.text.toLowerCase();
-			if (!nonInteractiveElements.has(elementName)) return;
-			const role = getRoleValue(node.attributes);
-			if (role && interactiveRoles.has(role)) return;
-			const tabIndexProperty = node.attributes.properties.find((property) => property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier && property.name.text === "tabIndex");
-			if (tabIndexProperty?.kind !== SyntaxKind.JsxAttribute) return;
-			const tabIndexValue = getTabIndexValue(tabIndexProperty);
-			if (tabIndexValue !== void 0 && tabIndexValue >= 0) context.report({
-				data: { element: elementName },
-				message: "nonInteractiveTabIndex",
-				range: getTSNodeRange(tabIndexProperty, sourceFile)
-			});
-		}
-		return { visitors: {
-			JsxOpeningElement: checkTabIndex,
-			JsxSelfClosingElement: checkTabIndex
-		} };
-	}
-});
-//#endregion
-export { nonInteractiveElementTabIndexes_default as default };

package/lib/rules/propDuplicates.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Disallow duplicate props in JSX elements.";
-    readonly id: "propDuplicates";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "duplicateProp", undefined>;
-export default _default;

package/lib/rules/propDuplicates.js

@@ -1,37 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/propDuplicates.ts
-var propDuplicates_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Disallow duplicate props in JSX elements.",
-		id: "propDuplicates",
-		presets: ["logical", "logicalStrict"]
-	},
-	messages: { duplicateProp: {
-		primary: "Duplicate prop `{{ propName }}` found in JSX element. The last occurrence will override earlier ones.",
-		secondary: ["Having duplicate props can lead to unexpected behavior since only the last value is used.", "This makes the code harder to understand and maintain."],
-		suggestions: ["Remove the duplicate prop and keep only one definition."]
-	} },
-	setup(context) {
-		function checkElement(node, { sourceFile }) {
-			const seenProps = /* @__PURE__ */ new Set();
-			for (const property of node.attributes.properties) {
-				if (property.kind !== SyntaxKind.JsxAttribute || property.name.kind !== SyntaxKind.Identifier) continue;
-				const propName = property.name.text;
-				if (seenProps.has(propName)) context.report({
-					data: { propName },
-					message: "duplicateProp",
-					range: getTSNodeRange(property.name, sourceFile)
-				});
-				else seenProps.add(propName);
-			}
-		}
-		return { visitors: {
-			JsxOpeningElement: checkElement,
-			JsxSelfClosingElement: checkElement
-		} };
-	}
-});
-//#endregion
-export { propDuplicates_default as default };

package/lib/rules/roleRedundancies.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports redundant ARIA roles on elements with implicit roles.";
-    readonly id: "roleRedundancies";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "redundantRole", undefined>;
-export default _default;

package/lib/rules/roleRedundancies.js

@@ -1,74 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/roleRedundancies.ts
-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"
-};
-var roleRedundancies_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Reports redundant ARIA roles on elements with implicit roles.",
-		id: "roleRedundancies",
-		presets: ["logical", "logicalStrict"]
-	},
-	messages: { redundantRole: {
-		primary: "`<{{ element }}>` elements already implicitly have a role of `{{ role }}`. This explicit role is unnecessary.",
-		secondary: ["HTML elements have default semantics implemented by the browser.", "Setting an explicit role that matches the implicit role is redundant and doesn't provide any benefit."],
-		suggestions: ["Remove the redundant role attribute"]
-	} },
-	setup(context) {
-		function checkRedundantRole(node, { sourceFile }) {
-			if (node.tagName.kind !== SyntaxKind.Identifier) return;
-			const element = node.tagName.text.toLowerCase();
-			const implicitRole = implicitRoles[element];
-			if (!implicitRole) 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 && roleProperty.initializer.text === implicitRole) {
-				const range = getTSNodeRange(roleProperty, sourceFile);
-				context.report({
-					data: {
-						element,
-						role: roleProperty.initializer.text
-					},
-					message: "redundantRole",
-					range,
-					suggestions: [{
-						id: "removeRole",
-						range,
-						text: ""
-					}]
-				});
-			}
-		}
-		return { visitors: {
-			JsxOpeningElement: checkRedundantRole,
-			JsxSelfClosingElement: checkRedundantRole
-		} };
-	}
-});
-//#endregion
-export { roleRedundancies_default as default };

package/lib/rules/roleRequiredAriaProps.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports ARIA roles missing their required ARIA properties.";
-    readonly id: "roleRequiredAriaProps";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "missingRequiredProps", undefined>;
-export default _default;

package/lib/rules/roleRequiredAriaProps.js

@@ -1,76 +0,0 @@
-import { ruleCreator } from "./ruleCreator.js";
-import { SyntaxKind } from "typescript";
-import { getTSNodeRange, typescriptLanguage } from "@flint.fyi/typescript-language";
-//#region src/rules/roleRequiredAriaProps.ts
-const requiredAriaPropsForRole = {
-	checkbox: ["aria-checked"],
-	combobox: ["aria-controls", "aria-expanded"],
-	heading: ["aria-level"],
-	menuitemcheckbox: ["aria-checked"],
-	menuitemradio: ["aria-checked"],
-	option: ["aria-selected"],
-	radio: ["aria-checked"],
-	scrollbar: [
-		"aria-controls",
-		"aria-valuenow",
-		"aria-valuemax",
-		"aria-valuemin"
-	],
-	slider: [
-		"aria-valuenow",
-		"aria-valuemax",
-		"aria-valuemin"
-	],
-	spinbutton: [
-		"aria-valuenow",
-		"aria-valuemax",
-		"aria-valuemin"
-	],
-	switch: ["aria-checked"]
-};
-var roleRequiredAriaProps_default = ruleCreator.createRule(typescriptLanguage, {
-	about: {
-		description: "Reports ARIA roles missing their required ARIA properties.",
-		id: "roleRequiredAriaProps",
-		presets: ["logical", "logicalStrict"]
-	},
-	messages: { missingRequiredProps: {
-		primary: "Elements with ARIA role `{{ role }}` must have the following ARIA property(s) defined: {{ props }}.",
-		secondary: [
-			"ARIA roles define how elements are exposed to assistive technologies.",
-			"Some roles require specific ARIA properties to function correctly.",
-			"This is required for WCAG 4.1.2 compliance."
-		],
-		suggestions: ["Add the required ARIA properties to the element."]
-	} },
-	setup(context) {
-		function checkElement(node, { sourceFile }) {
-			const roleAttribute = node.attributes.properties.find((property) => property.kind === SyntaxKind.JsxAttribute && property.name.kind === SyntaxKind.Identifier && property.name.text === "role");
-			if (roleAttribute?.kind !== SyntaxKind.JsxAttribute || roleAttribute.initializer?.kind !== SyntaxKind.StringLiteral) return;
-			const role = roleAttribute.initializer.text.toLowerCase();
-			const requiredProps = requiredAriaPropsForRole[role];
-			if (!requiredProps) return;
-			const existingProps = /* @__PURE__ */ new Set();
-			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-")) existingProps.add(propertyName);
-			}
-			const missingProps = requiredProps.filter((prop) => !existingProps.has(prop));
-			if (missingProps.length) context.report({
-				data: {
-					props: missingProps.join(", "),
-					role
-				},
-				message: "missingRequiredProps",
-				range: getTSNodeRange(roleAttribute, sourceFile)
-			});
-		}
-		return { visitors: {
-			JsxOpeningElement: checkElement,
-			JsxSelfClosingElement: checkElement
-		} };
-	}
-});
-//#endregion
-export { roleRequiredAriaProps_default as default };

package/lib/rules/roleSupportedAriaProps.d.ts

@@ -1,9 +0,0 @@
-declare const _default: import("@flint.fyi/core").Rule<{
-    readonly description: "Reports ARIA properties that are not supported by an element's role.";
-    readonly id: "roleSupportedAriaProps";
-    readonly presets: readonly ["logical", "logicalStrict"];
-} & {
-    readonly pluginId: string;
-    readonly url: string;
-}, "unsupportedProp", undefined>;
-export default _default;