ember/template-no-autofocus-attribute

April 24, 2026 · View on GitHub

💼 This rule is enabled in the 📋 template-lint-migration config.

🔧 This rule is automatically fixable by the --fix CLI option.

Disallows the use of autofocus attribute on elements.

The autofocus attribute can cause usability issues for both sighted and non-sighted users by disrupting expected behavior and screen reader announcements.

Examples

Examples of incorrect code for this rule:

<template>
  <input type="text" autofocus />
</template>

<template>
  <textarea autofocus></textarea>
</template>

Examples of correct code for this rule:

<template>
  <input type="text" />
</template>

<template>
  <textarea></textarea>
</template>

Explicit opt-out via a mustache boolean false is allowed — this is the only form that statically guarantees no rendered autofocus attribute (Glimmer VM normalizes {{false}} to attribute removal). The string autofocus="false" is still flagged per HTML boolean-attribute semantics (any attribute presence, including the string "false", enables autofocus).

<template>
  <input autofocus={{false}} />
  {{!-- element syntax: the mustache-boolean form --}}

  {{input autofocus=false}}
  {{!-- mustache syntax: the hash-pair form --}}
</template>

<dialog> and its descendants are exempt. A dialog is expected to focus its initial element on open, per MDN:

<template>
  <dialog>
    <button autofocus>Close</button>
  </dialog>
</template>

When Not To Use It

If you need to autofocus for specific accessibility or UX requirements and have thoroughly tested with assistive technologies, you may disable this rule for those specific cases.

Examples

When Not To Use It

References