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

src/app/data-entries/data-entries-routes-data.ts

@@ -55,6 +55,7 @@ export const dataEntriesRoutesData = {
     "input-group-sample-4": { displayName: "Input Group Hint", parentName: "Input Group" },
     "input-group-sample-5": { displayName: "Input Group Types", parentName: "Input Group" },
     "input-group-sample-6": { displayName: "Input Group Full Form", parentName: "Input Group" },
+    "input-group-sample-7": { displayName: "Input Group Accessibility", parentName: "Input Group" },
     "input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
     "input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" },
     "reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" },

src/app/data-entries/data-entries.routes.ts

@@ -45,6 +45,7 @@ import { InputGroupSample3Component } from './input-group/input-group-sample-3/i
 import { InputGroupSample4Component } from './input-group/input-group-sample-4/input-group-sample-4.component';
 import { InputGroupSample5Component } from './input-group/input-group-sample-5/input-group-sample-5.component';
 import { InputGroupSample6Component } from './input-group/input-group-sample-6/input-group-sample-6.component';
+import { InputGroupSample7Component } from './input-group/input-group-sample-7/input-group-sample-7.component';
 import { InputGroupStyleComponent } from './input-group/input-group-styling/input-group-styling.component';
 import { InputGroupTailwindStyleComponent } from './input-group/input-group-tailwind-styling/input-group-tailwind-styling.component';
 import { InputTextSelectionComponent } from './input-group/input-text-selection/input-text-selection.component';
@@ -353,6 +354,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['input-group-sample-6'],
         path: 'input-group-sample-6'
     },
+    {
+        component: InputGroupSample7Component,
+        data: dataEntriesRoutesData['input-group-sample-7'],
+        path: 'input-group-sample-7'
+    },
     {
         component: InputGroupStyleComponent,
         data: dataEntriesRoutesData['input-group-style'],

src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.html

@@ -0,0 +1,56 @@
+<article class="sample-column">
+    <form>
+        <!-- Example 1: Simple text input with correct id and for pairing -->
+        <igx-input-group>
+            <input igxInput id="fullName" name="fullName" type="text" />
+            <label igxLabel for="fullName">Full Name</label>
+        </igx-input-group>
+
+        <!-- Example 2: Email input with icon and correct id and for pairing -->
+        <igx-input-group>
+            <input igxInput id="emailAddress" name="emailAddress" type="email" />
+            <label igxLabel for="emailAddress">Email Address</label>
+            <igx-suffix>
+                <igx-icon>email</igx-icon>
+            </igx-suffix>
+        </igx-input-group>
+
+        <!-- Example 3: Phone input with correct id and for pairing -->
+        <igx-input-group>
+            <input igxInput id="phoneNumber" name="phoneNumber" type="tel" />
+            <label igxLabel for="phoneNumber">Phone Number</label>
+            <igx-suffix>
+                <igx-icon>phone</igx-icon>
+            </igx-suffix>
+        </igx-input-group>
+
+        <!-- Example 4: Required field with correct id and for pairing -->
+        <igx-input-group>
+            <input igxInput id="userName" name="userName" type="text" required="required" />
+            <label igxLabel for="userName">Username</label>
+            <igx-suffix>
+                <igx-icon>person</igx-icon>
+            </igx-suffix>
+        </igx-input-group>
+    </form>
+
+    <!-- Accessibility Information Section -->
+    <div class="accessibility-info">
+        <h4>Accessibility Best Practice</h4>
+        <p>
+            This sample demonstrates the correct use of <code>id</code> and <code>for</code> attributes 
+            for proper label-input association, which is essential for accessibility:
+        </p>
+        <ul>
+            <li>Each <code>&lt;input&gt;</code> element has a unique <code>id</code> attribute</li>
+            <li>The corresponding <code>&lt;label&gt;</code> has a <code>for</code> attribute that matches the input's <code>id</code></li>
+            <li>This pairing ensures screen readers like JAWS and NVDA can properly announce labels</li>
+            <li>It also allows users to click the label to focus the input, improving usability</li>
+        </ul>
+        <p>
+            <strong>Note:</strong> The <code>for</code> attribute must match the <code>id</code> attribute, 
+            not the <code>name</code> attribute. Using <code>name</code> alone without <code>id</code> breaks 
+            screen reader functionality and fails HTML validation.
+        </p>
+    </div>
+</article>

src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.scss

@@ -0,0 +1,26 @@
+.sample-column {
+    max-width: 550px;
+}
+
+.accessibility-info {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f0f8ff;
+    border-left: 4px solid #0078d4;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.accessibility-info h4 {
+    margin-top: 0;
+    color: #0078d4;
+    font-size: 16px;
+}
+
+.accessibility-info code {
+    background-color: #e6e6e6;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: monospace;
+}

src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputGroupSample7Component } from './input-group-sample-7.component';
+
+describe('InputGroupSample7Component', () => {
+  let component: InputGroupSample7Component;
+  let fixture: ComponentFixture<InputGroupSample7Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [InputGroupSample7Component]
+})
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputGroupSample7Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have inputs with matching id and for attributes', () => {
+    const compiled = fixture.nativeElement;
+
+    // Check fullName input and label
+    const fullNameInput = compiled.querySelector('#fullName');
+    const fullNameLabel = compiled.querySelector('label[for="fullName"]');
+    expect(fullNameInput).toBeTruthy();
+    expect(fullNameLabel).toBeTruthy();
+
+    // Check emailAddress input and label
+    const emailInput = compiled.querySelector('#emailAddress');
+    const emailLabel = compiled.querySelector('label[for="emailAddress"]');
+    expect(emailInput).toBeTruthy();
+    expect(emailLabel).toBeTruthy();
+
+    // Check phoneNumber input and label
+    const phoneInput = compiled.querySelector('#phoneNumber');
+    const phoneLabel = compiled.querySelector('label[for="phoneNumber"]');
+    expect(phoneInput).toBeTruthy();
+    expect(phoneLabel).toBeTruthy();
+
+    // Check userName input and label
+    const userNameInput = compiled.querySelector('#userName');
+    const userNameLabel = compiled.querySelector('label[for="userName"]');
+    expect(userNameInput).toBeTruthy();
+    expect(userNameLabel).toBeTruthy();
+  });
+});

src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { BaseInputGroupSampleComponent } from '../base-input.component';
+import { FormsModule } from '@angular/forms';
+import { IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxIconComponent, IgxSuffixDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-input-group-sample-7',
+    styleUrls: ['./input-group-sample-7.component.scss'],
+    templateUrl: './input-group-sample-7.component.html',
+    imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxIconComponent, IgxSuffixDirective]
+})
+export class InputGroupSample7Component extends BaseInputGroupSampleComponent { }