chore: forward ref to Button

[DimitarNestorov]

Motivation

Closes #3988 and #3992

Related issue

#3988

Test plan

CI passes

[github-actions]

The mobile version of example app from this branch is ready! You can see it here.

[callstack-bot]

Hey @DimitarNestorov, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[RichardLindhout]

Why are we given the ref to the surface and not to the pressable?

[DimitarNestorov]

@RichardLindhout Because that's what is the root of the button

[SleeplessByte]

@DimitarNestorov can you tell us how to get the pressable so we can focus the button programmatically among other things?

[DimitarNestorov]

@SleeplessByte opened a PR which adds touchableRef to Button #4322

[SleeplessByte]

@SleeplessByte opened a PR which adds touchableRef to Button #4322

Great! FWIW this is also missing on things like dialog ☺️

[DimitarNestorov]

this is also missing on things like dialog ☺️

Could you be more specific?

[SleeplessByte]

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 tabindex=-1 on web, we can actually make the modal accessible, as well as install a focus trap on web (for native, react-native-community/discussions-and-proposals#640 is still open)

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 Dialog.Actions, but installing the focustrap is hard without a reference to the node.