From d7cd3da1e9f910846dc55896bbe40f1709144870 Mon Sep 17 00:00:00 2001
From: tringakrasniqi <tkrasniqi@microsoft.com>
Date: Fri, 21 May 2021 07:31:28 +0200
Subject: [PATCH 1/5] Fix for blocking modal/dialog always having 'alertdialog'
 role

---
 .../react/src/components/Modal/Modal.base.tsx |  15 +-
 .../react/src/components/Modal/Modal.test.tsx |  45 +++
 .../react/src/components/Modal/Modal.types.ts |   8 +
 .../Modal/__snapshots__/Modal.test.tsx.snap   | 339 ++++++++++++++++++
 4 files changed, 406 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Modal/Modal.base.tsx b/packages/react/src/components/Modal/Modal.base.tsx
index 3fd2e09f81d7c..1d82f53525729 100644
--- a/packages/react/src/components/Modal/Modal.base.tsx
+++ b/packages/react/src/components/Modal/Modal.base.tsx
@@ -101,6 +101,7 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
       forceFocusInsideTrap,
       ignoreExternalFocusing,
       isBlocking,
+      isAlert,
       isClickableOutsideFocusTrap,
       isDarkOverlay,
       onDismiss,
@@ -228,6 +229,18 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
       [keepInBounds, internalState],
     );
 
+    /**
+     * Determines the modal role for accessibility
+     * The isModeless and isBlocking will be ignored only when isAlert is set
+     */
+    const getDialogRole = () => {
+      if (isAlert || isModeless === false || isBlocking) {
+        return 'alertdialog';
+      }
+
+      return 'dialog';
+    };
+
     const handleModalClose = (): void => {
       internalState.lastSetCoordinates = ZERO;
 
@@ -446,7 +459,7 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
       (isModalOpen && modalResponsiveMode! >= (responsiveMode || ResponsiveMode.small) && (
         <Layer ref={mergedRef} {...mergedLayerProps}>
           <Popup
-            role={isModeless || !isBlocking ? 'dialog' : 'alertdialog'}
+            role={getDialogRole()}
             aria-modal={!isModeless}
             ariaLabelledBy={titleAriaId}
             ariaDescribedBy={subtitleAriaId}
diff --git a/packages/react/src/components/Modal/Modal.test.tsx b/packages/react/src/components/Modal/Modal.test.tsx
index 61fe2915d7954..09db1755d8e75 100644
--- a/packages/react/src/components/Modal/Modal.test.tsx
+++ b/packages/react/src/components/Modal/Modal.test.tsx
@@ -89,4 +89,49 @@ describe('Modal', () => {
       },
     );
   });
+
+  it('renders AlertDialog role correctly', () => {
+    // Mock createPortal to capture its component hierarchy in snapshot output.
+    const ReactDOM = require('react-dom');
+    ReactDOM.createPortal = jest.fn(element => {
+      return element;
+    });
+
+    safeCreate(
+      <Modal isOpen={true} isAlert={true} className={'test-className'} containerClassName={'test-containerClassName'}>
+        Test Content
+      </Modal>,
+      component => {
+        expect(component!.toJSON()).toMatchSnapshot();
+
+        ReactDOM.createPortal.mockClear();
+      },
+    );
+  });
+
+  it('renders AlertDialog role with isModeless, isBlocking props correctly', () => {
+    // Mock createPortal to capture its component hierarchy in snapshot output.
+    const ReactDOM = require('react-dom');
+    ReactDOM.createPortal = jest.fn(element => {
+      return element;
+    });
+
+    safeCreate(
+      <Modal
+        isOpen={true}
+        isAlert={false}
+        isModeless={true}
+        isBlocking={true}
+        className={'test-className'}
+        containerClassName={'test-containerClassName'}
+      >
+        Test Content
+      </Modal>,
+      component => {
+        expect(component!.toJSON()).toMatchSnapshot();
+
+        ReactDOM.createPortal.mockClear();
+      },
+    );
+  });
 });
diff --git a/packages/react/src/components/Modal/Modal.types.ts b/packages/react/src/components/Modal/Modal.types.ts
index 15e3f4bd56b73..468b29230ef32 100644
--- a/packages/react/src/components/Modal/Modal.types.ts
+++ b/packages/react/src/components/Modal/Modal.types.ts
@@ -124,6 +124,14 @@ export interface IModalProps extends React.RefAttributes<HTMLDivElement>, IAcces
    */
   isModeless?: boolean;
 
+  /**
+   * Determines whether the dialog will be a Dialog or AlertDialog
+   * If this is true, then isBlocking and isModeless are ignored
+   *
+   * For more information regarding dialogs please see https://w3c.github.io/aria-practices/#alertdialog
+   */
+  isAlert?: boolean;
+
   /**
    * Optional class name to be added to the root class
    */
diff --git a/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 5dc4f45a14c1a..526a0dfed716c 100644
--- a/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -1,5 +1,344 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Modal renders AlertDialog role correctly 1`] = `
+<span
+  className="ms-layer"
+>
+  <div
+    className=
+        ms-Fabric
+        ms-Layer-content
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          color: #323130;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          visibility: visible;
+        }
+        & button {
+          font-family: inherit;
+        }
+        & input {
+          font-family: inherit;
+        }
+        & textarea {
+          font-family: inherit;
+        }
+    onBlur={[Function]}
+    onChange={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onDoubleClick={[Function]}
+    onDrag={[Function]}
+    onDragEnd={[Function]}
+    onDragEnter={[Function]}
+    onDragExit={[Function]}
+    onDragLeave={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+    onFocus={[Function]}
+    onInput={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseMove={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    onMouseUp={[Function]}
+    onSubmit={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      aria-modal={true}
+      onKeyDown={[Function]}
+      role="alertdialog"
+      style={
+        Object {
+          "outline": "none",
+          "overflowY": undefined,
+        }
+      }
+    >
+      <div
+        className=
+            ms-Modal
+            is-open
+            test-className
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background-color: transparent;
+              display: flex;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 100%;
+              justify-content: center;
+              opacity: 1;
+              pointer-events: auto;
+              position: fixed;
+              transition: opacity 0.267s;
+              width: 100%;
+            }
+        role="document"
+      >
+        <div
+          aria-hidden={true}
+          className=
+              ms-Overlay
+              ms-Overlay--dark
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-color: rgba(0,0,0,.4);
+                bottom: 0px;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                left: 0px;
+                position: absolute;
+                right: 0px;
+                top: 0px;
+              }
+              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                border: 1px solid WindowText;
+                opacity: 0;
+              }
+        />
+        <div
+          className=
+              ms-Dialog-main
+              test-containerClassName
+              {
+                background-color: #ffffff;
+                border-radius: 2px;
+                box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
+                box-sizing: border-box;
+                max-height: calc(100% - 32px);
+                max-width: calc(100% - 32px);
+                min-height: 176px;
+                min-width: 288px;
+                outline: 3px solid transparent;
+                overflow-y: auto;
+                position: relative;
+                text-align: left;
+              }
+          id="ModalFocusTrapZone0"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+        >
+          <div
+            aria-hidden={true}
+            data-is-visible={true}
+            style={
+              Object {
+                "pointerEvents": "none",
+                "position": "fixed",
+              }
+            }
+            tabIndex={0}
+          />
+          <div
+            className=
+                ms-Modal-scrollableContent
+                {
+                  flex-grow: 1;
+                  max-height: 100vh;
+                  overflow-y: auto;
+                }
+                @supports (-webkit-overflow-scrolling: touch){& {
+                  max-height: 768px;
+                }
+            data-is-scrollable={true}
+          >
+            Test Content
+          </div>
+          <div
+            aria-hidden={true}
+            data-is-visible={true}
+            style={
+              Object {
+                "pointerEvents": "none",
+                "position": "fixed",
+              }
+            }
+            tabIndex={0}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</span>
+`;
+
+exports[`Modal renders AlertDialog role with isModeless, isBlocking props correctly 1`] = `
+<span
+  className="ms-layer"
+>
+  <div
+    className=
+        ms-Fabric
+        ms-Layer-content
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          color: #323130;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          visibility: visible;
+        }
+        & button {
+          font-family: inherit;
+        }
+        & input {
+          font-family: inherit;
+        }
+        & textarea {
+          font-family: inherit;
+        }
+    onBlur={[Function]}
+    onChange={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onDoubleClick={[Function]}
+    onDrag={[Function]}
+    onDragEnd={[Function]}
+    onDragEnter={[Function]}
+    onDragExit={[Function]}
+    onDragLeave={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+    onFocus={[Function]}
+    onInput={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseMove={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    onMouseUp={[Function]}
+    onSubmit={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      aria-modal={false}
+      onKeyDown={[Function]}
+      role="alertdialog"
+      style={
+        Object {
+          "outline": "none",
+          "overflowY": undefined,
+        }
+      }
+    >
+      <div
+        className=
+            ms-Modal
+            is-open
+            test-className
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background-color: transparent;
+              display: flex;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 100%;
+              justify-content: center;
+              opacity: 1;
+              pointer-events: auto;
+              position: absolute;
+              transition: opacity 0.267s;
+              width: 100%;
+            }
+      >
+        <div
+          className=
+              ms-Dialog-main
+              test-containerClassName
+              {
+                background-color: #ffffff;
+                border-radius: 2px;
+                box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
+                box-sizing: border-box;
+                max-height: calc(100% - 32px);
+                max-width: calc(100% - 32px);
+                min-height: 176px;
+                min-width: 288px;
+                outline: 3px solid transparent;
+                overflow-y: auto;
+                position: relative;
+                text-align: left;
+                z-index: 1000000;
+              }
+          id="ModalFocusTrapZone0"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+        >
+          <div
+            aria-hidden={true}
+            data-is-visible={true}
+            style={
+              Object {
+                "pointerEvents": "none",
+                "position": "fixed",
+              }
+            }
+            tabIndex={0}
+          />
+          <div
+            className=
+                ms-Modal-scrollableContent
+                {
+                  flex-grow: 1;
+                  max-height: 100vh;
+                  overflow-y: auto;
+                }
+                @supports (-webkit-overflow-scrolling: touch){& {
+                  max-height: 768px;
+                }
+            data-is-scrollable={true}
+          >
+            Test Content
+          </div>
+          <div
+            aria-hidden={true}
+            data-is-visible={true}
+            style={
+              Object {
+                "pointerEvents": "none",
+                "position": "fixed",
+              }
+            }
+            tabIndex={0}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</span>
+`;
+
 exports[`Modal renders Draggable Modal correctly 1`] = `
 <span
   className="ms-layer"

From 8300c934017f6e98c85d841126ad26ea8655f956 Mon Sep 17 00:00:00 2001
From: tringakrasniqi <tkrasniqi@microsoft.com>
Date: Mon, 24 May 2021 12:28:51 +0200
Subject: [PATCH 2/5] Change files

---
 ...luentui-react-ac8491bb-f335-48e2-be2c-458dd83f06d9.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-ac8491bb-f335-48e2-be2c-458dd83f06d9.json

diff --git a/change/@fluentui-react-ac8491bb-f335-48e2-be2c-458dd83f06d9.json b/change/@fluentui-react-ac8491bb-f335-48e2-be2c-458dd83f06d9.json
new file mode 100644
index 0000000000000..99936f775fe62
--- /dev/null
+++ b/change/@fluentui-react-ac8491bb-f335-48e2-be2c-458dd83f06d9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Blocking Dialog/Modal always gets assigned role \"alertdialog\" when IsBlocking is true",
+  "packageName": "@fluentui/react",
+  "email": "tkrasniqi@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 3119de19bbd8daf896f816f5591916d8bb828fcc Mon Sep 17 00:00:00 2001
From: tringakrasniqi <tkrasniqi@microsoft.com>
Date: Tue, 25 May 2021 18:55:17 +0200
Subject: [PATCH 3/5] Updated react.api

---
 packages/react/etc/react.api.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
index 496df1ea8dd6a..940873d0cdaf1 100644
--- a/packages/react/etc/react.api.md
+++ b/packages/react/etc/react.api.md
@@ -5978,6 +5978,7 @@ export interface IModalProps extends React_2.RefAttributes<HTMLDivElement>, IAcc
     containerClassName?: string;
     dragOptions?: IDragOptions;
     enableAriaHiddenSiblings?: boolean;
+    isAlert?: boolean;
     isBlocking?: boolean;
     isDarkOverlay?: boolean;
     isModeless?: boolean;

From ec0c69dd15a0c65fe8b4cba94b02dc4b2b9a43fb Mon Sep 17 00:00:00 2001
From: tringakrasniqi <tkrasniqi@microsoft.com>
Date: Thu, 27 May 2021 14:50:27 +0200
Subject: [PATCH 4/5] Updated isAlert prop doc Changed the isAlert with default
 value

---
 .../react/src/components/Modal/Modal.base.tsx     | 15 ++-------------
 .../react/src/components/Modal/Modal.types.ts     |  4 ++--
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/components/Modal/Modal.base.tsx b/packages/react/src/components/Modal/Modal.base.tsx
index 1d82f53525729..9c428368efdf4 100644
--- a/packages/react/src/components/Modal/Modal.base.tsx
+++ b/packages/react/src/components/Modal/Modal.base.tsx
@@ -151,6 +151,7 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
     }));
 
     const { keepInBounds } = dragOptions || ({} as IDragOptions);
+    const isAlertRole = isAlert ?? (isBlocking && !isModeless);
 
     const layerClassName = layerProps === undefined ? '' : layerProps.className;
     const classNames = getClassNames(styles, {
@@ -229,18 +230,6 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
       [keepInBounds, internalState],
     );
 
-    /**
-     * Determines the modal role for accessibility
-     * The isModeless and isBlocking will be ignored only when isAlert is set
-     */
-    const getDialogRole = () => {
-      if (isAlert || isModeless === false || isBlocking) {
-        return 'alertdialog';
-      }
-
-      return 'dialog';
-    };
-
     const handleModalClose = (): void => {
       internalState.lastSetCoordinates = ZERO;
 
@@ -459,7 +448,7 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
       (isModalOpen && modalResponsiveMode! >= (responsiveMode || ResponsiveMode.small) && (
         <Layer ref={mergedRef} {...mergedLayerProps}>
           <Popup
-            role={getDialogRole()}
+            role={isAlertRole ? 'alertdialog' : 'dialog'}
             aria-modal={!isModeless}
             ariaLabelledBy={titleAriaId}
             ariaDescribedBy={subtitleAriaId}
diff --git a/packages/react/src/components/Modal/Modal.types.ts b/packages/react/src/components/Modal/Modal.types.ts
index 468b29230ef32..830bde14c0607 100644
--- a/packages/react/src/components/Modal/Modal.types.ts
+++ b/packages/react/src/components/Modal/Modal.types.ts
@@ -125,8 +125,8 @@ export interface IModalProps extends React.RefAttributes<HTMLDivElement>, IAcces
   isModeless?: boolean;
 
   /**
-   * Determines whether the dialog will be a Dialog or AlertDialog
-   * If this is true, then isBlocking and isModeless are ignored
+   * Determines the ARIA role of the dialog (alertdialog/dialog)
+   * If this is set, it will override the ARIA role determined by isBlocking and isModeless
    *
    * For more information regarding dialogs please see https://w3c.github.io/aria-practices/#alertdialog
    */

From 5c6ae454405178692dbd90968215c928a4d7489d Mon Sep 17 00:00:00 2001
From: tringakrasniqi <tkrasniqi@microsoft.com>
Date: Fri, 28 May 2021 13:16:13 +0200
Subject: [PATCH 5/5] Changed Modal tests and updated snapshots

---
 .../react/src/components/Modal/Modal.test.tsx |  60 +++-
 .../Modal/__snapshots__/Modal.test.tsx.snap   | 339 ------------------
 2 files changed, 55 insertions(+), 344 deletions(-)

diff --git a/packages/react/src/components/Modal/Modal.test.tsx b/packages/react/src/components/Modal/Modal.test.tsx
index 09db1755d8e75..ceac53a0402bc 100644
--- a/packages/react/src/components/Modal/Modal.test.tsx
+++ b/packages/react/src/components/Modal/Modal.test.tsx
@@ -5,6 +5,7 @@ import * as path from 'path';
 import { isConformant } from '../../common/isConformant';
 import { safeCreate } from '@fluentui/test-utilities';
 import { resetIds } from '../../Utilities';
+import { Popup } from '../Popup/Popup';
 
 describe('Modal', () => {
   beforeEach(() => {
@@ -90,7 +91,7 @@ describe('Modal', () => {
     );
   });
 
-  it('renders AlertDialog role correctly', () => {
+  it('renders a Modal with ARIA role alertDialog when isAlert is true ', () => {
     // Mock createPortal to capture its component hierarchy in snapshot output.
     const ReactDOM = require('react-dom');
     ReactDOM.createPortal = jest.fn(element => {
@@ -102,14 +103,14 @@ describe('Modal', () => {
         Test Content
       </Modal>,
       component => {
-        expect(component!.toJSON()).toMatchSnapshot();
-
+        const componentInstance = component.root;
+        expect(componentInstance.findByType(Popup).props.role).toBe('alertdialog');
         ReactDOM.createPortal.mockClear();
       },
     );
   });
 
-  it('renders AlertDialog role with isModeless, isBlocking props correctly', () => {
+  it('renders Modal with ARIA role dialog when isModeless and isBlocking are set to true', () => {
     // Mock createPortal to capture its component hierarchy in snapshot output.
     const ReactDOM = require('react-dom');
     ReactDOM.createPortal = jest.fn(element => {
@@ -128,8 +129,57 @@ describe('Modal', () => {
         Test Content
       </Modal>,
       component => {
-        expect(component!.toJSON()).toMatchSnapshot();
+        const componentInstance = component.root;
+        expect(componentInstance.findByType(Popup).props.role).toBe('dialog');
+        ReactDOM.createPortal.mockClear();
+      },
+    );
+  });
 
+  it('renders Modal with ARIA role dialog when isAlert is false', () => {
+    // Mock createPortal to capture its component hierarchy in snapshot output.
+    const ReactDOM = require('react-dom');
+    ReactDOM.createPortal = jest.fn(element => {
+      return element;
+    });
+
+    safeCreate(
+      <Modal
+        isOpen={true}
+        isAlert={false}
+        isBlocking={true}
+        className={'test-className'}
+        containerClassName={'test-containerClassName'}
+      >
+        Test Content
+      </Modal>,
+      component => {
+        const componentInstance = component.root;
+        expect(componentInstance.findByType(Popup).props.role).toBe('dialog');
+        ReactDOM.createPortal.mockClear();
+      },
+    );
+  });
+
+  it('renders Modal with ARIA role alertdialog when isBlocking is true', () => {
+    // Mock createPortal to capture its component hierarchy in snapshot output.
+    const ReactDOM = require('react-dom');
+    ReactDOM.createPortal = jest.fn(element => {
+      return element;
+    });
+
+    safeCreate(
+      <Modal
+        isOpen={true}
+        isBlocking={true}
+        className={'test-className'}
+        containerClassName={'test-containerClassName'}
+      >
+        Test Content
+      </Modal>,
+      component => {
+        const componentInstance = component.root;
+        expect(componentInstance.findByType(Popup).props.role).toBe('alertdialog');
         ReactDOM.createPortal.mockClear();
       },
     );
diff --git a/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 526a0dfed716c..5dc4f45a14c1a 100644
--- a/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/packages/react/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -1,344 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Modal renders AlertDialog role correctly 1`] = `
-<span
-  className="ms-layer"
->
-  <div
-    className=
-        ms-Fabric
-        ms-Layer-content
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          color: #323130;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          visibility: visible;
-        }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onContextMenu={[Function]}
-    onDoubleClick={[Function]}
-    onDrag={[Function]}
-    onDragEnd={[Function]}
-    onDragEnter={[Function]}
-    onDragExit={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onFocus={[Function]}
-    onInput={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseMove={[Function]}
-    onMouseOut={[Function]}
-    onMouseOver={[Function]}
-    onMouseUp={[Function]}
-    onSubmit={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchMove={[Function]}
-    onTouchStart={[Function]}
-  >
-    <div
-      aria-modal={true}
-      onKeyDown={[Function]}
-      role="alertdialog"
-      style={
-        Object {
-          "outline": "none",
-          "overflowY": undefined,
-        }
-      }
-    >
-      <div
-        className=
-            ms-Modal
-            is-open
-            test-className
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              background-color: transparent;
-              display: flex;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 100%;
-              justify-content: center;
-              opacity: 1;
-              pointer-events: auto;
-              position: fixed;
-              transition: opacity 0.267s;
-              width: 100%;
-            }
-        role="document"
-      >
-        <div
-          aria-hidden={true}
-          className=
-              ms-Overlay
-              ms-Overlay--dark
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                background-color: rgba(0,0,0,.4);
-                bottom: 0px;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                left: 0px;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-              }
-              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                border: 1px solid WindowText;
-                opacity: 0;
-              }
-        />
-        <div
-          className=
-              ms-Dialog-main
-              test-containerClassName
-              {
-                background-color: #ffffff;
-                border-radius: 2px;
-                box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
-                box-sizing: border-box;
-                max-height: calc(100% - 32px);
-                max-width: calc(100% - 32px);
-                min-height: 176px;
-                min-width: 288px;
-                outline: 3px solid transparent;
-                overflow-y: auto;
-                position: relative;
-                text-align: left;
-              }
-          id="ModalFocusTrapZone0"
-          onBlurCapture={[Function]}
-          onFocusCapture={[Function]}
-        >
-          <div
-            aria-hidden={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-          <div
-            className=
-                ms-Modal-scrollableContent
-                {
-                  flex-grow: 1;
-                  max-height: 100vh;
-                  overflow-y: auto;
-                }
-                @supports (-webkit-overflow-scrolling: touch){& {
-                  max-height: 768px;
-                }
-            data-is-scrollable={true}
-          >
-            Test Content
-          </div>
-          <div
-            aria-hidden={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</span>
-`;
-
-exports[`Modal renders AlertDialog role with isModeless, isBlocking props correctly 1`] = `
-<span
-  className="ms-layer"
->
-  <div
-    className=
-        ms-Fabric
-        ms-Layer-content
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          color: #323130;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          visibility: visible;
-        }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onContextMenu={[Function]}
-    onDoubleClick={[Function]}
-    onDrag={[Function]}
-    onDragEnd={[Function]}
-    onDragEnter={[Function]}
-    onDragExit={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onFocus={[Function]}
-    onInput={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseMove={[Function]}
-    onMouseOut={[Function]}
-    onMouseOver={[Function]}
-    onMouseUp={[Function]}
-    onSubmit={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchMove={[Function]}
-    onTouchStart={[Function]}
-  >
-    <div
-      aria-modal={false}
-      onKeyDown={[Function]}
-      role="alertdialog"
-      style={
-        Object {
-          "outline": "none",
-          "overflowY": undefined,
-        }
-      }
-    >
-      <div
-        className=
-            ms-Modal
-            is-open
-            test-className
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              background-color: transparent;
-              display: flex;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 100%;
-              justify-content: center;
-              opacity: 1;
-              pointer-events: auto;
-              position: absolute;
-              transition: opacity 0.267s;
-              width: 100%;
-            }
-      >
-        <div
-          className=
-              ms-Dialog-main
-              test-containerClassName
-              {
-                background-color: #ffffff;
-                border-radius: 2px;
-                box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
-                box-sizing: border-box;
-                max-height: calc(100% - 32px);
-                max-width: calc(100% - 32px);
-                min-height: 176px;
-                min-width: 288px;
-                outline: 3px solid transparent;
-                overflow-y: auto;
-                position: relative;
-                text-align: left;
-                z-index: 1000000;
-              }
-          id="ModalFocusTrapZone0"
-          onBlurCapture={[Function]}
-          onFocusCapture={[Function]}
-        >
-          <div
-            aria-hidden={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-          <div
-            className=
-                ms-Modal-scrollableContent
-                {
-                  flex-grow: 1;
-                  max-height: 100vh;
-                  overflow-y: auto;
-                }
-                @supports (-webkit-overflow-scrolling: touch){& {
-                  max-height: 768px;
-                }
-            data-is-scrollable={true}
-          >
-            Test Content
-          </div>
-          <div
-            aria-hidden={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</span>
-`;
-
 exports[`Modal renders Draggable Modal correctly 1`] = `
 <span
   className="ms-layer"