15:39:16
basses:matrix.org:
https://www.htmhell.dev/adventcalendar/2025/27 Replacing JS with just HTML
15:40:20
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
15:40:25
redsh4de:matrix.org:
only thing holding it back is that its not supported on ESR yet
15:42:44
DataHoarder:
^ I have js-less dropdowns on blocks explorer :)
15:46:28
basses:matrix.org:
this?
15:46:30
basses:matrix.org:
https://mrelay.p2pool.observer/m/matrix.org/nuaYUzyCsnOISgpfXafDJgIx.png (clipboard.png)
15:46:37
basses:matrix.org:
https://blocks.p2pool.observer/
15:47:47
DataHoarder:
yep, all of them
15:47:49
basses:matrix.org:
we basically want something so we can close the dropmenu for Download button here https://beta.monerodevs.org/downloads/
15:48:02
basses:matrix.org:
@basses:matrix.org: without js
15:48:19
DataHoarder:
in mine clicking elsewhere (or focusing) not on the menu closes it
15:48:19
basses:matrix.org:
by clicking away
15:48:40
basses:matrix.org:
also for language selection icon at top-right
15:48:45
DataHoarder:
same on phone view
15:48:52
redsh4de:matrix.org:
it also must be accessable - keyboard nav should trigger it
15:49:45
DataHoarder:
yeah, tabindex. sadly I set mine to -1 but it can be calculated for proper tabbing
15:49:57
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
15:50:00
DataHoarder:
it works using that selection mode
15:55:21
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
15:55:21
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