diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 56129cbb2096..c3bb7bae9e0c 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/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 {
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
index a1a2e2494d5f..39a7f68f2dd3 100644
--- a/src/material/datepicker/datepicker-base.ts
+++ b/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
diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
index b7343f46f3d0..5dbe68075210 100644
--- a/src/material/datepicker/datepicker-content.html
+++ b/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"