From 7d314a87bfe2cd75a7569341c4339442a3ad2352 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 25 Sep 2022 10:49:38 +0200
Subject: [PATCH] fix(material/dialog): aria-modal not being set

Fixes that `aria-modal` wasn't being set on the dialog container. We had a host binding for it already, but the config didn't have an `ariaModal` property. This likely got broken when the dialog was changed to be based on top of the CDK dialog.

Fixes #25676.

(cherry picked from commit 9d6cc6fe260c1cf7dabb67e0e8b1dc9e54807758)
---
 src/cdk/dialog/dialog-config.ts                     | 2 +-
 src/material-experimental/mdc-dialog/dialog.spec.ts | 2 ++
 src/material/dialog/dialog-config.ts                | 3 +++
 src/material/dialog/dialog.spec.ts                  | 2 ++
 tools/public_api_guard/material/dialog.md           | 1 +
 5 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/cdk/dialog/dialog-config.ts b/src/cdk/dialog/dialog-config.ts
index 9a37f05ee947..8451c86833af 100644
--- a/src/cdk/dialog/dialog-config.ts
+++ b/src/cdk/dialog/dialog-config.ts
@@ -93,7 +93,7 @@ export class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet =
   /** Dialog label applied via `aria-label` */
   ariaLabel?: string | null = null;
 
-  /** Whether this a modal dialog. Used to set the `aria-modal` attribute. */
+  /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
   ariaModal?: boolean = true;
 
   /**
diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index a0c383ab7b3e..08a4403c4796 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -115,6 +115,7 @@ describe('MDC-based MatDialog', () => {
     viewContainerFixture.detectChanges();
     let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
     expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
+    expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
   });
 
   it('should open a dialog with a template', () => {
@@ -135,6 +136,7 @@ describe('MDC-based MatDialog', () => {
 
     let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
     expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
+    expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
 
     dialogRef.close();
   });
diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts
index b0709eb26466..f21ad64efb15 100644
--- a/src/material/dialog/dialog-config.ts
+++ b/src/material/dialog/dialog-config.ts
@@ -104,6 +104,9 @@ export class MatDialogConfig<D = any> {
   /** Aria label to assign to the dialog element. */
   ariaLabel?: string | null = null;
 
+  /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
+  ariaModal?: boolean = true;
+
   /**
    * Where the dialog should focus on open.
    * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 428dd3b6f3af..dfc98c89a4ee 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -119,6 +119,7 @@ describe('MatDialog', () => {
     viewContainerFixture.detectChanges();
     const dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
     expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
+    expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
   });
 
   it('should open a dialog with a template', () => {
@@ -139,6 +140,7 @@ describe('MatDialog', () => {
 
     const dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
     expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
+    expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
 
     dialogRef.close();
   });
diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md
index cfdcc6202998..c7ee4cb3fb29 100644
--- a/tools/public_api_guard/material/dialog.md
+++ b/tools/public_api_guard/material/dialog.md
@@ -158,6 +158,7 @@ export class MatDialogConfig<D = any> {
     ariaDescribedBy?: string | null;
     ariaLabel?: string | null;
     ariaLabelledBy?: string | null;
+    ariaModal?: boolean;
     autoFocus?: AutoFocusTarget | string | boolean;
     backdropClass?: string | string[];
     closeOnNavigation?: boolean;