Skip to content

feat(menu): allow overriding the popover role - #565

Merged
kelsos merged 1 commit into
rotki:mainfrom
kelsos:feat/menu-role
Jul 31, 2026
Merged

feat(menu): allow overriding the popover role#565
kelsos merged 1 commit into
rotki:mainfrom
kelsos:feat/menu-role

Conversation

@kelsos

@kelsos kelsos commented Jul 31, 2026

Copy link
Copy Markdown
Member

Closes #564

Problem

RuiMenu hardcoded role="menu" on its teleported popover, with no attrs spread and no prop to change it. RuiMenu is the popover primitive for things that are not menus, and the container role forces the ARIA model: a listbox cannot nest inside a menu, so an input that opens one cannot legitimately be a combobox.

Change

  • New role prop on RuiMenu: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog', defaulting to 'menu'.
  • The activator wrapper's aria-haspopup is derived from it so the two agree. For the default it still emits aria-haspopup="true", which is equivalent to "menu", so existing callers and their tests see no change.
  • RuiMenuRole is exported from the components entry.
  • Storybook control + unit tests for the default, a custom role, and the matching aria-haspopup.
<RuiMenu role="listbox">
  <!-- role="option" rows, opened by a role="combobox" input -->
</RuiMenu>

Notes

The library's own selection components (RuiAutoComplete, RuiMenuSelect, ...) still use the default menu role. Moving them to the listbox/combobox model is a larger change (option roles, aria-activedescendant, aria-selected) and is left out of this PR.

Testing

  • pnpm run test:run (1346 passing)
  • pnpm run typecheck
  • pnpm run lint (no new warnings)

RuiMenu hardcoded role="menu" on its teleported popover, which forces the
ARIA model on every consumer. That is wrong when the content is a selection
list: a listbox may not nest inside a menu, so an input opening it cannot be
a combobox.

Add a `role` prop (menu | listbox | tree | grid | dialog) defaulting to
"menu", and derive the activator's aria-haspopup from it so the two agree.
The default keeps emitting aria-haspopup="true", which is equivalent to
"menu", so nothing changes for existing callers.

Closes rotki#564
@kelsos
kelsos requested a review from a team as a code owner July 31, 2026 12:12
@kelsos
kelsos merged commit 2d00877 into rotki:main Jul 31, 2026
11 checks passed
@codecov-commenter

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.04%. Comparing base (36f6b59) to head (2d00877).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #565   +/-   ##
=======================================
  Coverage   87.04%   87.04%           
=======================================
  Files         159      159           
  Lines        6306     6307    +1     
  Branches     1938     1939    +1     
=======================================
+ Hits         5489     5490    +1     
  Misses        817      817           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RuiMenu hardcodes role="menu", blocking listbox/combobox patterns

2 participants