Dave Rupert on why that (wonderful) way of Using the
<details> element to create modals and menus is not good for semantics.
role="button", it eats the semantic content of elements inside it.
So that big
<h1> inside of your
<summary> becomes just another piece of text, sans semantics.
I especially like this part of his post too:
At the risk of being a broken record; HTML really needs
<tooltip>elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements. A new set of accessible controls for a modern era…
💁♂️ FYI: We already have a
<dialog> element, as detailed here. At the time of writing it is supported in Chrome (by default) and in Firefox (behind a flag). A polyfill is available.