jsx-a11y/no-distracting-elements
Disallow <marquee> and <blink>
Also called jsx_a11y/no-distracting-elements
Text that scrolls or flashes by itself is hard to read for people with low vision or a cognitive disability, and they can't pause it. Both elements are also deprecated, and browsers no longer make <blink> blink.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"jsx-a11y/no-distracting-elements" = "error" # or "warn"Every option, set to its default:
bunfig.toml
[lint.rules]
"jsx-a11y/no-distracting-elements" = ["error", {
elements = ["marquee", "blink"],
}]Examples#
example.jsx2 problems
const banner = <marqueeDo not use <marquee> elements as they can create visual accessibility issues and are deprecated.>Free shipping this week</marquee>;
const warning = <blinkDo not use <blink> elements as they can create visual accessibility issues and are deprecated.>Sale ends today</blink>;example.jsxNo problems
const banner = <p className="banner">Free shipping this week</p>;
const warning = <strong>Sale ends today</strong>;Options#
| Option | Default | What it does |
|---|---|---|
elements | ["marquee", "blink"] | Which of the two elements to report. |
example.jsxwith
{ "elements": ["blink"] }No problemsconst banner = <marquee>Free shipping this week</marquee>;