diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts
index 26c5680670b7..a9ba94dd7d16 100644
--- a/src/material/datepicker/date-range-input.spec.ts
+++ b/src/material/datepicker/date-range-input.spec.ts
@@ -208,7 +208,7 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     tick();
 
-    const popup = document.querySelector('.cdk-overlay-pane')!;
+    const popup = document.querySelector('.cdk-overlay-pane .mat-datepicker-content-container')!;
     expect(popup).toBeTruthy();
     expect(popup.getAttribute('aria-labelledby')).toBe(label.getAttribute('id'));
   }));
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
index 2982e852c15e..d09208929e90 100644
--- a/src/material/datepicker/datepicker-base.ts
+++ b/src/material/datepicker/datepicker-base.ts
@@ -123,7 +123,6 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
 {
   private _subscriptions = new Subscription();
   private _model: MatDateSelectionModel<S, D>;
-
   /** Reference to the internal calendar component. */
   @ViewChild(MatCalendar) _calendar: MatCalendar<D>;
 
@@ -154,6 +153,9 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
   /** Portal with projected action buttons. */
   _actionsPortal: TemplatePortal | null = null;
 
+  /** Id of the label for the `role="dialog"` element. */
+  _dialogLabelId: string | null;
+
   constructor(
     elementRef: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
@@ -622,6 +624,7 @@ export abstract class MatDatepickerBase<
     instance.datepicker = this;
     instance.color = this.color;
     instance._actionsPortal = this._actionsPortal;
+    instance._dialogLabelId = this.datepickerInput.getOverlayLabelId();
   }
 
   /** Opens the overlay with the calendar. */
@@ -629,7 +632,6 @@ export abstract class MatDatepickerBase<
     this._destroyOverlay();
 
     const isDialog = this.touchUi;
-    const labelId = this.datepickerInput.getOverlayLabelId();
     const portal = new ComponentPortal<MatDatepickerContent<S, D>>(
       MatDatepickerContent,
       this._viewContainerRef,
@@ -647,16 +649,6 @@ export abstract class MatDatepickerBase<
         panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`,
       }),
     ));
-    const overlayElement = overlayRef.overlayElement;
-    overlayElement.setAttribute('role', 'dialog');
-
-    if (labelId) {
-      overlayElement.setAttribute('aria-labelledby', labelId);
-    }
-
-    if (isDialog) {
-      overlayElement.setAttribute('aria-modal', 'true');
-    }
 
     this._getCloseStream(overlayRef).subscribe(event => {
       if (event) {
diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
index 182377885cf7..2c4b931305fd 100644
--- a/src/material/datepicker/datepicker-content.html
+++ b/src/material/datepicker/datepicker-content.html
@@ -1,5 +1,8 @@
 <div
   cdkTrapFocus
+  role="dialog"
+  [attr.aria-modal]="true"
+  [attr.aria-labelledby]="_dialogLabelId ?? undefined"
   class="mat-datepicker-content-container"
   [class.mat-datepicker-content-container-with-custom-header]="datepicker.calendarHeaderComponent"
   [class.mat-datepicker-content-container-with-actions]="_actionsPortal">
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index 40835b3b921a..9f8bccd39ba6 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/src/material/datepicker/datepicker.spec.ts
@@ -236,7 +236,7 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
         flush();
 
-        const popup = document.querySelector('.cdk-overlay-pane')!;
+        const popup = document.querySelector('.mat-datepicker-content-container')!;
         expect(popup).toBeTruthy();
         expect(popup.getAttribute('role')).toBe('dialog');
       }));
@@ -254,7 +254,9 @@ describe('MatDatepicker', () => {
           fixture.detectChanges();
           flush();
 
-          const popup = document.querySelector('.cdk-overlay-pane')!;
+          const popup = document.querySelector(
+            '.cdk-overlay-pane .mat-datepicker-content-container',
+          )!;
           expect(popup).toBeTruthy();
           expect(popup.getAttribute('aria-labelledby')).toBe('test-label');
         }),
@@ -1405,7 +1407,9 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
         flush();
 
-        const popup = document.querySelector('.cdk-overlay-pane')!;
+        const popup = document.querySelector(
+          '.cdk-overlay-pane .mat-datepicker-content-container',
+        )!;
         expect(popup).toBeTruthy();
         expect(popup.getAttribute('aria-labelledby')).toBe(label.getAttribute('id'));
       }));
diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md
index 2ac076f96518..4d3a353d8c48 100644
--- a/tools/public_api_guard/material/datepicker.md
+++ b/tools/public_api_guard/material/datepicker.md
@@ -433,6 +433,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extend
     comparisonEnd: D | null;
     comparisonStart: D | null;
     datepicker: MatDatepickerBase<any, S, D>;
+    _dialogLabelId: string | null;
     // (undocumented)
     _getSelected(): D | DateRange<D> | null;
     // (undocumented)