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

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

@@ -570,7 +570,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"