<basses:matrix.org> htmhell.dev/adventcalendar/2025/27 Replacing JS with just HTML

<redsh4de:matrix.org> @basses:matrix.org: i really really want to integrate the popover pattern for dropdowns, it would improve the UX so much for them

<redsh4de:matrix.org> only thing holding it back is that its not supported on ESR yet

^ I have js-less dropdowns on blocks explorer :)

<basses:matrix.org> this?

<basses:matrix.org> mrelay.p2pool.observer/m/matrix.org/nuaYUzyCsnOISgpfXafDJgIx.png (clipboard.png)

<basses:matrix.org> blocks.p2pool.observer

yep, all of them

<basses:matrix.org> we basically want something so we can close the dropmenu for Download button here beta.monerodevs.org/downloads

<basses:matrix.org> @basses:matrix.org: without js

in mine clicking elsewhere (or focusing) not on the menu closes it

<basses:matrix.org> by clicking away

<basses:matrix.org> also for language selection icon at top-right

same on phone view

<redsh4de:matrix.org> it also must be accessable - keyboard nav should trigger it

yeah, tabindex. sadly I set mine to -1 but it can be calculated for proper tabbing

<redsh4de:matrix.org> currently using the details/summary pattern, which works but has the drawback of only being closable if you click on the button again

it works using that selection mode

<redsh4de:matrix.org> im using a :focus-based pattern in the header dropdowns like on the Observer i assume, because those work on desktop with clickaway - and on mobile the header converts into a accordion-like structure, where that's not needed

<redsh4de:matrix.org> I tried the same focus pattern on standalone dropdowns, it worked - but only on desktop - iOS didn't seem to respect :focus or :focus-active, so the dropdowns opened on desktop, but not on mobile