Progressively enhanced menu buttons with details/summary

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).

And there is GitHub's approach that uses the details and summary element for a menu, making the whole construct work even without JavaScript (in nearly every browser). Here's the birds-eye view of their approach:

<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 <details-menu> custom element
• 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