fix(Popover): fixed focus trapped on hoverable trigger#12591
fix(Popover): fixed focus trapped on hoverable trigger#12591thatblindgeye wants to merge 1 commit into
Conversation
WalkthroughPopover hover triggers now disable focus trapping by default. The Hoverable example documents the required trigger configuration and advises against interactive or semantic content. ChangesPopover hover accessibility
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/react-core/src/components/Popover/Popover.tsx`:
- Around line 210-212: Force the resolved focus-trap setting to false whenever
triggerAction is "hover", including when withFocusTrap is explicitly true.
Update both activation and return-focus behavior to use resolvedWithFocusTrap,
and add a regression test covering the explicit-true hover case.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 70db5de2-7d79-46c8-bcdc-372827e98811
📒 Files selected for processing (2)
packages/react-core/src/components/Popover/Popover.tsxpackages/react-core/src/components/Popover/examples/Popover.md
| /** Whether to trap focus in the popover. When using a triggerAction of "hover", this will be set to false | ||
| * by default and must remain false. | ||
| */ |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Force hover-triggered popovers to disable focus trapping.
This only changes the default; an explicit withFocusTrap={true} still enables the trap for triggerAction="hover", contradicting the documented “must remain false” contract and the PR objective. Normalize the resolved value to false whenever triggerAction === 'hover', and add a regression test for the explicit-true case.
Proposed direction
- withFocusTrap: propWithFocusTrap = triggerAction === 'hover' ? false : undefined,
+ withFocusTrap: propWithFocusTrap,
...
+ const resolvedWithFocusTrap = triggerAction === 'hover' ? false : propWithFocusTrap;
- const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
+ const [focusTrapActive, setFocusTrapActive] = useState(Boolean(resolvedWithFocusTrap));Use resolvedWithFocusTrap for activation and returnFocusOnDeactivate as well.
Also applies to: 272-272
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/react-core/src/components/Popover/Popover.tsx` around lines 210 -
212, Force the resolved focus-trap setting to false whenever triggerAction is
"hover", including when withFocusTrap is explicitly true. Update both activation
and return-focus behavior to use resolvedWithFocusTrap, and add a regression
test covering the explicit-true hover case.
There was a problem hiding this comment.
LGTM. Do you think Coderabbit's suggestion of enforcing the disabled focus trap for hover triggers is worth implementing? If we do, it's a little more breaking than just updating the default and I can see a user reporting it as a bug, but they shouldn't be doing it.
|
@kmcfaul personally I think it'd make sense to force it like coderabbit suggested, but updating the default for now should suffice wwith the additional verbiage. Plus if we do end up deprecating/removing hvoerable popovers. |
What: Closes #10257
Additional issues:
Summary by CodeRabbit
Bug Fixes
Documentation