bugfix: enables Escape to dismiss alert Dialog

[bsunderhus]

Previous Behavior

1. an alert dialog would not close on Escape key press

New Behavior

1. an alert dialog now closes on Escape key press
2. change wrongly named file useDialogTrigger.styles.ts

Related Issue(s)

• Fixes [Bug]: Enable Escape to dismiss alert Dialog #28010

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	6	15	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	599	581	5000
Button	mount	284	290	5000
Field	mount	1061	1069	5000
FluentProvider	mount	632	664	5000
FluentProviderWithTheme	mount	81	86	10
FluentProviderWithTheme	virtual-rerender	73	66	10
FluentProviderWithTheme	virtual-rerender-with-unmount	72	68	10
InfoButton	mount	6	15	5000	Possible regression
MakeStyles	mount	847	868	50000
Persona	mount	1609	1578	5000
SpinButton	mount	1275	1296	5000

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 5809e04461b488016393f68d0c809d5b43eb93db (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 20e9131:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	65.162 kB 17.952 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	210.365 kB 58.697 kB
react-components react-components: FluentProvider & webLightTheme	36.395 kB 11.996 kB
react-dialog Dialog (including children components)	92.072 kB 27.46 kB
react-portal-compat PortalCompatProvider	6.473 kB 2.196 kB

_{🤖 This report was generated against 5809e04461b488016393f68d0c809d5b43eb93db}

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[msft-fluent-ui-bot]

🎉@fluentui/react-dialog@v9.5.11 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@fluentui/react-components@v9.22.1 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[goamn]

@bsunderhus @ling1726 Why is the Escape key allowed to close the Dialog with modalType="alert"? This doesn't make sense to me. Now there is no way to create a Dialog that can not be closed. Alert was the only modalType to prevent the Dialog from closing and forcing a user to take an action. Both Modal or non-Modal allow the user to close the Dialog. Also now the documentary is invalid, please see below:

[bsunderhus]

Also now the documentary is invalid

Hey there @goamn, you're completely right, I'll see to create an issue to update the documentation!

Why is the Escape key allowed to close the Dialog with modalType="alert"? This doesn't make sense to me.

This change is due to WAI-ARIA alertdialog pattern compliance, an alert dialog has no such feature! you should always be able to close a dialog by pressing the Escape button.

Now there is no way to create a Dialog that can not be closed. Alert was the only modalType to prevent the Dialog from closing and forcing a user to take an action. Both Modal or non-Modal allow the user to close the Dialog.

You can still control the opening state and avoid opening on Escape by using the controlled version of a dialog:

https://codesandbox.io/s/sad-star-c7ytcs?file=/example.tsx

[goamn]

Hello, ok thank you, at least there is a second way :)