Support react `ref` for certain inputs

[liywjl]

Is your feature request related to a problem? Please describe. When implementing certain accessiblity features, we sometimes need to refer to a specific DOM element (example an input in a form).

The common way to do this in React is to use ref (ex: <div ref={someRef} />). Currently in Source we do not have a way to support refs, as they cannot be spread like other props.

Instead other UI libs have used forwardRef as a way of passing down refs.

Describe the solution you'd like Support refs for certain input elements by using forwardRef

Describe alternatives you've considered I currenly have a workaround using query selectors and custom HTML attributes: https://github.com/guardian/dotcom-rendering/blob/main/src/web/components/elements/CalloutBlockComponent.tsx#L195

[SiAdcock]

Thanks @liywjl . I originally raised this as #294 after we discussed this back in March. I got bogged down in TypeScript problems trying to support this and since you found a workaround, I put it down. Happy to look into it again if it would still be useful. It will be a breaking change so we can add it to the v4.0.0 roadmap.

When you say "support ref for certain inputs", do you think it would be better for some components to support ref but for others not to support it?

[ob6160]

This just came up in #1106, turns out I can use Synthetic Events here, but I definitely missed the ability to forward refs. Discussion resulted in @SiAdcock suggesting we look into whether this would be a breaking change.

In terms of planning this, should we make a list of components where we think a ref forward would be useful? .... Or I'm wondering if it's even worth trying to pre-empt usage and add them all at once / on demand

[tjmw]

Hi @SiAdcock 👋 I was just wondering what the current state/thinking around supporting forward refs in source components was? We've got a use case where we'd like to programatically focus an instance of source's Button component (to support one of the recommendations we've been given around banner accessibility).