:focus-visible examples
on readonly elements
This Glitch shares an example where
:focus-visible is intended on read-only element such as
a div.
In the cards below, only the item names are links. But we make the
whole cards access points for navigation to product detail pages.
And we give the whole card some
:hover style, making it look lifted up a little when
hovering. For keyboard users, however, we think our hover UI is too
subtle. Because the users aren't pointing with a cursor, we would
like to give them some more apparent indicators to show where the
current focus is.
However, if we use :focus for this purpose, clicking on
the card will render the focus ring too on Chrome and Firefox (see
second card). That's why we are looking into
:focus-visible as it is closest to our intention of
"focus but for keyboard users". But this doesn't work well currently
in Safari.
On Safari (with :focus-visible flag on), it seems the card tries to
show like half a pixel of our :focus-visible style when
tabbing onto (bug?). But it will show them in full after
subsequently hovering on the card (defeats the purpose of helping
people find focus when accessing using keyboard, and too bold for
hovering). It seems the divs with tabindex="0" will
render a default outline too when clicked (but we'd rather it uses
our specified styles when :focus-visible).
