VibeCoderzVibeCoderz
UX/UI

Focus trap

Также: Ловушка фокуса

Focus trap — это механизм в интерфейсе, который удерживает курсор внутри открытого окна, не давая ему выйти за пределы активного элемента.

Focus trap (ловушка фокуса) — это программное ограничение, которое заставляет пользователя перемещаться только по элементам текущего окна, например, модального диалога или выпадающего меню. Когда вы открываете окно, фокус «запирается» внутри него: нажимая клавишу Tab, вы переходите от кнопки к кнопке, но не можете случайно «выпрыгнуть» на элементы, которые находятся на заднем плане.

Представьте, что вы зашли в лифт. Пока двери закрыты, вы можете нажимать только кнопки внутри кабины. Вы не можете нажать кнопку вызова лифта на этаже, пока не выйдете наружу. Focus trap работает точно так же: он удерживает ваше внимание и действия внутри важного контекста, пока вы его не закроете.

Зачем это нужно

Для вайбкодера и разработчика интерфейсов это критически важная штука для доступности (Accessibility). Если не настроить ловушку фокуса, пользователи, которые пользуются только клавиатурой или скринридерами, могут потеряться в интерфейсе, случайно активируя скрытые элементы на фоне, что ломает логику работы приложения.

Связанные термины

Частые вопросы

Это способ управления фокусом в браузере, который не позволяет пользователю выйти за пределы активного окна или модального диалога при навигации с клавиатуры.