no-autofocus

Try in Playground
jsx-a11y

oscar143

Best PracticeInformational

0

No tags

No CWE or CVE

jsx-a11y/no-autofocus

Enforce that autoFocus prop is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.

Accessibility guidelines

General best practice (reference resources)

Resources

  • WHATWG HTML Standard, The autofocus attribute
  • The accessibility of HTML 5 autofocus

Ast Rule: html element


no-autofocus

How to write a rule
const errorMessage = 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.';

function getProp(attributes = [], prop = "") {
  if (!prop) return;

  return attributes.find((attribute) => {
    if (attribute && attribute.name && attribute.name.value) {
      return attribute.name.value === prop;
    }
  });
}

function visit(node, filename, code) {
  // your code here
  if (node) {
    const autoFocusProp = getProp(node.attributes, "autoFocus");

    if (autoFocusProp) {
      const error = buildError(
        autoFocusProp.start.line,
        autoFocusProp.start.col,
        autoFocusProp.end.line,
        autoFocusProp.end.col,
        errorMessage,
        "INFO",
        "BEST_PRACTICES"
      );

      const editUpdate = buildEditUpdate(
        autoFocusProp.start.line,
        autoFocusProp.start.col,
        autoFocusProp.end.line,
        autoFocusProp.end.col,
        ``
      );

      const fix = buildFix("remove `autoFocus`", [
        editUpdate,
      ]);

      addError(error.addFix(fix));
    }
  }
}

test.js

Expected test result: has error

div with auto focus prop

<div autoFocus />
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.