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.

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

fix(material/datepicker): datepicker doesn't announce newly selected range in firefox #28529

Merged

Conversation

essjay05
Copy link
Contributor

@essjay05 essjay05 commented Feb 2, 2024

Fixes a bug in the Angular Material component where when the selected year range is updated by moving forward to the next range or by moving to the previous range the screenreader announces the original date range rather than the newly selected date range. This is because the label class was removing the updated value from the Firefox accessibility tree.

Fixes #28360

@essjay05
Copy link
Contributor Author

essjay05 commented Feb 2, 2024

Before screencast:
https://screencast.googleplex.com/cast/NjA1Mzg0MjEyMTY1NDI3MnxkYjE1OThkMy01MQ

After screencast:
https://screencast.googleplex.com/cast/NTkyMTk0Njc3OTc3OTA3MnxhYWIxYjI3ZS1kMg
https://screencast.googleplex.com/cast/NTUxMTYzMzEwMjE3NjI1NnxjYTIzZjYzMy01OQ

Note: tested successful description updates after changes on Safari (VoiceOver), Chrome (VoiceOver), Firefox (VoiceOver), Firefox (NVDA).

Copy link
Contributor

@zarend zarend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello, it would be good to have a code comment explaining why the label is included in a11y tree.

Could you file an issue report on Firefox for this? @essjay05 looked together and were unable to make a minimal reproduction. We can use our Stackblitz environment to create a reproduction for the issue report. Out Stackblitz template is at https://stackblitz.com/fork/components-issue

@essjay05
Copy link
Contributor Author

Hello, it would be good to have a code comment explaining why the label is included in a11y tree.

Could you file an issue report on Firefox for this? @essjay05 looked together and were unable to make a minimal reproduction. We can use our Stackblitz environment to create a reproduction for the issue report. Out Stackblitz template is at https://stackblitz.com/fork/components-issue

Sounds good. Will add the note and file an issue report in Firefox.

…'t announce selected year range

Fixes a bug in the Angular Material  component where when the selected year range is
updated by moving foward to the next range or by moving to the previous range the screenreader
announces the original date range rather than the newly selected date range. This because the
 class was removing the new value from the Firefox accessibility tree.

Fixes angular#28360
@essjay05 essjay05 force-pushed the fix-datepicker-screenreader-aria-live-bug branch from 569463b to 2227150 Compare February 15, 2024 17:44
@zarend zarend added Accessibility This issue is related to accessibility (a11y) area: material/datepicker dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Feb 15, 2024
Copy link

github-actions bot commented Feb 15, 2024

Deployed dev-app for 62f5a68 to: https://ng-dev-previews-comp--pr-angular-components-28529-dev-s03a4tjk.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

…r doesn't announce selected year range

Adds comment in html file to connect the filed Firefox issue with the workaround.

Fixes angular#28360
@essjay05 essjay05 force-pushed the fix-datepicker-screenreader-aria-live-bug branch from f8adcd1 to 62f5a68 Compare February 15, 2024 23:05
@zarend zarend added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Mar 4, 2024
@zarend zarend removed request for crisbeto and mmalerba March 5, 2024 00:29
@zarend zarend merged commit c72add6 into angular:main Mar 5, 2024
27 of 28 checks passed
zarend pushed a commit that referenced this pull request Mar 5, 2024
…range in firefox (#28529)

* fix(material/datepicker): multi-year view changes in datepicker doesn't announce selected year range

Fixes a bug in the Angular Material  component where when the selected year range is
updated by moving foward to the next range or by moving to the previous range the screenreader
announces the original date range rather than the newly selected date range. This because the
 class was removing the new value from the Firefox accessibility tree.

Fixes #28360

* !fixup fix(material/datepicker): multi-year view changes in datepicker doesn't announce selected year range

Adds comment in html file to connect the filed Firefox issue with the workaround.

Fixes #28360

(cherry picked from commit c72add6)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker area: material/datepicker dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(Datepicker): In multi-year view, date picker doesnt announce selected year range
2 participants