Каталог частей

Рабочий стол для тех, кто правит вид. Здесь лежат все части из core/komponenty.css — в состояниях, с длинным текстом и в обеих темах. Тронул роли или части — открой эту страницу и посмотри, что стало.

Значки

Один набор на всё: сетка 24, обводка 2, цвет — свой цвет текста. Ставится пустым узлом <span class="ya-ik ya-ik--имя">.

Все имена набора
Три роста: 18 в подписи кнопки, 24 обычный, 48 в пустом списке

Кнопка

Четыре вида одной кнопки. Залитая — главное действие на экране, и оно одно; тональная — рядом стоящее; с обводкой и словом — всё остальное. Наведи мышь, нажми и пройди ряд клавишей Tab: под мышью, под пальцем и под обводкой фокуса кнопка выглядит по-разному, и это тоже часть набора.

Четыре вида в покое
Выключено — нажатия не будет
Со значком
Три роста: 40 в карточке, 48 обычный, 56 во всю ширину
Длинная подпись — кнопка не переносит слова, а растёт

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

Кнопка-значок

Видимая — 40, нажимаемая — 48: разницу добирает поле, поэтому соседи стоят вплотную, а палец всё равно попадает.

Поле ввода

Подпись, само поле, подсказка под ним и счётчик длины. Высота 56, кегль 17: в поле мельче 16 телефон приближает страницу при фокусе, а отдалить её потом нечем — адресной строки в приложении нет. Подпись связана с полем через for, подсказка и счётчик приходят диктору описанием — aria-describedby. Оборачивать всё в <label> нельзя: имя поля соберётся из подсказки и счётчика тоже.

Покой

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

Фокус — настоящий, кнопкой ниже

Обводка фокуса — 2 px цветом действия с отступом 2, и кайма поля берёт тот же цвет. Второго кольца тенью под ней нет: оно двоится. Клавиша Tab даёт то же кольцо — у поля оно висит на :focus, а не на :focus-visible, как у кнопки: в поле пишут, и человек обязан видеть, куда попадёт буква, каким бы способом он в него ни вошёл.

Ошибка

Цвет не единственный признак беды: рядом со словом проступает значок, подсказка сменилась на объяснение, а полю проставлено aria-invalid — диктор скажет об ошибке сам. Место под строку подсказки занято всегда, поэтому появление ошибки не двигает кнопку из-под уже занесённого пальца.

Длинный текст: многострочное поле растёт за словами

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

Выключено — писать нечего и нечем

Имя правится на первом шаге

Пара полей

Два поля под одной мыслью. На телефоне столбиком, от 600 — рядом. Порог 600, а не 360: при 375 два поля дают по 139 внутренних пикселей, и подпись кеглем 17 ложится в них в четыре строки. Общая мысль — не заголовок, а имя группы: обёртке ставят role="group" и aria-labelledby, иначе диктор прочитает два поля подряд, ничем не связанные.

Покой — узкую колонку проверь переключателем вверху
Две стороны

Длинные подписи и ошибка в одном поле из двух
Что прибывает и что убывает

Поля в паре стоят по верхнему краю: беда в одном растит его вниз и не тянет за собой соседа.

Шагомер

Где человек в маршруте. Сперва слова, потом полоса — и слова главные. Диктор слышит одну понятную строку: жёлобу ставят aria-hidden, потому что он повторяет её, а второй раз то же число вслух — не доступность, а помеха. Точками шаги не рисуем: точки уроков сделаны 6×6 и спрятаны от диктора — человеку с диктором о шагах не говорят вовсе, а человеку с глазами предлагают их сосчитать.

Начало пути

шаг 1 из 10 Что разбираем

Середина

шаг 4 из 10 Два состояния

Длинное имя шага — строка переносится, число не обрезается

шаг 10 из 10 Сходится ли круг: две главные пары мест напротив

Имя шага прижато вправо и переносится под число, когда рядом не встаёт. Число шага не обрезаем многоточием никогда: ради него строку и читают.

Пусто — маршрут ещё не начат

шаг 1 из 10

Переключатель

Выбор одного вида из нескольких, когда экран остаётся тем же. Не кнопки — те обещают действие; не вкладки — те уводят. Выбранное отличается не только цветом: у него другая жирность и сплошная рамка, и состояние живёт в aria-pressed, а не в классе — иначе диктор не скажет, что выбрано.

Три вида одной модели — выбран средний
Длинные имена — кнопки делят ширину поровну и переносят текст

Фишка

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

Ряд в работе — вторая выбрана
Ряд заперт после проверки

Вердикт

Ответ на проверку. Приговор стоит ПЕРВЫМ словом, до объяснения: иначе человек читает разбор, ещё не зная, угадал он или нет. Цвет не единственный признак — слово стоит жирным. Плашка живёт в области role="status": фокус в этот миг на кнопке «Проверить», и уводить его нельзя, а сказать надо.

Верно

Так. Воля — отрезок от Кона до Предела. Весь луч от огня до Предела Волей не называется: первая его половина — Вера.

Неверно — объяснение говорит, что именно выбрано не то

Не так. Это Вера — от огня до Кона. Воля идёт дальше, за Кон.

Складка

Справка, которая не мешает: закрыта, пока её не спросили. Собрана на родном <details> — он сам даёт клавиатуру, состояние «раскрыто» для диктора и связь заголовка с телом. Стрелка своя: системный треугольник рисуется шрифтом, у него своя толщина и своя базовая линия, и цветом роли он не красится.

Закрыта — так она и стоит на экране по умолчанию
Если тема широкая

Работа — не дело для круга. Одна рабочая встреча — дело. Одна поездка — дело. Один разговор — дело.

Раскрыта, длинный заголовок и длинное тело
Чем состояние отличается от перелома и почему подписи мест идут через одно

Состояние длится, перелом проскакивает. В состоянии живут, перелом ловят.

Половина мест круга — то, что длится, половина — мгновения, когда одно превращается в другое. Они идут через одно, и подписи обязаны этому подчиняться: там, где стоит мгновение, длящееся слово читается как ошибка.

Снимок обводки фокуса
Как проверить

Стороны отвечают на один вопрос. «Хорошо» и «плохо» — не стороны: это оценка, а не устройство дела.

Настоящую обводку даёт клавиша Tab — снимок выше нужен затем, чтобы её было видно и на неподвижной странице. Строка складки нажимается на все 48 сама по себе — добирать паддингом ничего не нужно.

Строка списка

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

Список из трёх — нажми и подержи, чтобы увидеть слой нажатия
Длинное имя и длинная приписка — переносятся обе, стрелка стоит
Снимок обводки фокуса — она уходит внутрь строки

Кольцо фокуса уходит внутрь: строка идёт во всю ширину, и наружное кольцо вылезло бы за край экрана и налезло на соседнюю строку. Настоящее кольцо даёт клавиша Tab, снимок выше — его копия.

Полоса-сообщение

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

Спокойная

Уроки лежат на сервере

Открой их, когда сеть вернётся.

Требующая внимания, с длинным текстом и двумя действиями

Записи этой ясны хранятся только на этом устройстве

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

Пустой список

Когда показывать нечего. Слова говорят, почему пусто и что с этим делать; если делать нечего — кнопки нет.

Разложенных ясн пока нет

Первая появляется сама, как только ты разложишь имя по кругу.

Вопрос и короткое сообщение

Эти две части живут поверх экрана, поэтому их не показать лежащими в строке — их надо открыть. Разметка ниже повторяет ту, что строит core/dialogs.js: сам он сюда не подключён, потому что едет в бандлах вместе с React.

У вопроса отказ стоит слева и держит фокус, закрытие без ответа считается отказом, Escape закрывает. Карточка вопроса прокручивается внутри себя, если текст длинный, а экран низкий: проверить это можно, открыв длинный вопрос на узком окне с большим системным кеглем.

Чего в наборе нет

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

Нет и знака «напротив» (двусторонней стрелки) в наборе значков: пару мест круга приходится помечать стрелкой вперёд, а она читается как «дальше».