-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
chore: forward ref to Button
#4150
Conversation
313c62b
to
8a2bce3
Compare
The mobile version of example app from this branch is ready! You can see it here. |
Hey @DimitarNestorov, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
Why are we given the ref to the surface and not to the pressable? |
@RichardLindhout Because that's what is the root of the button |
@DimitarNestorov can you tell us how to get the pressable so we can focus the button programmatically among other things? |
@SleeplessByte opened a PR which adds |
Great! FWIW this is also missing on things like dialog |
Could you be more specific? |
Definitely. Related to #3912. The modal (element with aria-modal) should receive focus when it's shown, which means that either it, its title, its paragraph, or its first focusable element should be focussed, depending on how much content there is in the modal (aka, you don't want to focus the button if it's in a scroll container, at the bottom, and there is a scroll bar). If the modal ref is exposed, and given a Right now we can only achieve this by: // Cannot use useCallback, because during the callback the dialog is not
// yet mounted, so there is nothing to focus.
useEffect(() => {
if (Platform.OS !== "web" || !visible) {
return;
}
// TODO: solve for other platforms
// Wait for dialog to be mounted
setTimeout(() => {
const modal = document.querySelector<HTMLDivElement>(
'[data-testid="dialog"] > [data-testid="dialog-wrapper"] > div',
);
if (!modal) {
return;
}
modal.setAttribute("tabIndex", "-1");
modal.focus();
}, 1);
}, [visible]); With this PR, it becomes easier as in a lot of cases we can focus the actual cancel button in |
Motivation
Closes #3988 and #3992
Related issue
#3988
Test plan
CI passes