fix(material/datepicker): a couple of accessibility issues in touch UI mode (#21228)

Resolves the following accessibility issues when the datepicker is in touch UI mode:
* Focus was going directly to the close button, because that's the first element
that the dialog's focus trap was running into. I've disabled the automatic
focus redirection since the calendar has its own.
* The calendar close button for screen readers was off-screen, because the
dialog container has `position: static` and `overflow: auto`.

Apart from the two issues above, I've also made it so the screen reader button's
theme color matches the one of the calendar. This is mostly so the button
doesn't look out of place if the calendar has a different theme and the user
tabs into it.

(cherry picked from commit f7bd224)

Author: crisbeto

src/material/datepicker/calendar-body.scss

@@ -185,6 +185,12 @@ $mat-calendar-range-end-body-cell-size:
   }
 }
 
+// Allows for the screen reader close button to be seen in touch UI mode.
+.mat-datepicker-dialog .mat-dialog-container {
+  position: relative;
+  overflow: visible;
+}
+
 @include cdk-high-contrast(active, off) {
   .mat-datepicker-popup:not(:empty),
   .mat-calendar-body-selected {

src/material/datepicker/datepicker-base.ts

@@ -544,7 +544,10 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
       maxWidth: '80vw',
       maxHeight: '',
       position: {},
-      autoFocus: true,
+
+      // Disable the dialog's automatic focus capturing, because it'll go to the close button
+      // automatically. The calendar will move focus on its own once it renders.
+      autoFocus: false,
 
       // `MatDialog` has focus restoration built in, however we want to disable it since the
       // datepicker also has focus restoration for dropdown mode. We want to do this, in order

src/material/datepicker/datepicker-content.html

@@ -22,7 +22,7 @@
   <button
     type="button"
     mat-raised-button
-    color="primary"
+    [color]="color || 'primary'"
     class="mat-datepicker-close-button"
     [class.cdk-visually-hidden]="!_closeButtonFocused"
     (focus)="_closeButtonFocused = true"