jsx-a11y/no-distracting-elements

Disallow deprecated marquee and blink elements, which distract users and can trigger vestibular issues.

• Category: Accessibility
• Severity: error
• Source: oxlint-builtin:jsx-a11y
• Framework: global
• Enabled when: always (unless customRulesOnly=true)
• Documentation: https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on <marquee> or <blink> JSX elements — both are deprecated, visually distracting, and can trigger seizures or vestibular issues. The element list is hardcoded; you cannot extend it. False positives are essentially nonexistent in modern code: neither element appears in any current HTML spec or browser implementation, so any usage is almost certainly an oversight.

Fix prompt

Use this once validation confirms the diagnostic is real.

Delete the <marquee> or <blink> element and rebuild the effect with CSS @keyframes inside a @media (prefers-reduced-motion: no-preference) block so users who opt out of motion don't see the animation. For non-essential ambient motion, prefer no animation at all. See https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements

Related rules

More Accessibility rules from the rules reference:

• react-doctor/alt-text: Require alternative text on img, area, input[type='image'], and object elements so screen readers can describe them.
• react-doctor/anchor-ambiguous-text: Describe a link's destination — avoid bare 'click here' / 'learn more' / 'link' as the only link text.
• react-doctor/anchor-has-content: Add visible or aria-labelled text inside every `<a>`.
• react-doctor/anchor-is-valid: Require anchors to navigate to a real destination — use a button for click-only actions instead of href='#' or javascript:void(0).
• react-doctor/aria-activedescendant-has-tabindex: Add `tabIndex` to elements with `aria-activedescendant` so they're keyboard-focusable.