Дизайнер попросил убрать рамку фокуса, и форму стало невозможно пройти с клавиатуры
После жалобы «при клике по кнопке появляется некрасивая рамка» в глобальные стили добавили:
*:focus { outline: none; }
Теперь пользователи, которые перемещаются по форме клавишей Tab, не видят, где находятся. Как совместить оба требования?
- Показывать обводку через :focus-visible — браузер включает её при навигации с клавиатуры
- Вернуть outline только для полей ввода, у кнопок оставить none
- Показывать обводку через :hover вместо :focus
- Добавить tabindex="-1" кнопкам, чтобы на них не было фокуса по клику