feat: add template-valid-autocomplete

[johanrd]

Note

This is part of a series where Claude has audited eslint-plugin-ember against jsx-a11y, vuejs-accessibility, angular-eslint, lit-a11y and html-validate, ember-template-lint, and the HTML and WCAG specs.

See html-validate valid-autocomplete for the peer rule. Logic adapted from html-validate (MIT), Copyright 2017 David Sveningsson.

Adds template-valid-autocomplete: validates the grammar of the autocomplete attribute on <form>, <input>, <textarea>, <select>. Token identity, order, and contact-with-field compatibility are checked. The field-name-to-control-group compatibility check (e.g. current-password on type="text") is deliberately not implemented — see rationale below.

Premise

HTML spec §4.10.19.7 — autofill defines a restricted grammar for autocomplete: an optional section-*, an optional shipping/billing, an optional contact modifier (home/work/mobile/fax/pager), exactly one field name, and an optional webauthn. Browsers and password managers silently drop unknown tokens or mis-ordered combinations — authoring mistakes like autocomplete="first-name" (should be given-name) are invisible at runtime.

Checks implemented

• <form autocomplete> accepts only on or off.
• <input type="hidden"> cannot use on/off.
• <input type="checkbox|radio|file|submit|image|reset|button"> cannot use autocomplete at all.
• Each token must be a valid section / hint / contact / field / webauthn token.
• Tokens must appear in the correct order.
• Contact modifiers (home/work/mobile/fax/pager) only pair with field names from the "with contact" list (tel, email, impp, etc.).
• Exactly one field name must be present.

Deliberately omitted: field-name-to-control-group check

The spec's autofill field name control group table uses descriptive language for the mapping — "the control group for field name X is Y" — without a MUST/MUST NOT. <input type="text" autocomplete="current-password"> is grammar-valid; UAs are likely to handle it inconsistently, but it is not a spec violation. Two peers (jsx-a11y, lit-a11y) happen to delegate to axe-core's autocomplete-valid virtual rule, which also omits this check.

Flags

<form autocomplete='yes'>...</form>                      {{! form: on/off only }}
<input type='hidden' autocomplete='off' />               {{! hidden forbids on/off }}
<input type='checkbox' autocomplete='email' />           {{! type forbids autocomplete }}
<input type='text' autocomplete='first-name' />          {{! "first-name" is not a valid field name; use "given-name" }}
<input type='text' autocomplete='off street-address' />  {{! on/off cannot combine with field tokens }}
<input type='text' autocomplete='section-a' />           {{! section without a field name }}
<input type='text' autocomplete='home family-name' />    {{! contact modifier + wrong field group }}
<input type='password' autocomplete='webauthn current-password' />  {{! wrong order }}

Allows

<form autocomplete='off'>
  <input type='email' autocomplete='email' />
  <input type='text' autocomplete='section-ship shipping address-line1' />
  <input type='email' autocomplete='work email' />
  <input type='password' autocomplete='new-password webauthn' />
</form>

{{! No control-group check — these are NOT flagged (matching axe-core) }}
<input type='text' autocomplete='current-password' />

{{! Dynamic value — skipped }}
<input type='text' autocomplete={{this.ac}} />

Prior art

Plugin	Equivalent	Behavior
jsx-a11y	autocomplete-valid	Delegates to axe-core's virtual rule — grammar only, no control-group check.
lit-a11y	autocomplete-valid	Same as jsx-a11y (axe-core delegation).
vuejs-accessibility	—	No equivalent rule.
@angular-eslint/template	—	No equivalent rule.
html-validate	valid-autocomplete	Full grammar + control-group cross-check. Token tables ported from here.

Opt-in: not added to any preset config.