focusgroup

Дисклеймер: это обзор раннего предложения новой функции. Синтаксис может измениться в будущем или от функции могут вовсе отказаться.

В ARIA существуют некоторые виджеты, для которых нужно реализовывать управление фокусом и навигацию с клавиатуры. При перемещении по интерактивным элементам при помощи Tab и Shift+Tab, весь виджет должен быть одним шагом в последовательности табуляции. Навигация по внутренним элементам виджета должна осуществляться через клавиши со стрелками и специальные клавиши Home, End, Page Up, Page Down и другие.

Есть две стратегии реализации:

- виртуальный фокус и атрибут aria-activedescendant
- техника “Roving Tabindex” и манипуляция атрибутом tabindex

Обе техники требуют нетривиальных реализаций на JS с прослушкой множества событий клавиатуры и фокуса. Подводных камней хватает.

Команда Edge в рамках группы OpenUI предложила добавить в браузеры атрибут focusgroup для управления фокусом и клавиатурой в виджетах.

<div
  role="toolbar"
  focusgroup
  aria-label="Text Formatting"
  aria-controls="…"
>
  <button
    type="button"
    aria-pressed="false"
    value="bold"
    tabindex="-1"
  >
    Bold
  </button>
  <button
    type="button"
    aria-pressed="false"
    value="italic"
    tabindex="-1"
  >
    Italic
  </button>
  <!-- ... -->
</div>

При перемещении по странице через клавиатуру, фокус попадёт на первую кнопка в тулбаре, не смотря на tabindex="-1". Браузер находит внутри элемента с focusgroup все интерактивные элементы и те, которые отмечены атрибутом tabindex="-1".

Перемещение между кнопками в тулбаре осуществляется стрелками. “Вверх” и “вправо” — следующая кнопка, “вниз” и “влево” — предыдущая. Кнопка “Home” переносит фокус на первую кнопку, а “End” — на последнюю. Предусмотрен зацикленный переход между первой и последней кнопками при указании focusgroup="wrap".

При выходе фокуса из тулбара, браузер сохранит последнюю сфокусированную кнопку и вновь сфокусирует её при возврате фокуса в тулбар. Это отключается, если указать focusgroup="no-memory".

Значения inline и block настраивают направление. inline — навигация стрелками “влево”/“вправо”. block — навигация стрелками “вверх”/“вниз”. При этом учитывается направление письма.

<div
  role="toolbar"
  focusgroup="inline wrap no-memory"
  aria-label="Text Formatting"
  aria-controls="…"
>
  <!-- ... -->
</div>

Пример тулбара с горизонтальной навигацией, переносом между крайними элементами и без сохранения последнего сфокусированного элемента.

Значение grid включает автоматическую табличную навигацию. Этот режим работает со стандартными HTML-таблицами и табличной раскладкой (display: table-*) для автоматического вычисления порядка фокуса при навигации. Дополнительные значения flow, col-wrap, row-wrap, col-flow и row-flow уточняют, как нужно переносить фокус между столбцами и строками таблицы.

Значение manual-grid включает ручную табличную навигацию. В этом режиме для строк и столбцов нужно дополнительно указать focusgroup со значениями grid-row и grid-cell. Это позволяет добавлять навигацию в пользовательские таблицы на основе <div> + flexbox или grid.

Для всех значений атрибута focusgroup предлагаются аналоги в виде CSS-свойств:

.element {
  focus-group-type: linear; /* grid | manual-grid | 
grid-row | grid-cell */
  focus-group-direction: both; /* inline | block */
  focus-group-wrap: none; /* wrap | flow | col-wrap | 
col-flow | col-none | row-wrap | row-flow | row-none */
  focus-group-memory: auto; /* none */
}

Есть экспериментальный пользовательский полифилл с поддержкой базовых функций (без табличной навигации и CSS) и демо-страница, на которой его можно опробовать. Также есть оригинальный полифилл от команды Edge, но он разработан для более раннего варианта синтаксиса, который уже изменился.

Статус функции пока не понятен. По результатам State of HTML. в focusgroup есть заинтересованность со стороны разработчиков. Браузеры, вроде как, тоже относятся положительно. В Chrome были какие-то эксперименты. Работа над предложением продолжается, хотя и не очень активно.

#html #css #a11y