3 ms·

Of straight HTML, <details> is certainly the most appropriate semantically (and it’s what I use on my site). This particular site would find it mildly difficult

Of straight HTML, <details> is certainly the most appropriate semantically (and it’s what I use on my site). This particular site would find it mildly difficult to apply since the picker body affects layout but is in a different part of the document to the button, but since its height is known it could just barely be done. Another semantically-reasonable possibility which allows separation of source and destination would be using a button with appropriate aria-controls and aria-expanded to link it to the picker body; and probably giving that body the dialog role.

runarberg 4y ago
Yeah I agree. I probably would have used a non-modal dialog here. You can actually absolutely position (or, rather sticky positioned) the body of the <details> to the top. But I think the dismiss button, inside the dialog warrants it being a <dialog>. Dialogs usually open with a <button> (so that answers that question), and you would open this by calling dialog.show()—as opposed to the usual dialog.showModal()—since you don’t want to capture the focus. The Benefit of using the <dialog> element is that you can put it anywhere you want inside your DOM structure and allow it to interact with the page however you want to.