: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).