Toolbar Elements

Члены группы OpenUI продолжают работать над UI-примитивами и опубликовали черновик предложения Toolbar Elements. Они предлагают добавить в веб-платформу встроенное решение для создания панели инструментов.

Такие панели встречаются во многих веб-приложениях: Google Docs, Figma, VSCode, Notion, Photoshop Web и так далее. Панель инструментов группирует кнопки, списки выбора, переключатели и другие интерактивные элементы интерфейса.

Сейчас для создания панели инструментов нужно использовать ARIA-роль toolbar. В спецификации ARIA также пишется, что у элемента с ролью toolbar можно реализовать управление фокусом, что подразумевает навигацию стрелками.

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

Предлагается новый элемент <toolbar>, в который будет встроена роль toolbar и навигация по интерактивным элементам с помощью стрелок. По умолчанию <toolbar> отображает элементы горизонтально.

<toolbar aria-label="Main">
  <button
    id="undoButton"
    aria-label="Undo"
  >
    <img src="..." alt=""> 
  </button>
  <button
    id="redoButton" 
    aria-label="Redo"
  >
    <img src="..." alt="">
  </button>
  <button
    id="printButton"
    aria-label="print"
  >
    <img src="..." alt="">
  </button>
  <input
    id="zoomSelect"
    list="zoom"
    aria-label="zoom"
  >
  <!-- ... -->
</toolbar>

<datalist id="zoom">
  <option>Fit</option>
  <option>50%</option>
  <!-- ... -->
</datalist>

<script>
  undoButton.addEventListener("click", 
    () => undo();
  );
  // ...
</script>

Есть открытые вопросы о том, как должен стилизоваться <toolbar>, как должно работать изменение ориентации (для вертикальной панели инструментов) и нужно ли поддерживать внутри разделители (как <hr> внутри <select>).

В будущем предполагается расширить возможности <toolbar>, которые на данный момент находятся за пределами предложения. В конечном итоге в веб-платформе должен появиться встроенный аналог шаблона панели инструментов.

#html #ui