Skip to content

Commit 5fa5163

Browse files
CopilotChronosSF
Copilot
and
ChronosSF
committed
Add input-group-sample-7 demonstrating correct id and for attributes
Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>
1 parent afb5bfe commit 5fa5163

5 files changed

Lines changed: 101 additions & 0 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export const dataEntriesRoutesData = {
5555
"input-group-sample-4": { displayName: "Input Group Hint", parentName: "Input Group" },
5656
"input-group-sample-5": { displayName: "Input Group Types", parentName: "Input Group" },
5757
"input-group-sample-6": { displayName: "Input Group Full Form", parentName: "Input Group" },
58+
"input-group-sample-7": { displayName: "Input Group Accessibility", parentName: "Input Group" },
5859
"input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
5960
"input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" },
6061
"reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" },

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { InputGroupSample3Component } from './input-group/input-group-sample-3/i
4545
import { InputGroupSample4Component } from './input-group/input-group-sample-4/input-group-sample-4.component';
4646
import { InputGroupSample5Component } from './input-group/input-group-sample-5/input-group-sample-5.component';
4747
import { InputGroupSample6Component } from './input-group/input-group-sample-6/input-group-sample-6.component';
48+
import { InputGroupSample7Component } from './input-group/input-group-sample-7/input-group-sample-7.component';
4849
import { InputGroupStyleComponent } from './input-group/input-group-styling/input-group-styling.component';
4950
import { InputGroupTailwindStyleComponent } from './input-group/input-group-tailwind-styling/input-group-tailwind-styling.component';
5051
import { InputTextSelectionComponent } from './input-group/input-text-selection/input-text-selection.component';
@@ -353,6 +354,11 @@ export const DataEntriesRoutes: Routes = [
353354
data: dataEntriesRoutesData['input-group-sample-6'],
354355
path: 'input-group-sample-6'
355356
},
357+
{
358+
component: InputGroupSample7Component,
359+
data: dataEntriesRoutesData['input-group-sample-7'],
360+
path: 'input-group-sample-7'
361+
},
356362
{
357363
component: InputGroupStyleComponent,
358364
data: dataEntriesRoutesData['input-group-style'],

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<article class="sample-column">
2+
<form>
3+
<!-- Example 1: Simple text input with correct id and for pairing -->
4+
<igx-input-group>
5+
<input igxInput id="fullName" name="fullName" type="text" />
6+
<label igxLabel for="fullName">Full Name</label>
7+
</igx-input-group>
8+
9+
<!-- Example 2: Email input with icon and correct id and for pairing -->
10+
<igx-input-group>
11+
<input igxInput id="emailAddress" name="emailAddress" type="email" />
12+
<label igxLabel for="emailAddress">Email Address</label>
13+
<igx-suffix>
14+
<igx-icon>email</igx-icon>
15+
</igx-suffix>
16+
</igx-input-group>
17+
18+
<!-- Example 3: Phone input with correct id and for pairing -->
19+
<igx-input-group>
20+
<input igxInput id="phoneNumber" name="phoneNumber" type="tel" />
21+
<label igxLabel for="phoneNumber">Phone Number</label>
22+
<igx-suffix>
23+
<igx-icon>phone</igx-icon>
24+
</igx-suffix>
25+
</igx-input-group>
26+
27+
<!-- Example 4: Required field with correct id and for pairing -->
28+
<igx-input-group>
29+
<input igxInput id="userName" name="userName" type="text" required="required" />
30+
<label igxLabel for="userName">Username</label>
31+
<igx-suffix>
32+
<igx-icon>person</igx-icon>
33+
</igx-suffix>
34+
</igx-input-group>
35+
</form>
36+
37+
<!-- Accessibility Information Section -->
38+
<div class="accessibility-info">
39+
<h4>Accessibility Best Practice</h4>
40+
<p>
41+
This sample demonstrates the correct use of <code>id</code> and <code>for</code> attributes
42+
for proper label-input association, which is essential for accessibility:
43+
</p>
44+
<ul>
45+
<li>Each <code>&lt;input&gt;</code> element has a unique <code>id</code> attribute</li>
46+
<li>The corresponding <code>&lt;label&gt;</code> has a <code>for</code> attribute that matches the input's <code>id</code></li>
47+
<li>This pairing ensures screen readers like JAWS and NVDA can properly announce labels</li>
48+
<li>It also allows users to click the label to focus the input, improving usability</li>
49+
</ul>
50+
<p>
51+
<strong>Note:</strong> The <code>for</code> attribute must match the <code>id</code> attribute,
52+
not the <code>name</code> attribute. Using <code>name</code> alone without <code>id</code> breaks
53+
screen reader functionality and fails HTML validation.
54+
</p>
55+
</div>
56+
</article>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.sample-column {
2+
max-width: 550px;
3+
}
4+
5+
.accessibility-info {
6+
margin-top: 20px;
7+
padding: 15px;
8+
background-color: #f0f8ff;
9+
border-left: 4px solid #0078d4;
10+
border-radius: 4px;
11+
font-size: 14px;
12+
line-height: 1.6;
13+
}
14+
15+
.accessibility-info h4 {
16+
margin-top: 0;
17+
color: #0078d4;
18+
font-size: 16px;
19+
}
20+
21+
.accessibility-info code {
22+
background-color: #e6e6e6;
23+
padding: 2px 6px;
24+
border-radius: 3px;
25+
font-family: monospace;
26+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
import { BaseInputGroupSampleComponent } from '../base-input.component';
3+
import { FormsModule } from '@angular/forms';
4+
import { IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxIconComponent, IgxSuffixDirective } from 'igniteui-angular';
5+
6+
@Component({
7+
selector: 'app-input-group-sample-7',
8+
styleUrls: ['./input-group-sample-7.component.scss'],
9+
templateUrl: './input-group-sample-7.component.html',
10+
imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxIconComponent, IgxSuffixDirective]
11+
})
12+
export class InputGroupSample7Component extends BaseInputGroupSampleComponent { }

0 commit comments

Comments
 (0)