Seeking advice on what pattern to follow for a "ToggleGroup"

[joshuawootonn]

Hello there.

I am trying to understand what pattern I should follow for a "ToggleGroup" like these two examples:

Different UI kits (in react) follow different patterns.

• Radix
  • Sortof a radio group pattern, but selection doesn't follow focus. And the parent element has role="group" instead of role="radiogroup"
  • https://www.radix-ui.com/docs/primitives/components/toggle-group
• Ant Design
  • Follows the radio group pattern, but always behaves as an element in a toolbar. (Arrow key on the last element focuses the next input)
  • https://ant.design/components/radio
• Material UI
  • Just puts buttons in a role="group" and styles them differently
  • https://mui.com/material-ui/api/toggle-button-group/

Is the selection style arbitrary for this component?

If your toggle button is in a tool bar and changes text alignment it might be jarring to have the entire body of text change alignment over and over as you move through your toggle button.

But in the same vein, if you are filling in a google form with standard information for an event you are joining, you would probably expect this input to behave like a radio button.

Thinking about this: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_selection_follows_focus

What pattern should this component follow?

Thanks 🙏🏼

[JAWS-test]

https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html has also a

sortof a radio group pattern, but selection doesn't follow focus

[joshuawootonn]

Because ARIA is designed to inform assistive technologies about UI semantics and behaviors, not styling, the alignment toggles provide the following keyboard support described in the radio group design pattern.

This line was particularly clarifying for me. Thank you @JAWS-test