feat(SegmentedControl): a11y - set role to radiogroup

[bvandercar-vt]

Improves a11y of new SegmentedControl item, giving it the radiogroup role and also allowing it to be controlled with arrow keys.

• [X] Added Tests

[adidahiya]

Various open source UI toolkits have different approaches for Segmented Control a11y:

• Primer explicitly advises against using radiogroup, tablist, or toolbar ARIA roles
• MUI's Toggle Button Group uses role="group"
• Mantine UI uses role="radiogroup"

Can you explain the motivations for your change and make an argument for setting the default as you've done in this PR?

I think a safer, better approach might be to add good documentation to the component docs suggesting that users should set their own ARIA role appropriately by specifying the role attribute.

[bvandercar-vt]

@adidahiya that is tricky. After reading through those, I agree my original choice of listbox was incorrect.

It sounds like radiogroup is the best option, I changed the code to that. Despite what that Primer link says, I see no evidence why it shouldn't be radiogroup when that's exactly how it behaves.

If you would like me to add a role prop-- role?="group" | "list" | "radiogroup"-- and then we set the children roles and aria props based on that as well, I'm up for it. But IMO, I don't think anyone would complain about it being hard set to radiogroup

[bvandercar-vt]

@adidahiya seems like this has gone stale? Please see my last comment.

[bvandercar-vt]

@evansjohnson Done, added arrow key control and the proper tabIndex setting! Tested, works great.