Skip to content

fix(require-input-label): don't count id as extra label when aria-label/labelledby present#2767

Merged
NullVoxPopuli merged 3 commits intoember-cli:masterfrom
johanrd:fix/require-input-label-id-false-positive
Apr 30, 2026
Merged

fix(require-input-label): don't count id as extra label when aria-label/labelledby present#2767
NullVoxPopuli merged 3 commits intoember-cli:masterfrom
johanrd:fix/require-input-label-id-false-positive

Conversation

@johanrd
Copy link
Copy Markdown
Contributor

@johanrd johanrd commented Apr 28, 2026

Summary

Fixes the false positive reported in ember-template-lint/ember-template-lint#3388.

<input id='hello' aria-label='hello' /> was wrongly flagged as multipleLabels because id was counted as a label alongside aria-label. An id attribute alone cannot be verified statically as a <label for> reference — a matching sibling label may or may not exist elsewhere in the template. Counting it as a second label when aria-label or aria-labelledby is already present is a false positive.

What changes:

  • id is no longer counted toward labelCount when other labels (aria-label, aria-labelledby, or a wrapping <label>) are already present
  • The existing bail-out for id-only inputs is preserved (no aria-label and no wrapping label → skip, to avoid flagging inputs that have an off-screen <label for> sibling we can't see)

What does NOT change:

  • <input id="foo" /> → still valid (false negative acknowledged; within-template <label for> traversal is a separate feature — see angular-eslint label-has-associated-control with checkIds: true for the two-pass approach)
    Will try to fix in an upcoming pr.

Test plan

  • New valid case: <input id="hello" aria-label="hello" /> — no longer flagged
  • Existing invalid case <input aria-label="a" aria-labelledby="b" /> — still flagged (multipleLabels)
  • Existing valid case <input id="foo" /> — still valid
  • All 112 tests pass

johanrd added 2 commits April 28, 2026 09:13
…gative

Refs: ember-template-lint/ember-template-lint#3388

- id + aria-label wrongly flagged as multipleLabels (false positive)
- id alone not flagged as missing label (false negative)
…bel/labelledby

Refs: ember-template-lint/ember-template-lint#3388

id alone cannot be verified statically as a <label for> reference (same
rationale as vuejs-accessibility form-control-has-label). Counting it as
a second label when aria-label or aria-labelledby is already present causes
a false positive multipleLabels error. Keep the bail-out for id-only inputs
(no real labels present) to avoid flagging inputs that likely have an
off-screen <label for> sibling.
…el cases

- Add valid: <input id aria-labelledby> (GJS + HBS)
- Add invalid: <label><input id aria-label></label> still multipleLabels —
  locks in the corrected behavior after the validLabel && hasId carve-out
  was removed.
- Drop peer-plugin reference from the id-skip comment; keep the spec-anchored
  reason (static analysis can't verify the <label for>) and inline the
  one-shot aria-label/labelledby locals.
@johanrd johanrd marked this pull request as ready for review April 28, 2026 12:30
@NullVoxPopuli NullVoxPopuli merged commit 8139627 into ember-cli:master Apr 30, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants