Linter Rule: No autofocus attribute

Rule: a11y-no-autofocus-attribute

Description

Prevent usage of the autofocus attribute on HTML elements, Action View Form Tag Helpers and Action View Form Builder methods.

Rationale

The autofocus attribute is a global attribute that indicates an element should be focused on page load. It reduces accessibility by moving users to an element without warning and context.

Its use should be limited to form fields that serve as the main purpose of the page, such as a search input on a search page.

Examples

✅ Good

<input type="text">
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)

<%= text_field_tag :name, "value" %>

<%= f.text_field :name %>

🚫 Bad

<input type="text" autofocus>
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)

<input type="password" autofocus="autofocus">
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)
Boolean attribute `autofocus` should not have a value. Use `autofocus` instead of `autofocus="autofocus"`. (html-boolean-attributes-no-value)

<%= text_field_tag :name, "value", autofocus: true %>

<%= f.text_area :body, autofocus: true %>

References

• HTML: autofocus attribute
• ember-template-lint: no-autofocus-attribute