I am using this package on a React site using Compositor's x0. When building the site to static files, I get the following error:

building static sitewebpack:///./node_modules/@github/details-menu-element/dist/index.esm.js?:15
Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
                                                ^

ReferenceError: HTMLElement is not defined
    at eval (webpack:///./node_modules/@github/details-menu-element/dist/index.esm.js?:15:49)
    at Module../node_modules/@github/details-menu-element/dist/index.esm.js (/Users/chasemccoy/Repositories/playground/dist/TEMP/App.js:323:1)
    at __webpack_require__ (/Users/chasemccoy/Repositories/playground/dist/TEMP/App.js:30:30)
    at eval (webpack:///./src/details/index.mdx?:14:1)
    at Object../src/details/index.mdx (/Users/chasemccoy/Repositories/playground/dist/TEMP/App.js:5981:1)
    at __webpack_require__ (/Users/chasemccoy/Repositories/playground/dist/TEMP/App.js:30:30)
    at webpackContext (webpack:///./src_sync_\.(js%7Cmd%7Cmdx%7Cjsx)$?:18:9)
    at eval (webpack:///./node_modules/@compositor/x0/src/entry.js?:116:15)
    at Array.map (<anonymous>)
    at getComponents (webpack:///./node_modules/@compositor/x0/src/entry.js?:112:6)

From what I can tell, this has to do with the HTMLElement object not being present outside of the browser. Is there anything that can be done to this package to support server rendering? If not, is there a way I can work around this?

https://github.github.io/details-menu-element/examples/ looks like this for me at the moment:

No errors in the browser console so I'm not sure what's wrong.

fefef

before:

<details>
    <summary>Best robot: <span data-menu-button>Unknown</span></summary>
    <details-menu>
      <label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Hubot</label>
      <label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Bender</label>
      <label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> BB-8</label>
    </details-menu>
  </details>

after:

<details>
    <summary>Best robot: <span data-menu-button> ( set text of checked input without click on labels ) [Hubot] </span></summary>
    <details-menu>
====> <label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot" class="selected" aria-selected="true" aria-checked="true" checked> Hubot</label>
      <label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Bender</label>
      <label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> BB-8</label>
    </details-menu>
  </details> 

Currently hovered/focused items and selected items both have the aria-selected=true, which makes it hard to tell which is already selected, and which is to be selected.

Perhaps aria-current? https://www.w3.org/TR/wai-aria-1.1/#h-note-38

In some use cases for widgets that support aria-selected, current and selected can have different meanings and can both be used within the same set of elements. For example, aria-current="page" can be used in a navigation tree to indicate which page is currently displayed, while aria-selected="true" indicates which page will be displayed if the user activates the treeitem.

Notes:

• We might need to consider if there's a difference in semantics when the menu is not used in a navigation context.
• Do not apply when item is menuitemcheckbox (when multiple selection is possible).

cc @github/web-systems

Escape event.preventDefault() even when the menu is not opened.

Demonstrated here: https://html-is.glitch.me/throwaway/dialog-and-menu.html

With details[open] > details-dialog > details[open] > details-menu user is not able to escape all the way out when focusing on the summary for the details-menu.

With details[open] > details-menu > details[open] > details-dialog user is able to escape all the way out when focusing on the summary for the details-dialog.

Would be great to have the example file served as a live demo, e.g. using gh-pages

Hi,

Will it be possible to focus the first menu item when it opens without it being an input element necessarily? This is how it is currently defined.

For accessibility, in most dropdowns, when pressing the button, the focus is expected to go to the first menu item, that doesn't happen currently.

I can try to make a pr to fix this if you agree.

Thanks!

The events are emitted 3 times using role="menuitemradio", when using other roles only single event is emitted.

I think the problem is in this line:

[role="menuitemradio"] is interacting with both change and click events from <details>.

This is a problem since the first time details-menu-selected is fired, the radio button is still unchecked.