Skip to content

feat(react-dialog): removes document listener to Escape keydown#24668

Merged
bsunderhus merged 2 commits intomicrosoft:masterfrom
bsunderhus:react-dialog/remove-document-listener
Sep 6, 2022
Merged

feat(react-dialog): removes document listener to Escape keydown#24668
bsunderhus merged 2 commits intomicrosoft:masterfrom
bsunderhus:react-dialog/remove-document-listener

Conversation

@bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Sep 6, 2022

Splitting from #24668

Current Behavior

A listener to the document must be added if Escape keydown is to be listened on some very specific cases:

  1. no focusable element inside the Dialog
  2. focus outside of Dialog on a non-modal dialog

New Behavior

Removes the global document listener to Escape keydown handling.

Reasons

  1. the no focusable element inside the Dialog is a discouraged scenario
  2. on the case of focus outside of a non-modal Dialog then Escape key closing the Dialog might no be ideal, as Escape can be linked with another behaviour.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 6, 2022

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 e316a7e:

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

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-dialog
Dialog (including children components)
85.42 kB
25.487 kB
85.144 kB
25.394 kB
-276 B
-93 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.317 kB
52.005 kB
react-components
react-components: FluentProvider & webLightTheme
33.317 kB
10.983 kB
🤖 This report was generated against 85c1a34904174132332eeb85800ef9694ddf807e

@size-auditor
Copy link

size-auditor bot commented Sep 6, 2022

Asset size changes

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

Baseline commit: 85c1a34904174132332eeb85800ef9694ddf807e (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1592 1564 5000
Button mount 1134 1130 5000
FluentProvider mount 1882 1859 5000
FluentProviderWithTheme mount 742 759 10
FluentProviderWithTheme virtual-rerender 692 701 10
FluentProviderWithTheme virtual-rerender-with-unmount 745 750 10
MakeStyles mount 2255 2228 50000
SpinButton mount 3032 2981 5000

@bsunderhus bsunderhus marked this pull request as ready for review September 6, 2022 08:59
@bsunderhus bsunderhus requested a review from a team as a code owner September 6, 2022 08:59
@bsunderhus bsunderhus changed the title feat(react-dialog): removes document listener to Escape keydown feat(react-dialog): removes document listener to Escape keydown Sep 6, 2022
@ling1726
Copy link
Contributor

ling1726 commented Sep 6, 2022

Are you sure the Escape dismiss is only for those cases ? the APG design pattern explicitly states that Escape should be used to close the dialog. While the document listener might not be needed, we should probably just use a react event listener for the dialog

https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/

@bsunderhus
Copy link
Contributor Author

bsunderhus commented Sep 6, 2022

I'm sorry, I might not have been clear enough, we still support Escape to close dialog.

this PR only removes the support for the edge cases where a document listener for Escape is required, Escape is still evaluated properly inside the Dialog

@ling1726
Copy link
Contributor

ling1726 commented Sep 6, 2022

I'm sorry, I might not have been clear enough, we still support Escape to close dialog.

this PR only removes the support for the edge cases where a document listener for Escape is required, Escape is still evaluated properly inside the Dialog

Ah ok, sorry I misunderstood, I still have vacation glasses on :)

@bsunderhus bsunderhus merged commit 94ab82d into microsoft:master Sep 6, 2022
@bsunderhus bsunderhus deleted the react-dialog/remove-document-listener branch September 6, 2022 10:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants