Поведение

Использование

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

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

Устройство

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

Поведение

Ровно один элемент группы достижим по Tab. В этом весь смысл.

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

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

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

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

import { refresh } from './src/kit.js';

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

Нарисованные обещания

Тот же закон, применённый к оформлению. Кнопка копирования, крестик снятия, курсор ew-resize на подписи оси — это обещания, данные картинкой. Кит их рисует, значит, обязан выполнять.

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

JS

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

Методы

События

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

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, потому что его нельзя ни навести, ни закрыть.

Связанное

Очередь Дерево Меню Сегментированный контрол Вкладки Конституция