-
Notifications
You must be signed in to change notification settings - Fork 842
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[EuiPopover] Removed false
as an option for initialFocus
, removed unnecessary focus logic
#6044
Conversation
- since the panel popover is now always used as a default, false feels unnecessary - initialFocus should only be passed if something other than the popover parent should be focused
+ do not override to the panel if it's already set + update spec tests to check for `data-autofocus` to confirm that react-focus-on is being passed the correct `initialFocus` as expected
AFAICT, this is already being handled automatically by `EuiFocusTrap`, and works exactly as before / in Cypress, so I don't see the need for the extra focus logic
- now that EuiPopoverFocus no longer has an `updateFocus` method, it turns out the focus fighting is coming from the focus trap
Preview documentation changes for this PR: https://eui.elastic.co/pr_6044/ |
Dang that would be cool if we could outsource the focus logic. This is definitely a case of unintentional overlap. The EuiPopover logic was added when it used a different focus trap library and react-focus-on/lock has gotten even better in the last couple years. Going to do some test on the various components tomorrow! |
Still doing manual testing but commenting to say that all instances of |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Super happy about this 🙌
Ran through a bunch of components manually and found no focus regressions. Even the ownFocus=false
scenario behaves as it did, which I had initial concerns about (I thought perhaps updateFocus
still added focus, but it did not).
I wouldn't mind having one other person take a look, though, as this change has far-reaching implications. Also perhaps considering whether to not have this go into Kibana before 8.4 FF. cc// @chandlerprall
Agreed on getting a second pair of eyes/QA, but I'd argue this PR has the same implications that #5784 does (less so because it doesn't actually affect functionality), which is already in Kibana 8.4. That being said I wouldn't rush to get it in before FF though, if it doesn't make it, it doesn't make it, not a big deal |
Yeah agreed. The only difference is Kibana teams have had 2 months to catch any bugs from #5784, whereas if this merged those teams would only have a couple days to catch regressions. More timing than severity was my point there. |
Gotcha, makes sense! PRs like this definitely make me wish we had the ability to run Kibana CI against EUI dev branches, their FTR tests are super robust and would def catch regressions. Maybe we can bribe the inestimable @kertal sometime? 😇 |
Very excited at the prospect of deleting this code! I'll take a pass, but may not be until next week. Having only skimmed the changes, I don't think there's a need to avoid 8.4. |
Sounds like a very useful idea ... so the idea is planted 🪴 ... which is a start |
@chandlerprall Quick ping on QAing/approving this PR! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Played with a number of popovers across the examples, making changes to / adding some initialFocus
definitions and everything continues working as expected 🎉
Thanks Chandler!! Merging now. Just to confirm, it sounds like this PR won't be released in time for Kibana 8.4, which I'm personally totally fine with - let me know if anyone feels strongly otherwise! |
* Upgrade to v62.0.3 * Update EUI i18n tokens * Update html string snapshots - Emotion CSS hash changed * [EuiIcon] Update instances of `keyboardShortcut` icons to `keyboard` * [EuiErrorBoundary] Update snapshots from Emotion conversion * [EuiImage] Update snapshots, tests, and CSS to account for Emotion conversion * [EuiImage][RTL] Fix test failures caused by EuiImage changes * [EuiCommentList] Deprecate EuiCommentProps.type * [EuiCommentList] Rename `timelineIcon` prop to `timelineAvatar` - see elastic/eui#6071 * [EuiCommentList] Fix selectors deprecated by Emotion conversion * [EuiPopover][EuiCommentEvent][Enzyme] Fix mounted test failures caused by Emotion conversions - Mounting displays the Emotion wrapper with the data-test-subj on them - we need to specify the output div renders in order for text assertions to be correct * [EuiPopover] Deprecate `initialFocus={false}` as an option see elastic/eui#6044 * [EuiPopover] Rename `display=inlineBlock` to `inline-block` - see elastic/eui#5977 * [EuiPopover] Update snapshots from Emotion conversion * [EuiPopover] Replace deprecated `.euiPopover__panel-isOpen` class with new `[data-popover-open]` attribute * [EuiPopover][RTL] Fix test failures caused by not waiting for EuiPopover animation/transition * Skip failing a11y tests - test w/ similar error already skipped in another test above - requires closing the popover for next test to pass - not sure why delete action is no longer available * Fix failing Security Cypress tests * Attempt to squash flaky FTR tests around Add Filter popover Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Jonathan Budzenski <[email protected]>
* Upgrade to v62.0.3 * Update EUI i18n tokens * Update html string snapshots - Emotion CSS hash changed * [EuiIcon] Update instances of `keyboardShortcut` icons to `keyboard` * [EuiErrorBoundary] Update snapshots from Emotion conversion * [EuiImage] Update snapshots, tests, and CSS to account for Emotion conversion * [EuiImage][RTL] Fix test failures caused by EuiImage changes * [EuiCommentList] Deprecate EuiCommentProps.type * [EuiCommentList] Rename `timelineIcon` prop to `timelineAvatar` - see elastic/eui#6071 * [EuiCommentList] Fix selectors deprecated by Emotion conversion * [EuiPopover][EuiCommentEvent][Enzyme] Fix mounted test failures caused by Emotion conversions - Mounting displays the Emotion wrapper with the data-test-subj on them - we need to specify the output div renders in order for text assertions to be correct * [EuiPopover] Deprecate `initialFocus={false}` as an option see elastic/eui#6044 * [EuiPopover] Rename `display=inlineBlock` to `inline-block` - see elastic/eui#5977 * [EuiPopover] Update snapshots from Emotion conversion * [EuiPopover] Replace deprecated `.euiPopover__panel-isOpen` class with new `[data-popover-open]` attribute * [EuiPopover][RTL] Fix test failures caused by not waiting for EuiPopover animation/transition * Skip failing a11y tests - test w/ similar error already skipped in another test above - requires closing the popover for next test to pass - not sure why delete action is no longer available * Fix failing Security Cypress tests * Attempt to squash flaky FTR tests around Add Filter popover Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Jonathan Budzenski <[email protected]>
Summary
See: #5977 (comment)
I initially thought the
initialFocus
overrides were the issue (84fe068), but after some more testing I quickly realized the auto focus behavior is coming fromEuiFocusTrap
/react-focus-on
/react-focus-lock itself.After even more thinking, I realized there's a lot of overlapping logic between EuiPopover's
updateFocus
logic and the focus logic that comes OOTB with FocusTrap/focus-lock ... so I experimented with removingupdateFocus
completely (74e38dc) and bam - everything still works as-is 🙈We should definitely test thoroughly considering EuiPopover's ubiquitousness. I'll make a QA list below:
QA
ownFocus
as false so initial focus was never set)initialFocus
is passed/set by this component)ownFocus
set by component)EuiInputPopover
- will have no change asownFocus
is false on theseChecklist
- [ ] Checked in both light and dark modes- [ ] Checked in mobile- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Updated the Figma library counterpart