Какие существуют способы установки фокуса на элементе?

element.focus()

// Установка фокуса на input при загрузке страницы
window.addEventListener('load', () => {
  const inputElement = document.getElementById('myInput');
  if (inputElement) {
    inputElement.focus();
  }
});

autoFocus атрибут для HTML элементов:

<input type="text" autoFocus>

Программная установка фокуса с помощью requestAnimationFrame:

// Отложенная установка фокуса
requestAnimationFrame(() => {
  const elementToFocus = document.getElementById('targetElement');
  if (elementToFocus) {
    elementToFocus.focus();
  }
});

Использование tabIndex:

<div id="focusableDiv" tabindex="0">
  Этот div теперь может быть сфокусирован.
</div>

Скриптовое управление фокусом в SPA:

// Передача фокуса при переходе между страницами в React
useEffect(() => {
  const headingElement = document.getElementById('pageHeading');
  if (headingElement) {
    headingElement.focus();
  }
}, [location.pathname]); // Зависит от изменения URL

Accessibility-соображения при управлении фокусом:

• Убедиться, что фокус виден (style outline).
• Следовать естественному порядку фокуса (DOM-структура, tabIndex > 0).
• Управлять фокусом при открытии модальных окон, всплывающих окон.
• Возвращать фокус на исходный элемент после закрытия интерактивных элементов.
• Используйте aria-live регионы для оповещения читалок экрана о изменениях, влияющих на фокус.