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): navigating with ChromeVox keyboard shortcuts does not update selected date #23483

Closed
zarend opened this issue Aug 27, 2021 · 5 comments · Fixed by #24384
Closed

bug(datepicker): navigating with ChromeVox keyboard shortcuts does not update selected date #23483

zarend opened this issue Aug 27, 2021 · 5 comments · Fixed by #24384
Assignees
@zarend
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@zarend
Copy link
Contributor

zarend commented Aug 27, 2021 •
edited
Loading

Reproduction

Steps to reproduce:

  1. Open the Datepicker Examples
  2. Go to the "Datepicker action buttons" demo
  3. Activate "Open calendar" button
  4. Linear navigate forward (Launcher + Right Arrow in ChromeOS)
  5. press space

Expected Behavior

It behaves the same as pressing the right arrow key. It highlights the next day and selects the next day on closing.

Actual Behavior

Screenreader announces the next day, but does not select that day when closing

Environment

OS| Browser | Screen reader
ChromeOS | Google Chrome 91.0.4472.167 | ChromeVox

Additional Notes

This is copied from an internal bug report found during a11y testing.
@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 labels Aug 27, 2021
@zarend
Copy link
Contributor Author

zarend commented Aug 27, 2021

Here's a repro
https://user-images.githubusercontent.com/7720245/131187430-e99e7d08-a572-4bec-85a6-5f6278416c13.mp4

@zarend
Copy link
Contributor Author

zarend commented Aug 27, 2021

I can also repro on NVDA using the table specific shortcut keys – Ctrl + Alt + right arrow, Ctrl + Alt + left arrow, etc.

@zarend
Copy link
Contributor Author

zarend commented Sep 10, 2021

This works on other datepickers, such as the Light Design React datepicker, which also uses a table with role=grid. It also works on another internal datepicker. That means this is something we should be able to fix.

zarend added a commit to zarend/components that referenced this issue Dec 21, 2021
@zarend
fix(material/datepicker): update active date on focus
10d5357 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 7, 2022
@zarend
fix(material/datepicker): update active date on focus
5c4e4ca 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
@zarend zarend mentioned this issue Jan 7, 2022
Closed
zarend added a commit to zarend/components that referenced this issue Jan 7, 2022
@zarend
fix(material/datepicker): update active date on focus
906db9e 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 10, 2022
@zarend
fix(material/datepicker): update active date on focus
9dc7040 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Addresses angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 10, 2022
@zarend
fix(material/datepicker): update active date on focus
28d1cc0 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Addresses angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 14, 2022
@zarend
fix(material/datepicker): update active date on focus
ddfd299 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Addresses angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 14, 2022
@zarend
fix(material/datepicker): update active date on focus
42e7b8e 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Addresses angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 14, 2022
@zarend
fix(material/datepicker): update active date on focus
bb41ac8 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Addresses angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 14, 2022
@zarend
fix(material/datepicker): update active date on focus
194ec1b 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Addresses angular#23483
@Splaktar Splaktar changed the title bug(datepicker): navigating with ChromeVox keyboard shortcuts does not updated selected date bug(datepicker): navigating with ChromeVox keyboard shortcuts does not update selected date Jan 20, 2022
@Splaktar Splaktar mentioned this issue Jan 20, 2022
Closed
@Splaktar
Copy link
Member

This may be related to this newly opened issue.

zarend added a commit to zarend/components that referenced this issue Jan 26, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
0ab736c 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Jan 26, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
5b3f379 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 2, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
f14b23a 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 4, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
e35faa8 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 4, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
8152864 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 5, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
cb9b201 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 5, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
782f893 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 5, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
0805774 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit to zarend/components that referenced this issue Feb 5, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar cell
e82f7a6 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
zarend added a commit that referenced this issue Feb 7, 2022
@zarend
fix(material/datepicker): update active date on focusing a calendar c…
a764e6a 
…ell (#24279)

When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes #23483

(cherry picked from commit 052b97d)
@zarend zarend closed this as completed in 052b97d Feb 7, 2022
zarend added a commit to zarend/components that referenced this issue Feb 9, 2022
@zarend
fix(material/datepicker): update active date on focusing a cell
32a1514 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Note that this is the second attempt at this. First attempt was angular#24279,
which was reverted in angular#24380 due to an internal issue.

Fixes angular#23483
@zarend zarend mentioned this issue Feb 9, 2022
Merged
zarend added a commit that referenced this issue Feb 14, 2022
@zarend
fix(material/datepicker): update active date on focusing a cell (#24384)
15774a9 
When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Note that this is the second attempt at this. First attempt was #24279,
which was reverted in #24380 due to an internal issue.

Fixes #23483
amysorto pushed a commit to amysorto/components that referenced this issue Feb 15, 2022
@zarend @amysorto
fix(material/datepicker): update active date on focusing a calendar c…
f58269d 
…ell (angular#24279)

When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
amysorto pushed a commit to amysorto/components that referenced this issue Feb 15, 2022
@zarend @amysorto
fix(material/datepicker): update active date on focusing a cell (angu…
bea8cfb 
…lar#24384)

When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Note that this is the second attempt at this. First attempt was angular#24279,
which was reverted in angular#24380 due to an internal issue.

Fixes angular#23483
@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 Mar 10, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@zarend @forsti0506
fix(material/datepicker): update active date on focusing a calendar c…
b136162 
…ell (angular#24279)

When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Fixes angular#23483
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@zarend @forsti0506
fix(material/datepicker): update active date on focusing a cell (angu…
716b334 
…lar#24384)

When a a date cell on the calendar recieves focus, set the active date
to that cell. This ensures that the active date matches the date with
browser focus.

Previously, we set the active date on keydown and click, but that was
problematic for screenreaders. That's because many screenreaders trigger
a focus event instead of a keydown event when using screenreader
specific navigation (VoiceOver, Chromevox, NVDA).

Note that this is the second attempt at this. First attempt was angular#24279,
which was reverted in angular#24380 due to an internal issue.

Fixes angular#23483
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 P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@Splaktar @zarend