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.

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

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

Open
bmayen opened this issue Jan 17, 2025 · 2 comments
Labels
area: material/datepicker P4 A relatively minor issue that is not relevant to core functions

Comments

@bmayen
Copy link

bmayen commented Jan 17, 2025

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.

@bmayen bmayen added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Jan 17, 2025
@santoshhalke
Copy link

Could i get any ref video or photo i want to work on it

@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: material/datepicker and removed feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Jan 21, 2025
@bmayen
Copy link
Author

bmayen commented Jan 21, 2025

@santoshhalke If you visit https://material.angular.io/components/datepicker/overview and scroll down a little so the calendar opens with its bottom edge aligned to the bottom of the screen, using keyboard tab navigation will cause the "clse calendar" button to appear offscreen.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/datepicker P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

No branches or pull requests

3 participants