Управление фокусом в Unpoly решает задачу сохранения пользовательского контекста при частичном обновлении DOM. После загрузки новых фрагментов страницы важно корректно восстанавливать точку внимания, чтобы интерфейс оставался предсказуемым и доступным. Механизм фокуса в Unpoly работает как с нативными средствами браузера, так и с собственными политиками, задающими предпочтительный элемент для установки фокуса после обновления.
Фокус размещается там, где пользователь ожидает его увидеть. После успешного взаимодействия браузер традиционно перемещает фокус на элемент, который инициализировал действие, но при динамической подгрузке это поведение теряется. Unpoly восстанавливает его автоматически, выявляя элементы, которые инициировали обновление (например, ссылки или кнопки), и стараясь вернуть пользователя в тот же контекст.
Определение целей фокуса. Фокус может назначаться:
Unpoly может назначать фокус на элементы, помеченные атрибутами вида:
up-focusПри наличии этого атрибута элемент будет выбран движком фокусировки после вставки фрагмента. Если таких элементов несколько, выбирается первый по порядку в дереве DOM.
В случае потребности указать фокус по CSS-селектору используется:
up-focus=".selector"Это позволяет обозначать элементы не напрямую, а через правила выбора.
При частичных обновлениях применяется политика приоритета. По умолчанию Unpoly использует следующую последовательность:
Эта последовательность допускает переопределения. Политики могут указываться глобально при конфигурации или локально для конкретного запроса через параметры JavaScript-API.
Корректное управление фокусом играет ключевую роль в доступности. Пользователи экранных читалок и клавиатурной навигации ориентируются на позицию курсора. Unpoly сохраняет навигационную логику даже при сложных обновлениях интерфейса, минимизируя потерю ориентации.
Особо важна работа с диалогами и уведомлениями. При открытии диалога фокус переносится внутрь него, а при закрытии возвращается на элемент, инициировавший открытие. Это согласуется с требованиями ARIA-технических описаний для модальных окон.
Обновление форм часто требует сохранения положения курсора и выделения текста. Unpoly обрабатывает эти случаи специальным образом: при обновлении полей ввода сохраняются значения и позиции каретки, если это возможно. При полной подмене формы фокус переносится к первому активному полю, избегая неожиданного перемещения статического контента.
Появление динамических компонентов иногда требует задержки. Например, если после обновления необходимо дождаться анимации или вставки вложенных элементов. Для этого Unpoly предусматривает вызовы API, позволяющие отложить перенос фокуса до завершения операций. Это предотвращает скачки и потерю интерактивности.
При обновлении крупных фрагментов (например, центральной части страницы) возникает риск потери ориентации. В подобных сценариях предпочтение отдаётся явному указанию точки фокуса. Использование атрибутов позволяет жестко задать, где будет находиться курсор после обновления, избавляя от неоднозначности и орфанных переходов.
Если запрос вернул ошибку, Unpoly сохраняет фокус на инициаторе действия или переносит его внутрь отображаемого сообщения об ошибке. Такой подход обеспечивает логичную последовательность: пользователь видит проблему и может сразу начать взаимодействие с формой или диалогом без необходимости вручную искать соответствующий элемент.
Unpoly не ограничивает использование сторонних библиотек. При
создании собственных компонентов важно учитывать порядок их подключения
и момент вставки в DOM. При появлении нового интерактивного элемента
желательно позаботиться о том, чтобы он мог корректно принимать фокус.
Использование стандартных HTML-атрибутов типа tabindex и
арийных ролей обеспечивает совместимость с внутренними механизмами
Unpoly.
Возможна глобальная настройка поведения фокуса через JavaScript-конфигурацию. Это позволяет задавать стратегию на весь интерфейс: отключить автоматическую фокусировку, изменить приоритеты или установить строгую политику для диалогов. Конфигурационный подход удобен при создании UI-фреймворков поверх Unpoly или при стандартизации корпоративного интерфейса.
Анимации осложняют работу с фокусом: элемент может быть ещё не доступен для ввода или временно скрыт. Unpoly отслеживает окончание переходов и только после этого перемещает фокус. Таким образом исчезают разрывы между визуальными и интерактивными состояниями.
В больших приложениях обновления происходят последовательно и разрозненно. Механизм фокусировки должен выдерживать многократные операции без потери логики. Unpoly учитывает контекст каждого шага, избегая каскадных переносов фокуса и сохраняя общую навигационную стабильность.
Не каждый элемент может содержать фокус, а некоторые теряют эту способность при определённых состояниях. До выполнения операции Unpoly проверяет доступность элемента для фокусировки. При нарушениях политика автоматически переключает выбор на альтернативный элемент, что предотвращает зависание интерфейса.
tabindex, ролей и
нативных элементов форм.Грамотное управление фокусом делает интерфейс отзывчивым, доступным и устойчивым к динамическим изменениям. Это снижает когнитивную нагрузку на пользователя и создаёт ощущение цельного приложения даже при работе через частичные обновления DOM.