Skip to content

[menu] allow buttons to open menu(list) popups #1196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
scottaohara opened this issue Apr 17, 2025 · 3 comments · May be fixed by #1216
Open

[menu] allow buttons to open menu(list) popups #1196

scottaohara opened this issue Apr 17, 2025 · 3 comments · May be fixed by #1216
Assignees
@scottaohara
Labels
menu Menu elements proposal needs edits This is ready for edits to be made

Comments

@scottaohara
Copy link
Collaborator

the common expectation on how to build single instances of menu popups in UI is to invoke them from button elements.

<button aria-haspopup=menu aria-expanded=...>
  foo
</button>
<el-menu role=menu>
  <!-- menuitems here -->
</el-menu>

in the menu proposal this use case should be covered - and this could be supported by the command/commandfor attributes, as one idea.

originally, button type=menu was how this had been previously spec'd back when menu was attempting to be something more than another way to spell ul.
@scottaohara scottaohara added agenda+ Use this label if you'd like the topic to be added to the meeting agenda menu Menu elements proposal labels Apr 17, 2025
@lukewarlow
Copy link
Collaborator

+1 for <button command="bruce" commandfor="menu"><menulist id="menu">... that handles the aria for you.

@scottaohara scottaohara self-assigned this May 8, 2025
@scottaohara
Copy link
Collaborator Author

add some examples to indicate when people might use this - and provide some examples of when someone might use these vs a menubar to open a menulist

@css-meeting-bot
Copy link

The Open UI Community Group just discussed [menu] allow buttons to open menu(list) popups, and agreed to the following:

  • RESOLVED: Support opening menulists via buttons with a new command value.
The full IRC log of that discussion <hdv> scott: commonly if someone wants to invoke a menu or menu list, like 'dot dot dot'/kebab buttons that open a context menus, those are `button` elements
<hdv> scott: in the google doc there was an example of a menu item that opens a submenu. More common practice is to use a button element, would like us to cover that in the explainer
<hdv> +1
<lwarlow> q+
<masonf> +1
<gregwhitworth> q?
<lwarlow> +1
<gregwhitworth> ack lwarlow
<hdv> lwarlow: +1
<masonf> q+
<keithamus> q+
<lwarlow> Proposed Resolution: Support opening menulists via buttons with a new command value.
<hdv> dom9: probably got lost between doc and explainer, we'll try and make sure it gets reflected in the explainer
<gregwhitworth> ack masonf
<hdv> scott: wouldb e happy to propose
<gregwhitworth> ack keithamus
<hdv> s/wouldb e/would be
<masonf> q+
<hdv> keithamus: if I had a kebab menu it would be a button[commandfor], if I want to add one more button next to the kebab menu, I need to change the element and then add a wrapper. Is there a way we can make it such that 1 or n would be the same pattern?
<hdv> dom9: what's a kebab menu?
<hdv> keithamus: three dots
<lwarlow> q+
<hdv> scott: so someone has a single button, and wants to add a second button, they think it would now need to be a menubar
<hdv> keithamus: I could envision an example of a design system where you have a kebab button in the system and when you copy it from the design system… you'd need to refactor a lot
<hdv> scott: fair question… it's a bit of a grey area of… what does the author intend, eg what do they want this to be exposed as?
<hdv> scott: in our design system, we have examples like, if you create some global controls they probably go to a menu bar, if you have one offs, they could be menu bar, or toolbars… what you're talking about now, is probably two buttons next to each other
<hdv> keithamus: so first menu button could be either a menu bar or just a singular button
<masonf> q-
<hdv> scott: they are typically differently styled
<hdv> scott: menu bars often look grouped, by having a visual grouping container… and yeah of course there are cases where designers make 2 singular adjacent buttons look exactly the same as a menubar with two items… but then, congrats, you've made a confusing design
<gregwhitworth> q?
<gregwhitworth> ack lwarlow
<hdv> dom9: it sounds like this is not an accessibility concern. Maybe we could add a little note to explainer to explain difference between singular buttons vs items in a menubar
<hdv> lwarlow: with toolbar if there's less than x items, we could say it's not really a toolbar… maybe there's something like that with menus too?
<hdv> q+
<gregwhitworth> ack hdv
<gregwhitworth> hdv: I think it's a difference in intent with lists
<gregwhitworth> hdv: you can have a list with 1 item which is weird but it's still viable
<masonf> q+
<gregwhitworth> hdv: you can have multiple things that make sense here
<gregwhitworth> ack masonf
<hdv> s/intent with lists/in what the author intents and what the semantics it results in
<lwarlow> Proposed Resolution: Support opening menulists via buttons with a new command value. Add examples to explainer to differentiate between menubar with item menuitem and a single button.
<keithamus> q+
<masonf> +1
<dom9> +1
<gregwhitworth> ack keithamus
<lwarlow> Proposed Resolution: Support opening menulists via buttons with a new command value. Add examples to explainer to differentiate between menubar with single menuitem and a standalone button.
<hdv> keithamus: to clarify, does that mean you can put a button inside of a menu or is that disallowed?
<keithamus> +1
<masonf> +1 still
<hdv> scott: disallowed. This proposal was for opening a menu list outside of a menubar
<hdv> +1
<lwarlow> +1
<hdv> scott: I meant it a little differently from the resolution, but would be fine to add examples
<hdv> lwarlow: I can drop the examples
<masonf> +1 still still
<lwarlow> +2
<dom9> +1 still
<hdv> gregwhitworth: examples seem fine
<lwarlow> RESOLVED: Support opening menulists via buttons with a new command value.

@lukewarlow lukewarlow added needs edits This is ready for edits to be made and removed agenda+ Use this label if you'd like the topic to be added to the meeting agenda labels May 11, 2025
@scottaohara scottaohara linked a pull request May 13, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@scottaohara scottaohara

Labels
menu Menu elements proposal needs edits This is ready for edits to be made
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[menu] - invoke menulists from button elements openui/open-ui
3 participants
@scottaohara @css-meeting-bot @lukewarlow