fix: add trapFocus to RadioButtonGroup #7044
Draft
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.
What does this PR do?
This PR is enhancing RadioButtonGroup with a new prop
trapFocus
.The
trapFocus
prop allows the user to set focus inside the RadioButtonGroup and on the first element.The current behavior, w/o
trapFocus
, is that the component assigns a givenref
to RadioButtonGroup which is a Box; the Box doesn't process the focus and the focus is lost. The keyboard focus works as expected, the ref focus doesn't.The use case this fix will solve for our team is when the RadioButtonGroup is inside of a form, and we apply a logic that focuses on an input field that has an error upon submission, the RBG doesn't accept the focus. We send the
ref
of the RadioButtonGroup via form hook; this mostly works well for Grommet components that we use, aside of RGB which doesn't capture the focus.The goal is to be able to focus on RGB, but since RGB is a Box, and the Box shouldn't be focusable, we expect to be focusing on the first RB element; a similar behavior to how the keyboard navigation works when tabbing between form elements and the first RB within a RBG gets the focus upon entering the component with Tab.
I am not locked on this solution, and I'm very much open to other proposals or workarounds that will help my team solve the problem and move forward. I used the
trapFocus
approach to somewhat be consistent with the Drop component that uses this prop as well. Please let me know what other type of info you might be needing to understand and agree on a solution for this issue.Where should the reviewer start?
RBG
What testing has been done on this PR?
Storybook - but it is not completed yet, I'd like to get feedback on the approach if possible
How should this be manually tested?
Do Jest tests follow these best practices?
screen
is used for querying.asFragment()
is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Yes, new prop
Should this PR be mentioned in the release notes?
Yes
Is this change backwards compatible or is it a breaking change?
b/c