feat: add jsx-a11y/no-distracting-elements lint rule
MODIFY
packages/@romejs/diagnostics/categories.ts
packages/@romejs/diagnostics/categories.ts
@@ -105,6 +105,7 @@ type LintDiagnosticCategory =
| "lint/jsxA11yHTMLHasLang"
| "lint/jsxA11yIframeHasTitle"
| "lint/jsxA11yImgRedundantAlt"
+ | "lint/jsxA11yNoDistractingElements"
| "lint/jsxA11yNoTargetBlank"
| "lint/jsxKey"
| "lint/jsxNoCommentText"

MODIFY
packages/@romejs/diagnostics/descriptions.ts
packages/@romejs/diagnostics/descriptions.ts
@@ -290,6 +290,10 @@ export const descriptions = createMessages({
},
// @romejs/js-compiler
LINT: {
+ JSX_A11Y_NO_DISTRACTING_ELEMENTS: (element: string) => ({
+ category: "lint/jsxA11yNoDistractingElements",
+ message: `Do not use ${element} elements as they can create visual accessibility issues and are deprecated.`,
+ }),
NO_DANGER: {
category: "lint/noDanger",
message: "dangerouslySetInnerHTML should be avoided",

MODIFY
packages/@romejs/js-ast-utils/doesNodeMatchPattern.ts
packages/@romejs/js-ast-utils/doesNodeMatchPattern.ts
@@ -53,7 +53,7 @@ export default function doesNodeMatchPattern(
const {parts: expectedParts, hasDoubleStar} = split(match);
// Fast path for single part pattern matching
- if (expectedParts.length === 1 && expectedParts[0] !== '*' && !hasDoubleStar) {
+ if (expectedParts.length === 1 && expectedParts[0] !== "*" && !hasDoubleStar) {
return isIdentifierish(node) && node.name === expectedParts[0];
}

MODIFY
packages/@romejs/js-compiler/lint/rules/index.ts
packages/@romejs/js-compiler/lint/rules/index.ts
@@ -19,6 +19,7 @@ import importDefaultBasename from "./regular/importDefaultBasename";
import jsxA11YHTMLHasLang from "./react/jsxA11yHTMLHasLang";
import jsxA11YIframeHasTitle from "./react/jsxA11yIframeHasTitle";
import jsxA11YImgRedundantAlt from "./react/jsxA11yImgRedundantAlt";
+import jsxA11YNoDistractingElements from "./react/jsxA11yNoDistractingElements";
import jsxA11YNoTargetBlank from "./react/jsxA11yNoTargetBlank";
import jsxKey from "./react/jsxKey";
import jsxNoCommentText from "./react/jsxNoCommentText";
@@ -84,6 +85,7 @@ export const lintTransforms = [
jsxA11YHTMLHasLang,
jsxA11YIframeHasTitle,
jsxA11YImgRedundantAlt,
+ jsxA11YNoDistractingElements,
jsxA11YNoTargetBlank,
jsxKey,
jsxNoCommentText,

ADD
packages/@romejs/js-compiler/lint/rules/react/jsxA11yNoDistractingElements.test.ts
+import {test} from "rome";
+import {testLintMultiple} from "../testHelpers";
+
+test(
+ "jsx a11y no distracting elements",
+ async (t) => {
+ await testLintMultiple(
+ t,
+ [
+ // INVALID
+ "<blink />",
+ "<marquee />",
+ // VALID
+ "<div />",
+ ],
+ {category: "lint/jsxA11yNoDistractingElements"},
+ );
+ },
+);

ADD
packages/@romejs/js-compiler/lint/rules/react/jsxA11yNoDistractingElements.ts
+import {Path, TransformExitResult} from "@romejs/js-compiler";
+import {descriptions} from "@romejs/diagnostics";
+import {isJSXElement} from "@romejs/js-ast-utils";
+
+const DISTRACTING_TYPES = ["blink", "marquee"];
+
+export default {
+ name: "jsxA11yNoDistractingElements",
+
+ enter(path: Path): TransformExitResult {
+ const {node} = path;
+
+ const distractingType = DISTRACTING_TYPES.find((name) =>
+ isJSXElement(node, name)
+ );
+
+ if (distractingType) {
+ path.context.addNodeDiagnostic(
+ node,
+ descriptions.LINT.JSX_A11Y_NO_DISTRACTING_ELEMENTS(distractingType),
+ );
+ }
+
+ return node;
+ },
+};

feat: add jsx-a11y/no-distracting-elements lint rule