Add radio menu item

[florianduros]

Radio menu item in figma

Implementation close to the CheckboxMenuItem

[t3chguy]

@florianduros any idea why there is no cloudflare preview?

[florianduros]

Hmm strange, I'll rebase on main to see if it's triggering a preview

[cloudflare-workers-and-pages]

Deploying compound-web with    Cloudflare Pages

Latest commit:	c8edcab
Status:	✅  Deploy successful!
Preview URL:	https://e0694410.compound-web.pages.dev
Branch Preview URL:	https://florianduros-radio-menu-item.compound-web.pages.dev

View logs

[florianduros]

Remove "Icon"

[t3chguy]

This looks to not follow best wai-aria practices where arrow keys do not change the radio selection, only space/enter does https://ariakit.org/examples/menu-item-radio - this may just be a symptom of the Story. Could you update the story to match the best practice so that we can confirm the component can be used to achieve this

[florianduros]

Catching up after a bit of time.

@t3chguy I'm looking at the wai aria pratices: https://www.w3.org/WAI/ARIA/apg/patterns/radio/

Right Arrow and Down Arrow: move focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the last button, focus moves to the first button.

Arrow keys should change the selection.

[t3chguy]

@t3chguy I'm looking at the wai aria pratices: w3.org/WAI/ARIA/apg/patterns/radio

but that's wrong - radio != menuitemradio which is the role you're implementing.

[dbkr]

ftr, https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/ is an example of the menuitemradio best practice (although even that disagrees with https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menuitemradio_role on whether space should close the menu)

[dbkr]

After much anguish, I think this is ready (we didn't need to manually control the keyboard focus at all, radix does it for us as long as we actually wrap the thing in a menu).