Accessible hover buttons #190
Unanswered
appsforartists
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Consider an interface with a list of images. Each image has a delete button that removes it from the list. Because you don't know what color the images will be, there's a scrim behind the buttons. The scrim and the buttons appear on hover. (The users have mice, so touch usability of hover effects is not a concern.)
You can implement this in jsxstyle like so:
This is a good first pass, but it's not keyboard accessible. You can get closer by adding these rules to the delete
Block
:Now you can tab to the button, but it will remain hidden if the image isn't being hovered over. (This is actually worse, because now you can delete the image without seeing any delete affordances.)
Is there an idiomatic way to express in jsxstyle "if my descendants have focus, change my opacity"? I'd rather not resort of manual pointer events when CSS is supposed to handle this case.
Beta Was this translation helpful? Give feedback.
All reactions