feat: Add focusableRef support to DateInput

[hasegawa-101]

Closes #7756

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[snowystinger]

Thanks for fixing that. We had a little discussion on Friday about this plus the ask for the inputRef, so we're revisiting a little because that's a lot of refs. I doubt we'll reach a decision on how to reduce the overall number before the new year, just to give you a heads up.
I'm approving for now

[devongovett]

An alternative to exposing a third ref on DateInput (in addition to ref and inputRef) would be to override the focus method of the outer-most element that ref is attached to so that calling it forwards focus to the inner focusable element. This way you could just use ref with form libraries and it works. Not sure if there are side effects to this.

[ik-southpole]

Thanks everyone for taking a look at this. At the moment, integrating DatePicker with react-hook-form appears to be problematic due to issues with the focus-on-error behavior. Since this PR has been inactive for quite some time, are there any alternative approaches the team would recommend to address this?

At the moment we do:

<Controller
  name="date"
  render={({ field, fieldState }) => (
    <>
      <DatePicker>
        <DateInput
          name={field.name}
          onChange={field.onChange}
          onBlur={field.onBlur}
          isDisabled={field.disabled}
          value={field.value}
          isInvalid={fieldState.error !== undefined}
          validationBehavior="aria"
          ref={(ref) => {
            if (ref) {
              field.ref(
                Object.defineProperty(ref, "focus", {
                  value(this: HTMLDivElement) {
                    this.querySelector<HTMLSpanElement>(
                      '[role="spinbutton"]',
                    )?.focus();
                  },
                  writable: true,
                  configurable: true,
                }),
              );
            }
          }}
        />
        <FieldError>{fieldState.error?.message}</FieldError>
      </DatePicker>
    </>
  )}
  rules={{ required: "This field is required" }}
/>

UPD: It seems that when using validationBehavior="aria" with other components CheckboxGroup, RadioGroup as well as DatePicker, one will need to implement focus management themselves.