Навигация
Крошки
Путь от корня до текущего экрана. Отвечает на вопрос «где я и как отсюда выбраться на уровень выше», а не «какие ещё есть разделы».
Разметка
<nav aria-label="Хлебные крошки">
<ol class="inst-crumbs">
<li><a href="#">Проекты</a></li>
<li><a href="#">worldgen</a></li>
<li><span aria-current="page">Прогон #4127</span></li>
</ol>
</nav>
Контракт
Крошки — упорядоченный список внутри <nav>, и оба элемента обязательны:
<ol> сообщает порядок и длину пути, <nav aria-label> даёт ориентир, который
отличим от остальных навигаций экрана.
| Что | Обязательно | Почему |
|---|---|---|
<nav> + aria-label |
да | Навигаций на экране несколько; без имени крошки неотличимы от остальных ориентиров |
<ol> с <li> |
да | Путь упорядочен, и порядок — часть смысла. <div> его теряет |
aria-current="page" на последнем |
да | Помечает текущий экран и получает --text-primary вместо приглушённого |
Последний элемент — не <a> |
да | Ссылка на страницу, где уже находишься, — ложное действие |
Отдельного класса у элемента и у ссылки нет: оформляются & > li и & a
внутри списка. Разметка и есть API.
Доступность
| Клавиатура | Нативные ссылки. Tab — обход, Enter — переход |
| Ориентир | <nav aria-label="Хлебные крошки"> — отдельная точка в списке ориентиров |
| Разделитель не читается | Шеврон — псевдоэлемент, его нет ни в тексте, ни в дереве доступности |
| Контраст | Путь — --text-muted (4.5:1), а не --text-faint: --text-faint это порог декорации, и текст, который читают, им не красится. Шеврон — наоборот, декорация |
| Наведение | Ссылка получает подчёркивание и полный цвет: подчёркивание работает там, где цвет не различается |
| Кегль | --text-xs. Путь тише заголовка экрана, который он предваряет |
Устройство
Шеврон между элементами рисует li + li::before — псевдоэлемент, а не символ в
разметке. Два следствия, ради которых так и сделано:
- разделитель не попадает в текст: скринридер и копирование получают «Проекты worldgen Прогон #4127», а не строку с угловыми скобками;
- форма приходит маской, цвет — токеном
--text-faint. Цвета внутри data-URI в библиотеке нет, поэтому шеврон переживает смену темы и режим принудительных цветов без второй копии картинки.
Полоса переносится (flex-wrap): длинный путь в узкой шапке уходит на вторую
строку, а не выталкивает документ за вьюпорт.
API
| Имя | Что делает |
|---|---|
| класс | |
inst-crumbs | Список пути. Ставится на <ol> |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--space-2 | 4px | одно на все ячейки |
--text-xs | 0.78125rem | база +4: масштаб |
--size-chevron | 10px | база +4: масштаб |
--text-muted | light-dark(var(--n-8), var(--n-6)) | одно на все ячейки |
--text-faint | light-dark(var(--n-7), var(--n-7)) | одно на все ячейки |
--text-primary | light-dark(var(--n-12), var(--n-1)) | одно на все ячейки |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument