Skip to content

Commit ea445f2

Browse files
fmalcherfmalcher
committed
feat: use direct aria attribute bindings
1 parent 4e2c589 commit ea445f2

3 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎src/app/registration-form-1/registration-form-1.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
77
<input
88
type="text"
99
[field]="registrationForm.username"
10-
[ariaInvalid]="ariaInvalidState(registrationForm.username())"
10+
[aria-invalid]="ariaInvalidState(registrationForm.username())"
1111
/>
1212
<app-form-error [fieldRef]="registrationForm.username" />
1313
</label>
@@ -19,7 +19,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
1919
<input
2020
type="number"
2121
[field]="registrationForm.age"
22-
[ariaInvalid]="ariaInvalidState(registrationForm.age())"
22+
[aria-invalid]="ariaInvalidState(registrationForm.age())"
2323
/>
2424
<app-form-error [fieldRef]="registrationForm.age" />
2525
</label>
@@ -36,8 +36,8 @@ <h1>Version 1: Getting Started with the Basics</h1>
3636
<input
3737
type="email"
3838
[field]="emailField"
39-
[ariaLabel]="'E-Mail ' + $index"
40-
[ariaInvalid]="ariaInvalidState(emailField())"
39+
[aria-label]="'E-Mail ' + $index"
40+
[aria-invalid]="ariaInvalidState(emailField())"
4141
/>
4242
<button type="button" (click)="removeEmail($index)">-</button>
4343
</div>
@@ -55,7 +55,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
5555
>I agree to the terms and conditions
5656
<input
5757
type="checkbox"
58-
[ariaInvalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions())"
58+
[aria-invalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions())"
5959
[field]="registrationForm.agreeToTermsAndConditions"
6060
/>
6161
</label>
@@ -66,7 +66,7 @@ <h1>Version 1: Getting Started with the Basics</h1>
6666
<button
6767
type="submit"
6868
[disabled]="registrationForm().submitting()"
69-
[ariaBusy]="registrationForm().submitting()"
69+
[aria-busy]="registrationForm().submitting()"
7070
>
7171
@if (registrationForm().submitting()) {
7272
Registering ...

‎src/app/registration-form-2/registration-form-2.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
1212
<input
1313
type="text"
1414
[field]="registrationForm.username"
15-
[ariaInvalid]="ariaInvalidState(registrationForm.username)"
15+
[aria-invalid]="ariaInvalidState(registrationForm.username)"
1616
/>
1717
@if (registrationForm.username().pending()) {
1818
<small>Checking availability ...</small>
@@ -27,7 +27,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
2727
<input
2828
type="number"
2929
[field]="registrationForm.age"
30-
[ariaInvalid]="ariaInvalidState(registrationForm.age)"
30+
[aria-invalid]="ariaInvalidState(registrationForm.age)"
3131
/>
3232
<app-form-error [fieldRef]="registrationForm.age" />
3333
</label>
@@ -40,7 +40,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
4040
type="password"
4141
autocomplete
4242
[field]="registrationForm.password.pw1"
43-
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
43+
[aria-invalid]="ariaInvalidState(registrationForm.password.pw1)"
4444
/>
4545
<app-form-error [fieldRef]="registrationForm.password.pw1" />
4646
</label>
@@ -50,7 +50,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
5050
type="password"
5151
autocomplete
5252
[field]="registrationForm.password.pw2"
53-
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
53+
[aria-invalid]="ariaInvalidState(registrationForm.password.pw2)"
5454
/>
5555
<app-form-error [fieldRef]="registrationForm.password.pw2" />
5656
</label>
@@ -68,8 +68,8 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
6868
<input
6969
type="email"
7070
[field]="emailField"
71-
[ariaLabel]="'E-Mail ' + $index"
72-
[ariaInvalid]="ariaInvalidState(emailField)"
71+
[aria-label]="'E-Mail ' + $index"
72+
[aria-invalid]="ariaInvalidState(emailField)"
7373
/>
7474
<button type="button" (click)="removeEmail($index)">-</button>
7575
</div>
@@ -99,7 +99,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
9999
>I agree to the terms and conditions
100100
<input
101101
type="checkbox"
102-
[ariaInvalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
102+
[aria-invalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
103103
[field]="registrationForm.agreeToTermsAndConditions"
104104
/>
105105
</label>
@@ -110,7 +110,7 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
110110
<button
111111
type="submit"
112112
[disabled]="registrationForm().submitting()"
113-
[ariaBusy]="registrationForm().submitting()"
113+
[aria-busy]="registrationForm().submitting()"
114114
>
115115
@if (registrationForm().submitting()) {
116116
Registering ...

‎src/app/registration-form-3/registration-form-3.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
1212
<input
1313
type="text"
1414
[field]="registrationForm.username"
15-
[ariaInvalid]="ariaInvalidState(registrationForm.username)"
15+
[aria-invalid]="ariaInvalidState(registrationForm.username)"
1616
/>
1717
@if (registrationForm.username().pending()) {
1818
<small>Checking availability ...</small>
@@ -30,7 +30,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
3030
<input
3131
type="number"
3232
[field]="registrationForm.age"
33-
[ariaInvalid]="ariaInvalidState(registrationForm.age)"
33+
[aria-invalid]="ariaInvalidState(registrationForm.age)"
3434
/>
3535
<app-form-error [fieldRef]="registrationForm.age" />
3636
</label>
@@ -43,7 +43,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
4343
type="password"
4444
autocomplete
4545
[field]="registrationForm.password.pw1"
46-
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw1)"
46+
[aria-invalid]="ariaInvalidState(registrationForm.password.pw1)"
4747
/>
4848
<app-form-error [fieldRef]="registrationForm.password.pw1" />
4949
</label>
@@ -53,7 +53,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
5353
type="password"
5454
autocomplete
5555
[field]="registrationForm.password.pw2"
56-
[ariaInvalid]="ariaInvalidState(registrationForm.password.pw2)"
56+
[aria-invalid]="ariaInvalidState(registrationForm.password.pw2)"
5757
/>
5858
<app-form-error [fieldRef]="registrationForm.password.pw2" />
5959
</label>
@@ -71,8 +71,8 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
7171
<input
7272
type="email"
7373
[field]="emailField"
74-
[ariaLabel]="'E-Mail ' + $index"
75-
[ariaInvalid]="ariaInvalidState(emailField)"
74+
[aria-label]="'E-Mail ' + $index"
75+
[aria-invalid]="ariaInvalidState(emailField)"
7676
/>
7777
<button type="button" (click)="removeEmail($index)">-</button>
7878
</div>
@@ -96,7 +96,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
9696
>I agree to the terms and conditions
9797
<input
9898
type="checkbox"
99-
[ariaInvalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
99+
[aria-invalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
100100
[field]="registrationForm.agreeToTermsAndConditions"
101101
/>
102102
</label>
@@ -107,7 +107,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
107107
<button
108108
type="submit"
109109
[disabled]="registrationForm().submitting()"
110-
[ariaBusy]="registrationForm().submitting()"
110+
[aria-busy]="registrationForm().submitting()"
111111
>
112112
@if (registrationForm().submitting()) {
113113
Registering ...

0 commit comments

Comments
 (0)