Add ability to pass ref to `ToggleSwitch`

[joshblack]

Context: https://github.slack.com/archives/C01L618AEP9/p1696948651184489?thread_ts=1696241098.672339&cid=C01L618AEP9

When returning focus onto the page, like when closing or dismissing a dialog, components need the ability to accept a ref that will allow for restoring focus to the component if it was the last active element before the dialog was triggered.

This issue tackles adding the ability to pass a ref to ToggleSwitch so that this component can participate in this kind of flow.

[joshblack]

Question for the team @primer/react-reviewers, how do we typically handle refs in these kinds of situations for components? Specifically in scenarios where the interactive part of the component is not the outermost element. It seems like we have a couple of options:

1. Use React.forwardRef() and place on the interactive element within the component
2. Create a prop that would act as a ref that is placed on the interactive element within the component

Curious if there was a preference between these two or another path that we like to take 👀

[LisaKr]

@primer/react-reviewers hey folks! just pinging this if you have a moment -- would love to move forward with the a11y fix that relies on this in our project :) Thanks!!

[joshblack]

Opened up a PR for that first approach for discussion: #3813 👀

[siddharthkp]

Question for the team https://github.com/orgs/primer/teams/react-reviewers, how do we typically handle refs in these kinds of situations for components? Specifically in scenarios where the interactive part of the component is not the outermost element.

Tricky tricky!

Use React.forwardRef() and place on the interactive element within the component

yes, this approach makes perfect sense here. And...

---

I think it's hard to apply a blanket rule to all components but there are things that seem intuitive to me:

1. component specific props should be pulled out of props (like loading and size in ToggleSwitch)
   `2. sx prop should be placed on the parent to customise all parts of the component
2. rest of the props {...rest} should be spread on the core interactive element, not the parent container.

html attributes like id, disabled, aria-label, data-test-id should always be passed down to the interactive element as that is the actual ToggleSwitch that a user (or CI impersonating user) would use. Everything around it is the design wrapper. As it's hard to predict all the html attributes that could be used, passing {...rest} to the interactive element makes the most sense to me.

As I said, this isn't a blanket rule, we bake in all sorts of design and a11y logic in our components. Hopefully, it's a good starting point though.