|
| 1 | +# ember/template-valid-autocomplete |
| 2 | + |
| 3 | +<!-- end auto-generated rule header --> |
| 4 | + |
| 5 | +This rule validates the `autocomplete` attribute against the HTML living |
| 6 | +standard. Browsers ignore unknown tokens and mismatched combinations |
| 7 | +silently, so authoring mistakes become invisible at runtime — the user |
| 8 | +just doesn't get the suggestions they expect. |
| 9 | + |
| 10 | +The rule handles: |
| 11 | + |
| 12 | +- `<form autocomplete>` must be `"on"` or `"off"`. |
| 13 | +- `<input type="hidden">` cannot use the bare values `"on"` / `"off"`. |
| 14 | +- `<input type="checkbox | radio | file | submit | image | reset | button">` |
| 15 | + cannot use `autocomplete` at all. |
| 16 | +- Token grammar: tokens must be a valid combination from the section / hint / |
| 17 | + contact / field-name / webauthn set, in the right order. |
| 18 | + |
| 19 | +Dynamic values (`autocomplete={{this.acValue}}`) are skipped. Static empty |
| 20 | +(`autocomplete=""`) and whitespace-only values are flagged: on `<form>` as |
| 21 | +an invalid non-on/off value, on controls as a missing field name. |
| 22 | + |
| 23 | +**Not checked**: whether a field name's control group matches the input type |
| 24 | +(e.g. `"current-password"` on `<input type="text">`). The HTML spec describes |
| 25 | +these field-name-to-control-group mappings descriptively — it does not |
| 26 | +prohibit mismatched pairings with a MUST/MUST NOT. UA and password-manager |
| 27 | +behavior varies, so such a pairing is a grammar-valid author choice whose |
| 28 | +UA-visibility is a UX question, not a spec violation. `html-validate` flags |
| 29 | +it; we don't. `eslint-plugin-jsx-a11y` and `eslint-plugin-lit-a11y` also |
| 30 | +don't (they delegate to axe-core's `autocomplete-valid`, which omits the |
| 31 | +check) — that corroborates but does not drive the decision. |
| 32 | + |
| 33 | +## Token order |
| 34 | + |
| 35 | +An autocomplete attribute value can contain these tokens, in this order: |
| 36 | + |
| 37 | +1. Optional section name (`section-*` prefix). |
| 38 | +2. Optional `shipping` or `billing`. |
| 39 | +3. Optional contact modifier: `home`, `work`, `mobile`, `fax`, `pager` |
| 40 | + (only for `tel-*` / `email` / `impp` field names). |
| 41 | +4. Exactly one field name. |
| 42 | +5. Optional `webauthn`. |
| 43 | + |
| 44 | +## Examples |
| 45 | + |
| 46 | +This rule **forbids** the following: |
| 47 | + |
| 48 | +```hbs |
| 49 | +<form autocomplete='yes'> |
| 50 | + <input autocomplete='first-name' type='text' /> |
| 51 | + <input autocomplete='off street-address' type='text' /> |
| 52 | + <input autocomplete='home email family-name' type='text' /> |
| 53 | + <input autocomplete='section-a' type='text' /> |
| 54 | +</form> |
| 55 | +``` |
| 56 | + |
| 57 | +This rule **allows** the following: |
| 58 | + |
| 59 | +```hbs |
| 60 | +<form autocomplete='off'> |
| 61 | + <input autocomplete='email' type='email' /> |
| 62 | + <input autocomplete='section-ship shipping street-address' type='text' /> |
| 63 | + <input autocomplete='work email' type='email' /> |
| 64 | + <input autocomplete='new-password webauthn' type='password' /> |
| 65 | +</form> |
| 66 | +``` |
| 67 | + |
| 68 | +## References |
| 69 | + |
| 70 | +- [HTML spec: autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) |
| 71 | +- Adapted from [`html-validate`'s `valid-autocomplete`](https://html-validate.org/rules/valid-autocomplete.html) (MIT). |
0 commit comments