Add Angular Input Group Sample Demonstrating Correct `id` and `for` Attributes for Accessibility

[Copilot]

Overview

This PR adds a new Input Group sample (input-group-sample-7) that demonstrates the correct use of id and for attributes for proper label-input association, addressing a critical accessibility gap in the existing samples.

Problem

Current Input Group samples use <label for="..."> but the corresponding <input> elements only have a name attribute without a matching id. This breaks screen reader behavior and accessibility:

Current Pattern (Broken):

<input igxInput name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>

The for attribute points to "fullName" but there is no element with id="fullName", only name="fullName". This causes:

• Screen readers like JAWS and NVDA fail to announce labels properly
• Users cannot click labels to focus inputs
• HTML validation errors
• WCAG 2.1 accessibility compliance failures

Solution

The new sample demonstrates the correct pattern with proper id and for pairing:

Correct Pattern:

<input igxInput id="fullName" name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>

What's Included

Sample Features

• Four complete input examples (text, email, phone, required field)
• Each input has a unique id attribute matching the label's for attribute
• Icons and styling consistent with other Input Group samples
• Comprehensive inline documentation explaining the accessibility importance

Educational Content

The sample includes an accessibility information section that explains:

• Why id and for pairing is essential for screen readers
• The difference between id and name attributes
• Impact on HTML validation and WCAG compliance
• Best practices for accessible form inputs

Testing

• Unit tests verify component creation
• Tests validate proper id and for pairing for all inputs
• All existing linting rules pass

Changes Made

• Created new sample component: src/app/data-entries/input-group/input-group-sample-7/
  • input-group-sample-7.component.ts - Component implementation
  • input-group-sample-7.component.html - Template with correct examples
  • input-group-sample-7.component.scss - Styling for accessibility info section
  • input-group-sample-7.component.spec.ts - Unit tests
• Updated src/app/data-entries/data-entries.routes.ts - Added route configuration
• Updated src/app/data-entries/data-entries-routes-data.ts - Added sample metadata

Impact

This sample provides developers with a clear reference for implementing accessible forms with Ignite UI Angular, helping prevent accessibility issues in production applications.

Closes #[issue-number]

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: ng build --configuration production (my-app) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add Angular Input Group Sample With Correct id and for Attributes</issue_title> <issue_description>### 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. </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes IgniteUI/igniteui-angular-samples#3692

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.