noDistractingElements

Diagnostic Category: lint/a11y/noDistractingElements

JSX and TSX

Since: v1.0.0

Sources:

Same as: jsx-a11y/no-distracting-elements

Description

Enforces that no distracting elements are used.

Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided. By default, the following elements are visually distracting: <marquee> and <blink>.

Examples

Invalid

<marquee />

code-block.jsx:1:1 lint/a11y/noDistractingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Don’t use the ‘marquee’ element.
  
  > 1 │ <marquee />
      │ ^^^^^^^^^^^
    2 │ 
  
  ℹ Visually distracting elements can cause accessibility issues and should be avoided.
  
  ℹ Unsafe fix: Remove the ‘marquee’ element.
  
    1 │ <marquee·/>
      │ -----------

<blink />

code-block.jsx:1:1 lint/a11y/noDistractingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Don’t use the ‘blink’ element.
  
  > 1 │ <blink />
      │ ^^^^^^^^^
    2 │ 
  
  ℹ Visually distracting elements can cause accessibility issues and should be avoided.
  
  ℹ Unsafe fix: Remove the ‘blink’ element.
  
    1 │ <blink·/>
      │ ---------

Valid

<div />

Accessibility guidelines

WCAG 2.2.2

How to configure

{
  "linter": {
    "rules": {
      "a11y": {
        "noDistractingElements": "error"
      }
    }
  }
}