feat: added focus trap to Popover #1164
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov Report
@@ Coverage Diff @@
## main #1164 +/- ##
==========================================
- Coverage 68.45% 68.38% -0.08%
==========================================
Files 280 280
Lines 2184 2176 -8
Branches 759 754 -5
==========================================
- Hits 1495 1488 -7
+ Misses 678 677 -1
Partials 11 11
|
JoshuaKGoldberg
changed the title
JoshuaKGoldberg
force-pushed
the
jg-popover-focus-trap
branch
from
85fc214 to
2a7f1e2
Compare
JoshuaKGoldberg
force-pushed
the
jg-popover-focus-trap
branch
from
2a7f1e2 to
87b69b6
Compare
📬Published Alpha Packages:@codecademy/gamut-labs@5.4.0-alpha.87b69b.0 |
|
🚀 Styleguide deploy preview ready! |
JoshuaKGoldberg
commented
Nov 17, 2020
| @@ -91,7 +91,7 @@ describe('Popover', () => { | |||
| isOpen: true, | |||
| onRequestClose, | |||
| }); | |||
| fireEvent.keyDown(baseElement, { key: 'Escape', keyCode: 27 }); | |||
| fireEvent.keyDown(baseElement, { key: 'escape', keyCode: 27 }); | |||
| expect(onRequestClose).toBeCalledTimes(1); | |||
There was a problem hiding this comment.
Fun fact: I think this unit test wasn't actually testing what it thought it was, because the key was incorrect case...
JoshuaKGoldberg
commented
Nov 17, 2020
| @@ -109,32 +99,37 @@ export const Popover: React.FC<PopoverProps> = ({ | |||
| }, [targetRect, isInViewport, onRequestClose]); | |||
|
|
|||
| const popoverRef = useRef<HTMLDivElement>(null); | |||
| useClickAway(popoverRef, handleClickOutside); | |||
| useHotkeys('escape', handleClickOutside, {}, [targetRect]); | |||
There was a problem hiding this comment.
This stuff is handled by the focus trap for us now.
jakemhiller
approved these changes
Nov 17, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
PR Checklist
Description
This adds in a little bit of the work we'd worked on in #846: specifically the usage of the focus trap. I've been trying to get the Reach UI components because they're quite a bit more accessible, but won't have them ready in time for the engagement team being able to launch this week.
There are two parallel investigations I tried out today:
I would like to continue pushing forward on them later, but need to unblock 🥚 friends. So here we/you go, at long last, the exact thing we/you wanted in #851 and I was super adamant about trying to avoid. 🙃 . Putting a co-authored-by tag because this really is partially what was coded there already...
Co-authored-by: Sooin Chung sooin@codecademy.com, Hasan Afzal hasan@codecademy.com