Какие особенности фокусирования на элементе важно учитывать на практике и почему?

Особенности фокусирования: по умолчанию фокус получают только интерактивные элементы, событие `focus` не всплывает, порядок задаётся `tabindex`, важен видимый индикатор фокуса для доступности.

Особенности

Фокусируемы только интерактивные элементы

По умолчанию фокус получают <input>, <button>, <a href>, <select>, <textarea>. Контейнеры (<div>, <span>) — нет, если не задан tabindex:

<div tabindex="0">Теперь фокусируем</div>

tabindex управляет порядком

• tabindex="0" — в естественном порядке табуляции.
• tabindex="-1" — фокусируем программно (.focus()), но не через Tab.
• tabindex="1+" — задаёт явный порядок (антипаттерн, ломает естественный порядок).

focus не всплывает

Событие focus (и blur) не всплывает — для делегирования используют focusin/focusout:

form.addEventListener('focusin', handler); // всплывает

Видимый индикатор фокуса

Для доступности нужен видимый фокус (:focus-visible). Убирать outline: none без замены — нарушение доступности:

:focus-visible { outline: 2px solid blue; }

disabled и скрытые элементы

disabled, display: none, visibility: hidden элементы фокус не получают.

:focus-within

Стилизует родителя, когда фокус на нём или потомке.

Коротко для собеседования

Особенности фокуса: фокусируемы только интерактивные элементы (контейнерам нужен tabindex), tabindex="0" — в порядок, -1 — программно; событие focus не всплывает (для делегирования — focusin); нужен видимый индикатор (:focus-visible, не убирать outline без замены — доступность); disabled/скрытые не фокусируются.