angular / angular/components

feat(mat-calendar): Automatically reposition "close calendar" button if it is offscreen

Open
#30,351 3 comments 0 reactions 0 assignees View on GitHub
area: material/datepicker P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

When using keyboard navigation, the "close calendar" button is placed at the bottom of the calendar after tabbing through the other interactive elements in the component. If this button would be positioned offscreen, it should be repositioned into view to improve accessibility.

### Use Case

A user may increase the browser size to 200%, or the calendar may just be positioned toward the bottom of the screen, which may cause this close button to render offscreen when displayed.

Contributor guide

Open the contributing guide

Research direction

Start with the Angular Material calendar component and its keyboard-navigation behavior, focusing on how the close calendar button is placed after tabbing through interactive elements. Reproduce the case at 200% browser zoom or with the calendar near the bottom of the screen, then verify that the focused close button is repositioned into view.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Feature
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.