Skip to content

Commit d1743b9

Browse files
amysortowagnermaciel
authored andcommitted
docs(material/input): Add information about error messages and color to accessibility section (#22772)
(cherry picked from commit c4ff910)
1 parent bdf2f7a commit d1743b9

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material/input/input.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,20 @@ for detecting when an input becomes autofilled and changing the appearance of th
8888

8989
The `matInput` directive works with native `<input>` to provide an accessible experience.
9090

91+
#### Aria attributes
92+
9193
If the containing `<mat-form-field>` has a label it will automatically be used as the `aria-label`
9294
for the `<input>`. However, if there's no label specified in the form field, `aria-label`,
9395
`aria-labelledby` or `<label for=...>` should be added.
9496

97+
#### Errors and hints
98+
9599
Any `mat-error` and `mat-hint` are automatically added to the input's `aria-describedby` list, and
96100
`aria-invalid` is automatically updated based on the input's validity state.
97101

102+
When conveying an error, be sure to not rely soley on color. In the message itself, you can use an
103+
icon or text such as "Error:" to indicate the message is an error message.
104+
98105
### Troubleshooting
99106

100107
#### Error: Input type "..." isn't supported by matInput

0 commit comments

Comments
 (0)