feat: add template-valid-input-attributes

[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.

Rules table ported from html-validate input-attributes (MIT), Copyright 2017 David Sveningsson.

Adds template-valid-input-attributes: flags <input> attributes whose applicability is conditional on type when the declared type doesn't permit them. For example, pattern on type="number" is silently ignored by the browser.

Premise

HTML spec §4.10.5.1 — States of the type attribute pins most attributes to specific type states. pattern is only defined for Text / Search / URL / Telephone / E-mail / Password. accept is only for File Upload. min/max/step apply only to Date / Month / Week / Time / Local Date and Time / Number / Range. When an author writes <input type="number" pattern="\d+">, the pattern attribute is ignored by the browser without any error — a silent failure class.

Implementation

RESTRICTED table maps each restricted attribute to the set of type states that accept it. The table is ported verbatim from html-validate and spot-verified against the HTML spec per-state tables. For each <input> the visitor resolves the static type and checks each attribute against the table. Missing or valueless type resolves to the Text state (per HTML §4.10.5.1.2), so attributes are still validated against text-state restrictions. Dynamic type (e.g. type={{this.t}}) is skipped.

Restricted attributes checked: accept, alt, capture, checked, dirname, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width.

Flags

<input type='number' pattern='\d+' />         {{! pattern only on text-like types }}
<input type='text' accept='image/*' />        {{! accept only on file }}
<input type='radio' maxlength='10' />         {{! maxlength only on text-like types }}
<input type='checkbox' placeholder='label' /> {{! placeholder only on text-like types }}

Allows

<input type='text' pattern='\d+' />
<input type='file' accept='image/*' multiple />
<input type='number' min='0' max='100' step='1' />
<input type='image' alt='submit' src='/submit.png' />

{{! Dynamic type — skipped }}
<input type={{this.t}} pattern='\d+' />

{{! No explicit type — skipped }}
<input pattern='\d+' />

Prior art

Plugin	Equivalent
html-validate	input-attributes — direct port (same attribute/type table, same skip-on-dynamic-type behavior)
jsx-a11y	—
vuejs-accessibility	—
lit-a11y	—
@angular-eslint/template	—

Opt-in: not added to any preset config.

[NullVoxPopuli]

why are we copying someone else's work here?

[johanrd]

okay, the note is slightly off, perhaps.

The logic part is not ported (the ESLint visitor and Glimmer AST traversal). What was ported was the restricted data table (attribute → allowed types). The table is an encoding of HTML spec §4.10.5.1 and others (e.g. HTML Media Capture for capture).

Did look for options to import instead of copy, but restricted isn't exported from html-validate's public API. The annotation in the source could be updated to say "Data table ported from" rather than "Logic adapted from" to reflect this more accurately?

[johanrd]

moved the attribution to be more local to the actual restricted data table

[johanrd]

another and more viable solution perhaps: https://github.com/johanrd/html-validate-ember