responsive/no-hover-only

Why

Touch screens have no hover, and keyboard users never hover. Edit buttons, submenus or details that appear only under the mouse are missing for them, or appear only by accident on a tap.

Fix

Reveal the same content on :focus-within of the container (or :focus-visible of the trigger), and on touch show it by default or behind a button. With Tailwind, pair group-hover: with group-focus-within:. A menu that opens on hover also needs a button that opens it, and content that appears must stay until dismissed (Escape).

Examples

/* bad */
.card:hover .card__actions { display: flex; }
/* good */
.card:hover .card__actions,
.card:focus-within .card__actions { display: flex; }

Sources

• web.dev, Learn Responsive Design, Interaction
• WCAG 2.2, Understanding SC 2.1.1 Keyboard
• WCAG 2.2, Understanding SC 1.4.13 Content on Hover or Focus
• MDN, :focus-within

Read it in the terminal

npx github:dawidolko/frontend-skills explain responsive/no-hover-only