Fix Issue #1039 : extending KeyboardShortcut to Support Special Keys

[f0wu5u]

<If necessary, assign reviewers that know the area or changes well. Feel free to tag any additional reviewers you see fit.>

Details

Added Escape key listener to close all modals using existing KeyboardShortcut library. KeyboardShortcut library was also modified to accept single keys by passing special as modifier when subscribing for event.

Fixed Issues

Fixes #1039

Tests

Close Image upload preview:

1. Go to chat screen of Expensify.cash
2. Click on image upload button and select image for preview
3. Press Escape button and modal should close

Close Attachment preview modal:

1. Press on any image in chat
2. Wait for preview modal
3. Press Escape and modal should close

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

record.mp4

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[f0wu5u]

I have read the CLA Document and I hereby sign the CLA

[alex-mechler]

Thanks for the PR @code-fi! Can you resolve the merge conflicts?

[f0wu5u]

@alex-mechler merge conflicts resolved :)

[Jag96]

@code-fi did you open another PR for this? Just double-checking since I don't see a new PR linked here or in the issue

[f0wu5u]

@Jag96 no, it was closed automatically I think

[alex-mechler]

I think there are some style issues, but github was having issues when you last pushed. You can run the style checker locally with npm run lint

[f0wu5u]

@alex-mechler changes made

[alex-mechler]

When pressing escape, we get an outline around an element that should not be there.

[alex-mechler]

@code-fi pulling this out of the thread, I was able to reproduce on Mac OS (10.15.7), on both desktop and web

[Jag96]

Closing in favor of #1293