Вызыватели интереса и атрибут command

Сообщество Open UI стандартизирует два новых атрибута HTML — command для действий, запускаемых щелчком, и interesttarget для «интереса», вызываемого наведением или фокусом (на этой основе работают всплывающие подсказки и предварительные просмотры). Оба атрибута расширяют HTML декларативными возможностями, для реализации которых традиционно требовался JavaScript.

Кнопка с атрибутами command="show-modal" и commandfor="dialog-id" показывает диалоговое окно без JS — вместо ручных вызовов dialog.showModal(). Другие команды: command="close", command="toggle-popover", command="show-popover".

Начальный набор предназначен для распространённых элементов интерфейса: показа и скрытия диалоговых окон (встроенный <dialog>), переключения всплывающих элементов (Popover API); со временем он может расшириться. Пользовательские элементы могут объявлять принимаемые команды с помощью обработчиков события oncommand.

Помимо встроенных команд, спецификация допускает пользовательские строки команд, начинающиеся с «--». Целевой элемент получает событие command, которое можно обработать в JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

Атрибут interesttarget указывает целевой элемент для «интереса» — обычно всплывающую подсказку, которая появляется при наведении или фокусе. Браузер автоматически обрабатывает задержку (300 мс для определения намерения при наведении), позиционирование (с помощью позиционирования с привязкой) и закрытие.

Режим всплывающего элемента hint предназначен для подсказок, которые появляются при проявлении интереса. Они не являются модальными, не перехватывают фокус и закрываются, когда интерес пропадает. Сочетание interesttarget + popover="hint" позволяет создать встроенную подсказку с помощью двух атрибутов HTML.

Встроенные диалоговые окна удерживают фокус внутри себя; встроенные всплывающие элементы управляют порядком наложения; встроенные инициаторы показа по интересу обрабатывают задержку определения намерения при наведении и сообщают программам чтения с экрана о связанных элементах. Замена пользовательских реализаций на JS этими декларативными примитивами надёжно повышает качество доступности.

Эти возможности всё ещё проходят стандартизацию. Точные названия атрибутов и набор команд могут измениться. Реализации сначала появляются в Chromium. Для использования в рабочих проектах стоит дождаться стабилизации названий и поддержки как минимум в двух браузерах — вероятно, это произойдёт в течение ближайших одного-двух лет.

Каждая из этих возможностей заменяет JavaScript-код, который миллионы раз писали и переписывали: управление диалоговыми окнами, запуск всплывающих элементов и поведение подсказок. Перенос этих шаблонов в HTML уменьшает размер страницы, повышает единообразие и позволяет браузеру применять оптимизации.

Группа сообщества Open UI (open-ui.org) выполняет значительную часть этой работы: предлагает и тестирует решения, а также помогает проводить новые элементы и атрибуты HTML через процесс стандартизации. Следите за их блогом, чтобы узнавать о последних предложениях.

command, interesttarget, popover, dialog, позиционирование с привязкой, переходы представлений и настраиваемые элементы выбора — всё это части единого стремления перенести шаблоны библиотек компонентов в саму платформу. Каждая возможность по отдельности невелика, но вместе они представляют собой крупнейшее за многие годы расширение набора средств пользовательского интерфейса HTML.

Следите за предложениями (open-ui.org), экспериментируйте в Chromium с включёнными флагами и планируйте внедрение по мере стабилизации возможностей. Проведите аудит существующей кодовой базы: подсчитайте, сколько JS-кода посвящено работе диалоговых окон, всплывающих элементов и подсказок. В течение нескольких выпусков этот код должен быть заменён.

Две новые возможности расширяют декларативный набор средств пользовательского интерфейса HTML: command + commandfor — для действий, запускаемых щелчком (показ модального окна, переключение всплывающего элемента), а interesttarget + popover="hint" — для подсказок, запускаемых наведением или фокусом. Обе возможности заменяют распространённые шаблоны JavaScript атрибутами HTML, повышая доступность и уменьшая размер пакета. Они всё ещё развиваются; следите за Open UI, чтобы дождаться стабилизации, и внедряйте их по мере появления поддержки в браузерах.