Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(MatError): Screen reader doesn't announce errors shown after tabbing out of the field #29616

Open
1 task
clamli opened this issue Aug 20, 2024 · 0 comments · May be fixed by #29721
Open
1 task

bug(MatError): Screen reader doesn't announce errors shown after tabbing out of the field #29616

clamli opened this issue Aug 20, 2024 · 0 comments · May be fixed by #29721
Labels
Accessibility This issue is related to accessibility (a11y) area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@clamli
Copy link
Contributor

clamli commented Aug 20, 2024 •
edited
Loading

Is this a regression?

  • Yes, this behavior used to work in the previous version
    I lean towards uncheck this checkbox even though it works in the previous version, because I suspect the issue resides in either screen readers or browsers.

It looks like the cause of the issue is the MatError logic of handling live region, here is a raw HTML implementation that reflects the same behavior.

The previous version in which this bug was not present was

No response

Description

Some screen readers don't announce errors shown after tabbing out to the next interactive element.

The screen reader and browser combination that DOES announce the error after tabbing out

The screen reader and browser combination that DOES NOT announce the error after tabbing out

Reproduction

https://material.angular.io/components/form-field/overview#form-field-error
Steps to reproduce:

  1. Go to the example above
  2. Tab to and out of the form field with MatError using different screen reader and browser combinations and observe the announcement

Expected Behavior

The error message should always be announced by screen readers.

Actual Behavior

The error message is announced for NVDA + Chrome, JAWS + Chrome and JAWS + Firefox, but is not announced for NVDA + Firefox, VO + Chrome and VO + Firefox.

Environment

  • Angular:
  • CDK/Material: 18.2.0
  • Browser(s): Chrome, Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS
@clamli clamli added the needs triage This issue needs to be triaged by the team label Aug 20, 2024
@amysorto amysorto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) area: material/form-field and removed needs triage This issue needs to be triaged by the team labels Aug 26, 2024
DBowen33 added a commit to DBowen33/components that referenced this issue Sep 11, 2024
@DBowen33
fix(matarial/form-field): error text fix
e9228db 
fixed issue where certain screen reader and browser pairings do not recognize mat-error being inserted into
the DOM, changed it to where visibility is changing on the wrapper rather than adding and removing the
hint and error wrappers. the changing of visibility should be recognized by all browser and screen reader
pairings

Fixes angular#29616
@DBowen33 DBowen33 linked a pull request Sep 11, 2024 that will close this issue
Draft
DBowen33 added a commit to DBowen33/components that referenced this issue Sep 11, 2024
@DBowen33
fix(material/form-field): error text fix
a878e84 
fixed issue where certain screen reader and browser pairings do not recognize mat-error being inserted into
the DOM, changed it to where visibility is changing on the wrapper rather than adding and removing the
hint and error wrappers. the changing of visibility should be recognized by all browser and screen reader
pairings

Fixes angular#29616
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(matarial/form-field): error text fix DBowen33/components
2 participants
@amysorto @clamli