Skip to content

Commit ae50090

Browse files
committed
fixup! feat(@angular/cli): add initial set of signal form examples
1 parent 40f080a commit ae50090

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Apply these patterns to all forms in a production application. Accessibility is
2929

3030
- **`[class.invalid]`:** A class binding that applies a CSS class to an element when a condition is true. Here, it's used to style an input based on its validity.
3131
- **`touched` signal:** A signal on the `FieldState` that becomes `true` when the user has interacted with and then left the form control. This is useful for showing errors only after the user has had a chance to enter a value.
32-
- **`aria-describedby`:** An accessibility attribute that links a form control to the element that describes it, such as an error message. This allows screen readers to announce the error when the user focuses on the invalid input.
32+
- **`aria-errormessage`:** An accessibility attribute that links a form control to the element that contains its error message. This allows screen readers to announce the error when the user focuses on the invalid input.
3333
- **`submit()`:** An async helper function that manages the form's submission state and should be called from the submit event handler.
3434

3535
## Example Files
@@ -161,7 +161,7 @@ input.invalid {
161161

162162
- **Error Visibility:** Errors are only shown when a field is both `invalid` and `touched` (`@if (field().invalid() && field().touched())`). This provides a better user experience by not showing errors before the user has finished typing.
163163
- **Styling:** The `[class.invalid]` binding adds a red border to the input only when it's invalid and has been touched, providing clear visual feedback.
164-
- **Accessibility:** The `id` of the error message container is linked to the input via `aria-describedby`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.
164+
- **Accessibility:** The `id` of the error message container is linked to the input via `aria-errormessage`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.
165165

166166
## How to Use This Example
167167

0 commit comments

Comments
 (0)