Skip to content

Add Angular Input Group Sample With Correct id and for Attributes #3692

@georgianastasov

Description

@georgianastasov

Description

Add a new sample demonstrating the correct use of id on <input> matching the for attribute in <label>.

Current Input Group samples use a <label for="..."> but the corresponding <input> does not have an id, only a name. This breaks screen reader behavior, since for must point to a matching id, not name.

This causes labels to go unannounced in screen readers like JAWS and NVDA, and fails HTML validation checks.

Why Needed

  • Proper for and id pairing is required for screen readers to associate labels with inputs.
  • Missing id causes major accessibility issues and leads to confusion for users with assistive tech.
  • HTML validators will raise warnings or errors.

Recommendations

  • Include documentation explaining.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions