Отображение данных

Тег

JS Снятие тега — делает кит

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

Компонент

worldgen ночной приоритет:высокий

Разметка

<span class="inst-tag">worldgen<button class="inst-tag-remove" type="button" aria-label="Убрать метку worldgen"></button></span>
<span class="inst-tag">ночной<button class="inst-tag-remove" type="button" aria-label="Убрать метку ночной"></button></span>
<span class="inst-tag">приоритет:высокий</span>

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

<span class="inst-tag">worldgen<button class="inst-tag-remove" type="button"
  aria-label="Убрать метку worldgen"></button></span>

Что	Обязательно	Почему
Настоящая `<button>` для снятия	да	Крестик текстом нельзя нажать с клавиатуры и нечем озвучить
`aria-label` со словом метки	да	«Убрать метку worldgen», а не «Убрать»: ряд из десяти «Убрать» на слух неразличим
Перевод фокуса после снятия	да, на приложении	Исчезнувший элемент уводит фокус в никуда
Кнопка снятия	нет	Добавляется только там, где снятие возможно

Когда использовать

Используйте	Возьмите другое
Метка, заведённая пользователем и снимаемая	Состояние из словаря кита — бейдж
Активный фильтр, который видно и можно сбросить	Выбор фильтра — чекбоксы или селект: тег показывает уже выбранное
Меток на объекте несколько	Единственная категория объекта — обычный текст: тег вокруг одного слова только добавляет шума
—	Опознание человека или агента — аватар

Тег намеренно не имеет тона: раскрасить пользовательские метки в статусные цвета значит соврать про их смысл. Если метка кодирует состояние — это бейдж.

	Тег	Бейдж
Откуда текст	От пользователя	Из словаря кита
Сколько значений	Сколько угодно	Пять, закрыто
Несёт тон	нет	да, `data-tone`
Можно снять	да	нет
Пример	`ночной`, `приоритет:высокий`	`идёт`, `упало`

Варианты

Без кнопки снятия

Пример

только чтение приоритет:высокий

Разметка

<span class="inst-tag">только чтение</span>
<span class="inst-tag">приоритет:высокий</span>

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

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="src/kit.js"></script>

Что делает кит

Пример в шапке живой: нажмите крестик — тег снимется, а фокус уйдёт на соседний.

Нажатие на .inst-tag-remove снимает тег и переводит фокус на соседний крестик — иначе удалённый элемент уводит фокус в никуда, и человек с клавиатуры оказывается в начале документа.

События

inst:remove всплывает с тега, detail — { value }: data-value, если он есть, иначе текст метки.

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

list.addEventListener('inst:remove', (e) => {
  e.preventDefault();            // кит оставит тег на месте
  store.dropTag(e.detail.value); // уберёт его перерисовка
});

Опции

Атрибут	Что делает
`data-value`	Что придёт в `detail` вместо текста метки — идентификатор вместо человеческого имени

Правила

Так Имя кнопки со словом метки

«Убрать метку worldgen». Тогда десять кнопок в ряду различимы на слух.

Не так Крестик текстом

× в <span> нельзя нажать с клавиатуры и нечем озвучить. Нужна настоящая <button>.

Так Крестик только там, где снятие возможно

Кнопка, которая ничего не делает, хуже её отсутствия.

Не так Тон у тега

Статусный цвет на пользовательской метке врёт о её смысле. Если метка кодирует состояние — это бейдж.

Доступность


Кнопка снятия	Настоящая `<button>`, а не крестик текстом: её надо уметь нажать с клавиатуры и озвучить
Имя кнопки	`aria-label` со словом метки: «Убрать метку worldgen», а не «Убрать». Ряд из десяти кнопок «Убрать» на слух неразличим
Фокус после снятия	Уходит в никуда, если элемент исчез. Приложение обязано перевести его на следующий тег или на контейнер
Цель нажатия	Глиф — `--size-chevron`, то есть 10px. Это ниже 24px по WCAG 2.5.8: область нажатия расширяется псевдоэлементом, сам глиф остаётся мелким
Тон	У тега его нет намеренно, поэтому вопрос «цвет как единственный носитель» не возникает

API

Имя	Значение	Что делает
класс
`inst-tag`	—	Метка
`inst-tag-remove`	—	Кнопка снятия. Настоящая `<button>`; снятие выполняет [kit.js](../../foundations/behavior.md)
атрибут
`data-value`	—	На `.inst-tag`. Что придёт в `detail` события `inst:remove` вместо текста метки
токен
`--control-h-sm`	`26px`
`--radius-sm`	`5px`
`--text-xs`	`0.75rem`
`--space-2`	`4px`
`--space-3`	`6px`
`--surface-sunken`	`light-dark(var(--n-2), var(--n-14))`
`--border`	`light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11))`
`--hairline`	`1px`
`--size-chevron`	`10px`
`--text-muted`	`light-dark(var(--n-8), var(--n-6))`
`--err-text`	`light-dark(var(--err-5), var(--err-3))`

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument

Тег