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

[bmayen]

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.

[santoshhalke]

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

[bmayen]

@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.

[mistrykaran91]

@crisbeto: Increasing the withViewportMargin to 36px in datepicker-base.ts will be good option ?