angular / angular/components

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

Open
#22,883 4 comments 1 reaction 0 assignees View on GitHub
Accessibility area: material/datepicker P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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

Contributor guide

Open the contributing guide

Research direction

Reproduce the problem at the Material datepicker examples URL by opening example 1 and navigating to the selected date with keyboard arrows. Inspect the date range picker implementation and its focus styling; done means the selected date has a visible focus indicator in addition to its background color.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.