From afb5bfebafc290ee4fe4bd52f61079ac4c1cb58f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 18 Oct 2025 10:46:04 +0000
Subject: [PATCH 1/3] Initial plan


From 5fa51632da7416bd08577912876475e99e65151a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 18 Oct 2025 10:59:22 +0000
Subject: [PATCH 2/3] Add input-group-sample-7 demonstrating correct id and for
 attributes

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>
---
 .../data-entries/data-entries-routes-data.ts  |  1 +
 src/app/data-entries/data-entries.routes.ts   |  6 ++
 .../input-group-sample-7.component.html       | 56 +++++++++++++++++++
 .../input-group-sample-7.component.scss       | 26 +++++++++
 .../input-group-sample-7.component.ts         | 12 ++++
 5 files changed, 101 insertions(+)
 create mode 100644 src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.html
 create mode 100644 src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.scss
 create mode 100644 src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.ts

diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index c6d537969..b553ba28d 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/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" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index 665bf7c9e..970ccc428 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/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'],
diff --git a/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.html b/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.html
new file mode 100644
index 000000000..20db70475
--- /dev/null
+++ b/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>
diff --git a/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.scss b/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.scss
new file mode 100644
index 000000000..81581c97d
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.ts b/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.ts
new file mode 100644
index 000000000..5e158491d
--- /dev/null
+++ b/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 { }

From 18b337d120237a0583593e2cbe8d7658aeb95618 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 18 Oct 2025 11:01:10 +0000
Subject: [PATCH 3/3] Add test file for input-group-sample-7

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>
---
 .../input-group-sample-7.component.spec.ts    | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.spec.ts

diff --git a/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.spec.ts b/src/app/data-entries/input-group/input-group-sample-7/input-group-sample-7.component.spec.ts
new file mode 100644
index 000000000..4e456d68d
--- /dev/null
+++ b/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();
+  });
+});