Update menu explainer #1215
Open
Update menu explainer #1215
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR is a bunch of suggested changes / clarifications for the content of the explainer. Fleshing out some ideas, updating some alt text to be more accurate, stuff like that. There is no associated issue for this work.
scottaohara
requested review from
domfarolino,
dizhang168,
josepharhar and
mfreed7
as code owners
scottaohara
commented
May 13, 2025
hidde
reviewed
May 13, 2025
|
|
||
| The `<select>` element is a form-associated element and contains `<option>` elements. Each of these `<option>` elements must have a server-readable value. As a user chooses an option, specific events are triggered (change, input) and a new value is set. | ||
|
|
||
| On the other hand, the proposed `<menulist>` element should be used to display a list of commands/actions. Each `<menuitem>` should be thought of as a command that is activable. That action could be to open a new nested menulist element or to trigger a specific command. It must adhere to [ARIA guidelines for menu and menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/). | ||
| On the other hand, the proposed `<menulist>` element should be used to display a list of commands/actions. Each `<menuitem>` should be thought of as a command that is activable. That action could be to open a new nested menulist element or to trigger a specific command. It is not generally expected for the invoking element's value or visible label to be modified when activating a `<menuitem>`. It must adhere to ARIA guidelines for [menu and menubar patterns](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/). |
There was a problem hiding this comment.
not part of your change, but I don't think “activable” is a word? And it's not very clear what “command that is activable” is. Maybe we can fix at the same time
Suggested change
| On the other hand, the proposed `<menulist>` element should be used to display a list of commands/actions. Each `<menuitem>` should be thought of as a command that is activable. That action could be to open a new nested menulist element or to trigger a specific command. It is not generally expected for the invoking element's value or visible label to be modified when activating a `<menuitem>`. It must adhere to ARIA guidelines for [menu and menubar patterns](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/). | |
| On the other hand, the proposed `<menulist>` element should be used to display a list of commands/actions. Each `<menuitem>` should be thought of as performing a specific action. That action could be to open a new nested menulist element or to trigger a specific command. It is not generally expected for the invoking element's value or visible label to be modified when activating a `<menuitem>`. It must adhere to ARIA guidelines for [menu and menubar patterns](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/). |
| @@ -168,7 +171,7 @@ Additionally - command is a single element, where as this proposal is introducin | |||
|
|
|||
| The [`<menu>`](https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element) element already exists, but it is very barebones. It represents a "toolbar" but is exposed no differently than an unordered list containing list items, each list item then representing a command (represented by a button element) that the user can perform or activate. There is a lot of nuance between the various menu patterns (menubar, navigation menu, toolbar) that this one element cannot differentiate. It has no special keyboard behavior nor unique ARIA roles mapping beyond the implicit roles of the elements it represents. Due to these legacy restrictions, we recommend not modifying it and instead depend on the new elements `<menubar>` and `<menulist>`. | |||
|
|
|||
| You can read more about what the menu element is and isn’t, [here](https://www.scottohara.me/blog/2021/10/21/menu.html). | |||
| You can read more about what the `<menu>` element is and isn’t, [here](https://www.scottohara.me/blog/2021/10/21/menu.html). | |||
There was a problem hiding this comment.
maybe we could improve link text?
Suggested change
| You can read more about what the `<menu>` element is and isn’t, [here](https://www.scottohara.me/blog/2021/10/21/menu.html). | |
| You can read more about what the `<menu>` element is and isn’t, in Scott O'Hara's blog post [Semantic `<menu>` context](https://www.scottohara.me/blog/2021/10/21/menu.html). |
| * Menuitems within a menubar are displayed horizontally by default. | ||
| * Supports :disabled, disabled attribute | ||
| * Menubars commonly represent a series of `<menuitem>`s that are used to open their own submenus (menulists) of commands. | ||
| * Unlike menulists, menubars are rendered **in-page** rather than as a popover, so their menuitems are persistently available. |
There was a problem hiding this comment.
we could consider saying “part of normal flow” here instead of “in-page”? (like in CSS)
There was a problem hiding this comment.
that's fine by me. i just kept that term as it was previously written
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is a bunch of suggested changes / clarifications for the content of the explainer. Fleshing out some ideas, updating some alt text to be more accurate, stuff like that.
There is no associated issue for this work.