bugfix: enables Escape to dismiss alert Dialog

change/@fluentui-react-dialog-4d1d8aec-a33c-4349-94f9-0bf5d23870c0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: enables Escape to dismiss alert Dialog",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx

@@ -484,7 +484,7 @@ describe('Dialog', () => {
     });
   });
   describe('modalType = alert', () => {
-    it('should not close with escape keydown', () => {
+    it('should close with escape keydown', () => {
       mount(
         <Dialog modalType="alert">
           <DialogTrigger disableButtonEnhancement>
@@ -512,7 +512,7 @@ describe('Dialog', () => {
       );
       cy.get(dialogTriggerOpenSelector).realClick();
       cy.focused().realType('{esc}');
-      cy.get(dialogSurfaceSelector).should('exist');
+      cy.get(dialogSurfaceSelector).should('not.exist');
     });
     it('should lock body scroll when dialog open', () => {
       mount(

packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts

@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-utilities';
 import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
 import { useDialogContext_unstable } from '../../contexts';
-import { isEscapeKeyDismiss } from '../../utils';
+import { Escape } from '@fluentui/keyboard-keys';
 
 /**
  * Create the state required to render DialogSurface.
@@ -47,7 +47,7 @@ export const useDialogSurface_unstable = (
   const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
     props.onKeyDown?.(event);
 
-    if (isEscapeKeyDismiss(event, modalType)) {
+    if (event.key === Escape && !event.isDefaultPrevented()) {
       requestOpenChange({
         event,
         open: false,

packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDialogTrigger_unstable } from './useDialogTrigger.styles';
+import { useDialogTrigger_unstable } from './useDialogTrigger';
 import { renderDialogTrigger_unstable } from './renderDialogTrigger';
 import type { DialogTriggerProps } from './DialogTrigger.types';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';

packages/react-components/react-dialog/src/components/DialogTrigger/index.ts

@@ -1,4 +1,4 @@
 export * from './DialogTrigger';
 export * from './DialogTrigger.types';
 export * from './renderDialogTrigger';
-export * from './useDialogTrigger.styles';
+export * from './useDialogTrigger';

packages/react-components/react-dialog/src/utils/index.ts

@@ -1,3 +1,2 @@
-export * from './isEscapeKeyDown';
 export * from './useDisableBodyScroll';
 export * from './useFocusFirstElement';