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(mat-date-range-picker): Focus indicator is not present for the selected date #22883

Open
sourabhsoni0711 opened this issue Jun 4, 2021 · 4 comments · May be fixed by #22972
Open

bug(mat-date-range-picker): Focus indicator is not present for the selected date #22883

sourabhsoni0711 opened this issue Jun 4, 2021 · 4 comments · May be fixed by #22972
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

@sourabhsoni0711
Copy link

Reproduction

Steps to reproduce:

  1. Open the URL https://material.angular.io/components/datepicker/examples
  2. Open date range picker in example 1
  3. Navigate to the selected date using keyboard arrow keys
  4. Observe that when focus is on selected date , user cannot understand where the current focus is.

Expected Behavior

Provide a focus indicator or drop shadow in addition to the background color change

Actual Behavior

Focus indicator is not present for the selected state of date's present inside date range picker. Hence it is difficult for the users to know where the focus is

Environment

  • Angular: 11.0.3
  • CDK/Material: 11.0.3
  • Browser(s): Chrome browser 90.0.4430.100
  • Operating System (e.g. Windows, macOS, Ubuntu): Google Chrome OS
@sourabhsoni0711 sourabhsoni0711 added the needs triage This issue needs to be triaged by the team label Jun 4, 2021
@crisbeto crisbeto added Accessibility This issue is related to accessibility (a11y) area: material/datepicker P4 A relatively minor issue that is not relevant to core functions has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team P4 A relatively minor issue that is not relevant to core functions labels Jun 8, 2021
@crisbeto crisbeto self-assigned this Jun 14, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 14, 2021
@crisbeto
fix(material/datepicker): add focus indication for selected date
6d2767f 
Currently there's no way to tell when the selected date in the calendar has focus. These changes reuse the styling from when the selected date is today (white circle inside the main circle).

Fixes angular#22883.
@crisbeto crisbeto linked a pull request Jun 14, 2021 that will close this issue
Open
@zarend
Copy link
Contributor

zarend commented Sep 16, 2022

Hello, Does enabling strong focus indicators fix this problem?
-Zach

@cjlawson02
Copy link

cjlawson02 commented Oct 10, 2022 •
edited
Loading

Reproducible on Windows but not macOS

This is a regression from Angular v12. Both v13 and v14 have this issue now

@mmalerba mmalerba removed the has pr label Dec 8, 2022
@zarend
Copy link
Contributor

zarend commented Jan 23, 2023

Confirming that I can repro on both Mac and Window

It's ambiguous if Jan 23 is both focused and select or only selected.
image

Environment:

  • 13.1 (22C65)
  • Chrome Version 109.0.5414.87 (Official Build) (x86_64)

@Andrew-Marks-Trisept
Copy link

Still an issue in Angular 18. See this example from https://material.angular.io/components/datepicker/overview:

Image

When the focus is on either the selected start date or the selected end date, there is no focus indicator at all.

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/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
Development

Successfully merging a pull request may close this issue.

fix(material/datepicker): add focus indication for selected date crisbeto/material2
6 participants
@crisbeto @cjlawson02 @zarend @mmalerba @sourabhsoni0711 @Andrew-Marks-Trisept