{"record":{"id":"c93995e19fdc3c4c","repo":"oxc-project/oxc","slug":"do-not-use-element-elements-as-they-can-crea","errorCode":null,"errorMessage":"Do not use `<{element}>` elements as they can create visual accessibility issues and are deprecated.","messagePattern":"Do not use `<(.+?)>` elements as they can create visual accessibility issues and are deprecated\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/jsx_a11y/no_distracting_elements.rs","lineNumber":17,"sourceCode":"use oxc_ast::AstKind;\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_semantic::AstNode;\nuse oxc_span::{GetSpan, Span};\nuse schemars::JsonSchema;\nuse serde::Deserialize;\n\nuse crate::{\n    LintContext,\n    context::ContextHost,\n    rule::{DefaultRuleConfig, Rule},\n    utils::get_element_type,\n};\n\nfn no_distracting_elements_diagnostic(span: Span, element: &str) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\n        \"Do not use `<{element}>` elements as they can create visual accessibility issues and are deprecated.\"\n    ))\n        .with_help(format!(\n            \"Replace the `<{element}>` element with alternative, more accessible ways to achieve your desired visual effects.\"\n        ))\n        .with_label(span)\n}\n\n#[derive(Debug, Clone, Copy, PartialEq, Eq, Deserialize, JsonSchema)]\n#[serde(rename_all = \"lowercase\")]\nenum DistractingElement {\n    Marquee,\n    Blink,\n}\n\nfn default_elements() -> Vec<DistractingElement> {\n    vec![DistractingElement::Marquee, DistractingElement::Blink]\n}","sourceCodeStart":1,"sourceCodeEnd":35,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/jsx_a11y/no_distracting_elements.rs#L1-L35","documentation":"This is the `jsx_a11y/no-distracting-elements` rule in oxlint. It fires when a JSX element is one of the configured distracting elements — by default `<marquee>` and `<blink>` (the `DistractingElement` enum plus `default_elements()`). These elements move or flash, which can trigger vestibular disorders and are deprecated in HTML, so the linter bans them.","triggerScenarios":"Any JSX opening element whose resolved element type (via `get_element_type`, so capitalized/DOM-prefixed forms count) is `marquee` or `blink`, or another name listed in the rule's `elements` config option (lowercase serde values: `marquee`, `blink`).","commonSituations":"Legacy marketing pages with scrolling news tickers (`<marquee>`); old HTML pasted into React components; kitschy attention effects; enabling jsx-a11y strict configs on inherited codebases.","solutions":["Replace `<marquee>` with a CSS animation (and pause it for users with `prefers-reduced-motion`).","Replace `<blink>` with static styled text or a subtle CSS opacity animation, also respecting `prefers-reduced-motion`.","Restrict or extend the checked set via the rule's `elements` config if needed."],"exampleFix":"// before\n<marquee>Breaking news!</marquee>\n\n// after\n<div className=\"ticker\" role=\"marquee-free\"><span className=\"ticker-track\">Breaking news!</span></div>\n/* CSS: .ticker-track { animation: scroll 12s linear infinite; } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } */","handlingStrategy":"validation","validationCode":"npx oxlint --jsx-a11y/no-distracting-elements src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Ban <marquee>/<blink> in code review; implement motion with CSS keyframes.","Always pair animations with @media (prefers-reduced-motion: reduce) { animation: none; }.","Adjust the rule's elements config if you add other banned tags."],"tags":["jsx-a11y","react","accessibility","deprecated-html","css","lint"],"backgroundTag":"deprecated-html-elements","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}