Skip to content

Commit afa573f

Browse files
authored
[menu] Add a reading list with links (#1208)
* [menu] Add a reading list with links * Review: format and disclosure links * Fix deploy failure
1 parent a0237fd commit afa573f

File tree

1 file changed

+51
-2
lines changed

1 file changed

+51
-2
lines changed

site/src/pages/components/menu.explainer.mdx

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ We should support `<fieldset>` and `<legend>` to help group the menu items toget
142142

143143
We should support specific use cases of interactive elements outside the `<menuitem>`. For example, if the user wants to add an `<input type=search>` element, it should not be wrapped inside a `<menuitem>` and should instead be a sibling of `<menuitem>`s.
144144

145-
<img src="/images/menubar-search-input.png" alt="menubar examples with search input as a sibling of menuitems">
145+
<img src="/images/menubar-search-input.png" alt="menubar examples with search input as a sibling of menuitems" />
146146

147147

148148
## Questions
@@ -366,7 +366,6 @@ There are ARIA guidelines for the [toolbar](https://www.w3.org/WAI/ARIA/apg/patt
366366

367367
There is a history of attempting to do this in Webkit, for example for a [Touch Bar](https://github.com/whatwg/html/issues/3251). The idea for this is to collect all your "commands" and put them into the macOS menu bar (or expose them some other way). This proposal will not address this yet.
368368

369-
370369
## Examples in code
371370

372371

@@ -402,3 +401,53 @@ bold.addEventListener("click", () => {
402401
});
403402
</script>
404403
```
404+
405+
## Reading List
406+
407+
Menus have been heavily discussed, please see below to learn about the existing specification and efforts.
408+
409+
### ARIA guidelines
410+
- the ARIA [menu role](https://w3c.github.io/aria/#menu)
411+
- the ARIA [menubar role](https://w3c.github.io/aria/#menubar)
412+
- the ARIA [menuitem role](https://w3c.github.io/aria/#menuitem)
413+
- the ARIA [menuitemcheckbox role](https://w3c.github.io/aria/#menuitemcheckbox)
414+
- the ARIA [menuitemradio role](https://w3c.github.io/aria/#menuitemradio)
415+
- the [Core AAM mappings](https://www.w3.org/TR/core-aam-1.2/#role-map-menu)
416+
- the [HTML AAM for &lt;menu>](https://www.w3.org/TR/html-aam-1.0/#el-menu)
417+
418+
### Relevant ARIA issues
419+
- [ARIA] [Consider allowing combobox to open menus](https://github.com/w3c/aria/issues/2050)
420+
421+
### Relevant Navigation specific issues
422+
- [ARIA practices] [Clarify Purpose of Menu Navigation](https://github.com/w3c/aria-practices/issues/353)
423+
- [OpenUI] [Navigation vs menu items use case](https://github.com/openui/open-ui/issues/1193)
424+
- [ARIA] [Concerning navigation "menus" (open ui related)](https://github.com/w3c/aria/issues/2510)
425+
426+
### APG pattern recommendations (note these are not guidelines)
427+
- [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)
428+
- [menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
429+
- [menubar example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/)
430+
- [menubar navigation example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/)
431+
- [disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)
432+
- [disclosure navigation menu example](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
433+
- [disclosure navigation menu with top-level links example](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/)
434+
- [toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)
435+
436+
### HTML specification
437+
- The [menu element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element)
438+
- The [nav element](https://html.spec.whatwg.org/multipage/#the-nav-element)
439+
440+
### HTML specification for previous efforts
441+
- The [obsoleted menuitem element](https://html.spec.whatwg.org/multipage/obsolete.html#menuitem)
442+
- The [obsoleted type attribute on menu element](https://html.spec.whatwg.org/multipage/obsolete.html#attr-menu-type)
443+
444+
### Blog posts from accessibility community
445+
- https://www.scottohara.me/blog/2021/10/21/menu.html
446+
- https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html
447+
- https://adrianroselli.com/2019/06/link-disclosure-widget-navigation.html
448+
- https://adrianroselli.com/2023/05/be-careful-using-menu.html
449+
450+
### Blog posts for Design System
451+
- https://webflow.com/blog/navigation-bar-design
452+
- https://developer.apple.com/design/human-interface-guidelines/the-menu-bar
453+

0 commit comments

Comments
 (0)