Is your feature request related to a problem? Please describe.
After #1852 landed implicit label support, input-requires-label now correctly allows <input> nested inside <label>. However, it doesn't check whether the label actually contains visible text. This passes without warning:
<label><input type="password" /></label>
This is not accessible as a screen reader finds the input but has no name to announce. (Raised by @coliff in
#1852 (comment).)
Describe the solution you'd like
The rule should warn when an implicit <label> wraps an <input> but contains no non-whitespace text content.
Should warn:
<label><input type="password" /></label>
<label> <input type="text" /> </label>
Should pass:
<label>Password <input type="password" /></label>
<label><span>Email</span> <input type="email" /></label>
Proposed approach
The parser already emits a text event for text nodes between tags, and h1-require uses this exact pattern to check for empty <h1> tags. The same approach applies here:
- When
<label> (without for) opens, reset a labelHasText flag to false
- On the
text event, if inside an implicit label and the text isn't whitespace-only, set labelHasText = true
- When
</label> closes, if the label contained inputs but labelHasText is still false, report a warning
This reuses the labelDepth tracking from #1852 and adds one event listener + one boolean flag.
Questions before I start
- Should this live in
input-requires-label, or would you prefer a separate rule like label-requires-text?
- Should
<label><img alt="icon"> <input></label> (no text node, but alt text on a child element) warn or pass? I'm leaning toward warn, since alt isn't visible label text, but wanted to check.
Happy to submit a PR for this.
Is your feature request related to a problem? Please describe.
After #1852 landed implicit label support,
input-requires-labelnow correctly allows<input>nested inside<label>. However, it doesn't check whether the label actually contains visible text. This passes without warning:<label><input type="password" /></label>This is not accessible as a screen reader finds the input but has no name to announce. (Raised by @coliff in
#1852 (comment).)
Describe the solution you'd like
The rule should warn when an implicit
<label>wraps an<input>but contains no non-whitespace text content.Should warn:
<label><input type="password" /></label><label> <input type="text" /> </label>Should pass:
<label>Password <input type="password" /></label><label><span>Email</span> <input type="email" /></label>Proposed approach
The parser already emits a
textevent for text nodes between tags, andh1-requireuses this exact pattern to check for empty<h1>tags. The same approach applies here:<label>(withoutfor) opens, reset alabelHasTextflag tofalsetextevent, if inside an implicit label and the text isn't whitespace-only, setlabelHasText = true</label>closes, if the label contained inputs butlabelHasTextis stillfalse, report a warningThis reuses the
labelDepthtracking from #1852 and adds one event listener + one boolean flag.Questions before I start
input-requires-label, or would you prefer a separate rule likelabel-requires-text?<label><img alt="icon"> <input></label>(no text node, butalttext on a child element) warn or pass? I'm leaning toward warn, sincealtisn't visible label text, but wanted to check.Happy to submit a PR for this.