question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MatFormField should document error accessibility best practices

See original GitHub issue

Right now the only difference between text shown in <mat-hint> and in <mat-error> is the color. This is an accessibility issue because it may not be clear that a message being shown is marked as an error message.

I think that adding a marker directly to <mat-error> would be too opinionated for Angular Material, but we should document a best practice saying that applications should add some sort of marker, such as text or an icon, indicating that the contents of <mat-error> represent an error message.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jelbourncommented, May 10, 2021

Precisely, yes.

0reactions
angular-automatic-lock-bot[bot]commented, Jun 25, 2021

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

User Notification | Web Accessibility Initiative (WAI) | W3C
In particular, error messages should be easy to understand and should ... These tutorials provide best-practice guidance on implementing accessibility in ...
Read more >
Accessibility in Angular
This page discusses best practices for designing Angular applications that work well for all ... You can see MatFormField as an example of...
Read more >
Angular Material Form Validation, Input, Datepicker and Modal
In this article, you will learn how to implement Angular Material Form Validation by using input and datepicker components.
Read more >
Dynamically create a <mat-error> component and have it be ...
I've tried this before - MatFormField picks up MatError s via ContentChildren . Since it's content projection, dynamically adding or ...
Read more >
mat-form-field does not remove mat-form-field-invalid class on ...
To do that, you need to get access to the FormGroupDirective which binds the FormGroup to the form and then call resetForm() instead...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found