Support react `ref` for certain inputs
- Dominant language
- TypeScript
- Stars
- 45
- Forks
- 9
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 17
Description
**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: `
Instead other UI libs have used [`forwardRef`](https://reactjs.org/docs/forwarding-refs.html) 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
Contributor guide
Research direction
Start with the workaround in src/web/components/elements/CalloutBlockComponent.tsx, then locate the relevant input components in the csnx monorepo. Confirm which input elements need ref support and assess the requested forwardRef approach; done means those agreed elements accept refs for accessibility use cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100