responsive/no-hover-only

Dlaczego

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.

Poprawka

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

Przykłady

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

Źródła

• 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

Przeczytaj w terminalu

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