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(material/datepicker): Voiceover Loses Focus when pressing Page Down key #24330

Closed
zarend opened this issue Feb 1, 2022 · 4 comments
Closed

bug(material/datepicker): Voiceover Loses Focus when pressing Page Down key #24330

zarend opened this issue Feb 1, 2022 · 4 comments
Assignees
@zarend
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker
Projects
Datepicker Accessibility

Comments

@zarend
Copy link
Contributor

zarend commented Feb 1, 2022 •
edited by Splaktar

When navigating the calendar with VoiceOver enabled, pressing Page Down causes the screenreader focus to move to the entire calendar, instead of stay on an individual date.

Reproduction

Steps to reproduce:

  1. With Screenreader enabled, Open the datepicker expands in a browser and navigate to the Basic Datepicker Demo.
  2. Click on the Calendar button to open the datepicker
  3. navigate to January 28, 2022
  4. (VoiceOver reads "January 28, 2022". the cell for Jan 28, 2022 has blue focus outline and black voiceover outline
  5. Press PageDown
  6. (VoiceOver reads "February, 2022". The Cell for Feb 28, 2022 has blue focus outline. Voiceover's black outline is around the entire box. Voiceover should read "February 28, 2022".

Expected Behavior

Voiceover reads "February 28, 2022".

Actual Behavior

voiceover reads "February, 2022"

Environment

Operating System | macOS Monterey 12.1 (21C52)
Browser | Chrome Version 97.0.4692.99 (Official Build) (x86_64), Safari Version 15.3 (17612.4.9.1.5)
Screenreader | VoiceOver

jan-28-2022-.feb.mov
Additional Notes

This is copied from an internal bug report found during a11y testing.
@zarend zarend added the needs triage This issue needs to be triaged by the team label Feb 1, 2022
@zarend zarend changed the title bug(COMPONENT): TITLE bug(material/datepicker): Voiceover Loses Focus when pressing Page Down key Feb 1, 2022
@zarend zarend added Accessibility This issue is related to accessibility (a11y) area: material/datepicker and removed needs triage This issue needs to be triaged by the team labels Feb 1, 2022
@zarend zarend added this to Not started in Datepicker Accessibility via automation Feb 1, 2022
@zarend
Copy link
Contributor Author

zarend commented Feb 1, 2022

@Splaktar I'm stumped on this one. I'm curious if you've come across anything similar to this? This seems vaguely familiar to problems we've had with setting focus and screenreader announcements when opening dialogs?

My current theory, is that VoiceOver gets confused when the focused element is removed from the DOM, which causes it to focus on the entire table.

zarend added a commit to zarend/components that referenced this issue Feb 2, 2022
@zarend
fix(material/datepicker) debugging VoiceOver not reading date on Page…
5728dfb 
…Down

Do not merge this pls. Debugging issue angular#2430.

There seems to be two issues

1. The screenreader focus doesn't not match the browser focus
2. the aria-live region is interfering with reading the focused element

Adds a timeout to fix #1, and removes the aria-live region to fix angular#2. This is not the final solution, requires more investigation...

Relates to angular#24330
@zarend
Copy link
Contributor Author

zarend commented Feb 2, 2022

After talking to @crisbeto , looks like the aria-live region is interfering with announcing the calendar body. I'll keep looking into this...

@zarend zarend self-assigned this Feb 2, 2022
@zarend zarend mentioned this issue Feb 2, 2022
Closed
@Splaktar
Copy link
Member

Splaktar commented Feb 3, 2022

It sounds like you are on the right track. I don't think that I recall any problems (or solutions) to something similar.

zarend added a commit to zarend/components that referenced this issue Feb 10, 2022
@zarend
fix(material/datepicker) debugging VoiceOver not reading date on Page…
fabafac 
…Down

Do not merge this pls. Debugging issue angular#2430.

There seems to be two issues

1. The screenreader focus doesn't not match the browser focus
2. the aria-live region is interfering with reading the focused element

Adds a timeout to fix #1, and removes the aria-live region to fix angular#2. This is not the final solution, requires more investigation...

Relates to angular#24330
zarend added a commit to zarend/components that referenced this issue Feb 11, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
3f294ef 
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
@zarend zarend mentioned this issue Feb 11, 2022
Merged
@zarend zarend moved this from Not started to In progress (review, presubmit) in Datepicker Accessibility Feb 11, 2022
zarend added a commit to zarend/components that referenced this issue Feb 14, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
9ef8e59 
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
zarend added a commit to zarend/components that referenced this issue Feb 15, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
5939b36 
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
zarend added a commit to zarend/components that referenced this issue Feb 24, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
903b632 
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
zarend added a commit to zarend/components that referenced this issue Feb 25, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
294ac38 
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
zarend added a commit to zarend/components that referenced this issue Feb 25, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
5188119 
Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue angular#24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until angular#24397 is merged.

Address angular#24330.
zarend added a commit to zarend/components that referenced this issue Mar 2, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
94605e5 
Add a timeout before manually focusing cells on the calendar. This seems
to fix an issue where Voiceover loses focus when pressing the
PageDown/PageUp keys.

Fixes angular#24330.
zarend added a commit to zarend/components that referenced this issue Mar 3, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
353a900 
Add a timeout before manually focusing cells on the calendar. This seems
to fix an issue where Voiceover loses focus when pressing the
PageDown/PageUp keys.

Fixes angular#24330.
zarend added a commit to zarend/components that referenced this issue Mar 4, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown
bd9d4e1 
Add a timeout before programatically focusing cells on the calendar. This seems
to fix an issue where Voiceover loses focus when pressing the
PageDown/PageUp keys.

Fixes angular#24330.
@zarend zarend closed this as completed in 6b4f2bf Mar 14, 2022
Datepicker Accessibility automation moved this from In progress (review, presubmit) to Done Mar 14, 2022
zarend added a commit that referenced this issue Mar 14, 2022
@zarend
fix(material/datepicker): fix Voiceover losing focus on PageDown (#24399
dfef173 
)

Add a timeout before programatically focusing cells on the calendar. This seems
to fix an issue where Voiceover loses focus when pressing the
PageDown/PageUp keys.

Fixes #24330.

(cherry picked from commit 6b4f2bf)
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@zarend @forsti0506
fix(material/datepicker): fix Voiceover losing focus on PageDown (ang…
a7596f9 
…ular#24399)

Add a timeout before programatically focusing cells on the calendar. This seems
to fix an issue where Voiceover loses focus when pressing the
PageDown/PageUp keys.

Fixes angular#24330.
@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 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@zarend zarend

Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker
Projects
Datepicker Accessibility
Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Splaktar @zarend