Progressively enhanced menu buttons with details/summary [updated]
While researching for the accessible approach to menu buttons in Vue this week, I couldn't help myself but to open my browser's dev tools on every "menu button" sighting I came across, curious how the respective team or developer implemented it.
The concept of a "menu" of any kind is often found in profile dropdows. Some websites decide to not use a semantic menu at all, "just" showing a div or list on click and releasing its content into the tab order, (dev.to, for example).
<details> <summary>Click me</summary> <details-menu role="menu"> <!-- a custom element --> <li><button type="button" role="menuitem">Agnetha</button></li> <li><button type="button" role="menuitem">Björn</button></li> <li><button type="button" role="menuitem">Benny</button></li> <li><button type="button" role="menuitem">Anni-Frid</button></li> </details-menu> <details>
I won't try to explain it any further - because:
- GitHub put their approach on, well, GitHub: the
- Mu-An Chiou, Web Systems Engineer at GitHub, not only did a presentation about their technique (link to slides), but supplied a details on details document with further links and anecdotes
- Mu-An is approachable on Twitter, offering to chat about her approach
Update February 8th, 2019:
I just learned that the ARIA Authoring practice regarding Navigation and Action menus is somehow controversial. GitHub, using the design pattern of the Authoring Practice, via Mu-An Chiou, has signaled that they are aware of this problem, and so is Ryan Florence who built a React Reach UI component according to this authoring practice.