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(Datepicker): In multi-year view, date picker doesnt announce selected year range #28360

Closed
1 task done
Kmaczek opened this issue Jan 3, 2024 · 3 comments · Fixed by #28529
Closed
1 task done

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

Kmaczek opened this issue Jan 3, 2024 · 3 comments · Fixed by #28529
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P2 The issue is important to a large percentage of users, with a workaround

Comments

@Kmaczek
Copy link

Kmaczek commented Jan 3, 2024

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.2.7

Description

Steps to reproduce:

  1. Open multi year view.
    image
  2. Tab to previous (or next) arrow and press enter.
    image
  3. Observe that, displayed year range is updated, but it's not announced
  4. Tab back to the year range (incorrectly announced for firefox)
    image

image

Reproduction

Can be reproduced on documentation page: https://material.angular.io/components/datepicker/overview#accessibility with basic datepicker example (first one)
I checked it for versions 17.0.4 and 16.2.12, 15.2.9, 14.2.7 and 12.2.13

I used NVDA, Jaws, Firefox, Chrome

Expected Behavior

  • Related to Repro step no. 3: Announce change of year range.
    image

  • Related to Repro step no. 4: Announce '1992 to 2015'

Actual Behavior

  • Related to Repro step no. 3: Visual changes should be announced to the user. This doesn't happen since version 15.
    Happens for both JAWS/NVDA and Chrome/Firefox

  • Related to Repro step no. 4: its announcing previous range '2016 to 2039', instead announcing '1992 to 2015' according to displayed label. This happens for Firefox only.

Environment

  • Angular: 16.1.3 (any after 14)
  • CDK/Material: 16.1.3 (any after 14)
  • Browser(s): Chrome, Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@Kmaczek Kmaczek added the needs triage This issue needs to be triaged by the team label Jan 3, 2024
@zarend
Copy link
Contributor

zarend commented Jan 8, 2024

Hello, thank you for reporting. I can reproduce on NVDA with Firefox, but not on Chrome. Triaging as a Datepicker issue.

Environment

  • material.angular.io
  • Windows 10 Enterprise Version 22H2
  • Chrome Version 120.0.6099.199 (Official Build) (64-bit)
  • Firefox 121.0 (64-bit)
  • NVDA version 2022.3

-Zach

@zarend zarend 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/datepicker P2 The issue is important to a large percentage of users, with a workaround and removed needs triage This issue needs to be triaged by the team P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Jan 8, 2024
@Kmaczek
Copy link
Author

Kmaczek commented Jan 10, 2024 •
edited

Hi @zarend, it doesn't happen for NVDA indeed, but I was able to reproduce below with JAWS + Chrome/Firefox.

Related to Repro step no. 3: Visual changes should be announced to the user. This doesn't happen since version 15.
Happens for both JAWS /NVDA and Chrome/Firefox

material.angular.io
Windows 11 Pro Version 22H2
Chrome Version 120.0.6099.200 (Official Build) (64-bit)
Firefox 121.0.1 (64-bit)
JAWS Version 2023.2212.23 ILM

Pressed enter multiple times in this place, but year range is not announced.
obraz

essjay05 added a commit to essjay05/angular-components that referenced this issue Feb 2, 2024
@essjay05
fix(material/datepicker): multi-year view changes in datepicker doesn…
569463b 
…'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 mentioned this issue Feb 2, 2024
Merged
essjay05 added a commit to essjay05/angular-components that referenced this issue Feb 15, 2024
@essjay05
fix(material/datepicker): multi-year view changes in datepicker doesn…
dc51f9a 
…'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 added a commit to essjay05/angular-components that referenced this issue Feb 15, 2024
@essjay05
fix(material/datepicker): multi-year view changes in datepicker doesn…
2227150 
…'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 added a commit to essjay05/angular-components that referenced this issue Feb 15, 2024
@essjay05
!fixup fix(material/datepicker): multi-year view changes in datepicke…
62f5a68 
…r doesn't announce selected year range

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

Fixes angular#28360
zarend pushed a commit that referenced this issue Mar 5, 2024
@essjay05
fix(material/datepicker): datepicker doesn't announce newly selected …
c72add6 
…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
zarend pushed a commit that referenced this issue Mar 5, 2024
@essjay05 @zarend
fix(material/datepicker): datepicker doesn't announce newly selected …
ec6f8e2 
…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.
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
2 participants
@Kmaczek @zarend