Interaction without JavaScript: common UI elements with a CSS-only pattern

Re:Interaction without JavaScript: common UI elements with a... by mcbits on Sunday May 22, 2016 @04:38PM (#11750182)

Is there any sort of trick that would let CSS respond to the Escape key? Modals that don't close via keypress are a pet peeve, so I can't see using a CSS-only approach if that's not possible. Otherwise, these are pretty nifty! Could be useful if you're trying to avoid all JS for some reason.

[ Parent | on HN ]

Re:Interaction without JavaScript: common UI elements with a... by Lerc on Sunday May 22, 2016 @05:51PM (#11750445)

In essence the modals are bound to the state of a checkbox. For this technique to work with escape The question thus becomes "Can you uncheck a checkbox with escape, without JavaScript"

It's not a completely unreasonable thing to ask for.

Seems you can get close with the accesskey attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

It's not very standardized though, you need qualifiers and escape on its own doesn't seem to be available,

I don't know how it interacts with display:none .Ideally accesskey does not apply to display:none items so you could accesskey the same key for many modal close buttons and only have the visible one activate.

[ Parent | on HN ]