no-distracting-elements

Try in Playground
jsx-a11y

oscar143

Best PracticeError

0

No tags

No CWE or CVE

jsx-a11y/no-distracting-elements

Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues for visually impaired users. Such elements are most likely deprecated and should be avoided. The following elements are default visually distracting: <marquee> and <blink>.

Accessibility guidelines

  • WCAG 2.2.2

Resources

Ast Rule: html element


no-distracting-elements

How to write a rule
const DISTRACTING_ELEMENTS = [
  'marquee',
  'blink',
];

function getTag(node) {
  if (node && node.tag) {
    return node.tag.value;
  }
}

function visit(node, filename, code) {
  const element = getTag(node);

  if (DISTRACTING_ELEMENTS.includes(element)) {
    const error = buildError(
      node.start.line,
      node.start.col,
      node.end.line,
      node.end.col,
      `Do not use <${element}> elements as they can create visual accessibility issues and are deprecated.`,
      "INFO",
      "BEST_PRACTICES"
    );

    addError(error);
  }
}

bad.jsx

Expected test result: has error

<marquee />
<blink />
Add comment

Log in to add a comment


    Be the first one to leave a comment!

Codiga Logo
Codiga Hub
  • Rulesets
  • Playground
  • Snippets
  • Cookbooks
soc-2 icon

We are SOC-2 Compliance Certified

G2 high performer medal

Codiga – All rights reserved 2022.