mi6 / mi6/ic-ui-kit

[ic-popover-menu]: Introduce a variant of `ic-menu-item` that has the role `menuitemradio`

Open
#2,744 0 comments 0 reactions 0 assignees View on GitHub
popover component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary

- Introduce a variant of `ic-menu-item` that has the role [`menuitemradio`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role)
- Introduce a variant of `ic-menu-group` that acts as a radio group to allow the radio menuitems to work together
- Introduce a variant of `ic-popover-menu` that acts as a radio group to allow the radio menuitems to work together

## 💬 Description
Currently, we have a variant of `ic-menu-item` that has the role `menuitemcheckbox` (`variant="toggle"`). It would be nice to have a variant of `ic-menu-item` that has the role `menuitemradio`.

## 💰 User value
This would allow users to create a menu where menuitems are mutually exclusive to each other

[See CodePen example of menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/)(role="menuitemradio" can be seen with the "Text align" menu items)

## ✏ Designs
In terms of design, it may be nice for the radio menu items follow the same design as toggle menu items

Contributor guide

Open the contributing guide

Research direction

Start by reading the existing `ic-menu-item` toggle variant and the related `ic-menu-group` and `ic-popover-menu` implementations. Compare their behavior with the linked `menuitemradio` guidance and CodePen example; done means the requested radio variants support mutually exclusive menu items and follow the existing toggle-item design.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.