5 ms·

This button should have been a <details> <summary>. And this rule of thumb is also incorrect (albeit by technicality). A form submit button goes somewhere (to

This button should have been a <details> <summary>. And this rule of thumb is also incorrect (albeit by technicality). A form submit button goes somewhere (to the action response) and is a button. I agree with the sentiment though, in general: - If you are navigating through the page, use a link, - if you are performing an action, use a button, (and in addition) - if you are reveling some information, use a <details> <summary>

kortex 4y ago
I just learned about using this tag in github comments for hiding full tracebacks or large code blocks and it is such a usability game changer.
chrismorgan 4y ago
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.
kilian 4y ago
There are multiple reasons why details/summary are bad semantics, outlined in this article: https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html https://adrianroselli.com/2019/04/details-summary-are-not-in...
- runarberg 4y ago
  This article is self admittedly out of date. And where it is not, it is listing opinionated widgets types the author doesn’t think that <details> <summary> is not a replacement for. The OP widget is non of these, I would say it is an open question whether <details> <summary> is the right choice here.

kortex 4y ago

I just learned about using this tag in github comments for hiding full tracebacks or large code blocks and it is such a usability game changer.

chrismorgan 4y ago

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.

kilian 4y ago

There are multiple reasons why details/summary are bad semantics, outlined in this article: https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html https://adrianroselli.com/2019/04/details-summary-are-not-in...

runarberg 4y ago
This article is self admittedly out of date. And where it is not, it is listing opinionated widgets types the author doesn’t think that <details> <summary> is not a replacement for. The OP widget is non of these, I would say it is an open question whether <details> <summary> is the right choice here.