Поведение

Контракт

<link rel="stylesheet" href="instrument.min.css">
<script type="module" src="instrument.js"></script>

Модуль, а не классический скрипт: у него есть именованные экспорты. Сборка при этом не требуется.

Доступность

Устройство

Home и End — во всех пяти. Перебор идёт по кругу: у очереди задач нет «конца», после которого некуда деться, и тупик на последней строке ничего не даёт.

Поведение

Бегущий tabindex: ровно один элемент группы достижим по Tab — один Tab внутрь, стрелки внутри, один Tab наружу.

Якорем становится выделенный элемент, а если выделения нет — первый.

Строки, прибывающие во время работы

Слушатели висят на документе, а элементы ищутся в момент нажатия. Строки очереди, шаги и узлы дерева появляются по одной, и init(el) при старте промахнулся бы мимо всего, что пришло позже.

Единственное, что нельзя сделать лениво, — начальный tabindex: группа без него не достижима по Tab. За появлением групп следит MutationObserver, а не человек. Наблюдатель у каждого корня свой: start() на втором корне не отбирает наблюдателя у первого, и stop() снимает ровно того, кого завёл.

Появление группы — не всегда правка разметки. Поповер и <details> открываются атрибутом, и наблюдатель на такое не просыпается, поэтому модуль слушает ещё и toggle: пункты меню получают бегущий tabindex в момент открытия, а не в момент, когда в них впервые попал фокус.

import { refresh } from '@keshon/instrument/js';

// Нужно только если наблюдатель отключён — например, в тесте.
refresh(container);

Кто владеет разметкой

Всё, что модуль пишет, он пишет через отменяемое событие: preventDefault оставляет разметку нетронутой, а фокус всё равно уходит куда шёл — приложение отказалось вести состояние, а не запретило человеку перемещаться.

Одно исключение — бегущий tabindex. Событие ему не годится: его расстановка идёт из refresh(), то есть на каждую пачку изменений документа, и ответ там всегда один и тот же. Поэтому владение объявляется, а не решается каждый раз.

Три ручки, и все три существуют ради одного: чтобы у атрибута не оказалось двух хозяев.

Без этих трёх слов всё остаётся как было: <script type="module"> и побочный импорт запускают модуль сами.

<html data-instrument="manual">

import { start, refresh } from '@keshon/instrument/js';

start(document, { observe: false });
// и refresh() после каждой отрисовки

Строки, которые слышит человек

Модуль произносит четыре фразы — имя области уведомлений и три ответа действий. Умолчания английские: кит уезжает в пакет, и язык экрана выбирает приложение, а не библиотека. Все четыре собраны в одном месте и меняются целиком:

import { strings } from '@keshon/instrument/js';

strings.copied = 'Скопировано';

Атрибуты data-copied-label и data-failed-label по-прежнему выигрывают: у них другая работа — сказать своё для одной кнопки, а не сменить язык экрана.

Нарисованные элементы управления

Кнопка копирования, крестик снятия, курсор ew-resize на подписи оси — это элементы управления, объявленные оформлением. Их работу выполняет тот же модуль.

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

JS

Модуль ничего не экспортирует классами и не требует инициализации: он подключается один раз и работает делегированием. Всё, что перечислено ниже, — поверхность на случай, когда этого мало.

Методы

События

Все — CustomEvent, всплывают и отменяемы. preventDefault() означает, что работу берёт на себя приложение: instrument.js останавливается и не трогает разметку.

document.addEventListener('inst:remove', (e) => {
  e.preventDefault();          // тег останется в разметке
  store.dropTag(e.detail.value); // это сделает перерисовка по данным
});

Отменённый inst:select оставляет aria-selected и aria-checked как были, но фокус всё равно уходит: приложение отказалось вести состояние само, а не запретило человеку перемещаться.

Перетаскивание оси и бегунок своих событий не заводят: они меняют <input> и шлют нативные input и change. Фреймворк видит их без клея.

Опции

Настройки — атрибуты разметки, а не объект конфигурации: у библиотеки нет экземпляров, к которым его можно было бы приложить.

Правила

Не меняет оформление. Ни одного присвоения style, ни одного класса оформления: модуль ставит атрибуты из разметочного контракта — tabindex, aria-selected, aria-checked, aria-expanded, — а как они выглядят, решает CSS. Приложение поэтому может переопределить вид, не трогая поведение.

Не обязателен. Без него работает всё, что не требует клавиатуры: раскрытие на <details>, поповер на Popover API, модалка на <dialog>, валидация на :user-invalid.

API

Чего пока нет

• набора по первым буквам (typeahead). В списке на двести строк он нужен, и APG его рекомендует;
• множественного выделения Shift+стрелки в listbox;
• закрытия тултипа по Escape: сейчас он не проходит критерий 1.4.13, потому что его нельзя ни навести, ни закрыть.

Связанное

Очередь Дерево Меню Сегментированный контрол Вкладки Принципы дизайна