Принципы качества

Принципы качества — правила, которые действуют для любой части Framework: утилиты, обычного компонента, Smart-компонента, макета. Они дополняют стандарты (Карта стандартов), которые описывают только составные компоненты и жизненный цикл, и держатся проверками Framework.

Каждое правило держится проверкой

Каждое правило Framework существует вместе с проверкой, которая его держит. Правило без проверки нарушается при первой же правке незаметно.

Правила:

• новое правило вводится сразу с тестом;
• дефект, прошедший зелёный набор проверок, превращается в новое правило с новой проверкой.

Геометрия измеряется по нарисованному результату

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

Правила проверки геометрии:

• контрактный тест держит механизм, браузерный замер — результат. Тест подтверждает, что правило CSS написано; замер в настоящем браузере подтверждает, что человек видит нужное;
• замеряются все виды, размеры и оформления на настольной и мобильной ширине, с нулевым допуском;
• изменение компонента не закончено, пока его размеры не сверены с лестницей, а связанные части — друг с другом.

Доступность

• Видимый фокус: кольцо фокуса — сплошная линия 2 px в 1 px от элемента (в пикселях, не растёт с корневым кеглем), чтобы оно читалось даже на залитом контроле того же цвета (см. Фокус).
• Граница контрола в покое — не слабее 3 : 1 к поверхности (требование WCAG 1.4.11); наведение и фокус делают её сильнее, а не слабее.
• У каждого компонента есть доступное имя; виджеты объявляют поддерживаемые клавиши; диалог удерживает фокус и возвращает его на место.

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

Только токены

Цвета, размеры, отступы и тени задаются токенами.

• Нельзя вводить в компоненте собственное значение мимо системы токенов: смена темы или ступени его не затронет.
• Проверка declared-tokens отклоняет обращение к токену, которого система не объявляет.
• Токен не считается неиспользуемым, пока это не подтвердят собранные таблицы стилей. Поиск по исходникам этого не доказывает: сгенерированные утилиты читают имена, которых нет ни в одном исходном файле.

Цвет и токены — см. Дизайн-токены и Контраст.

Логические стороны и направление письма

• Стороны задаются логически — start/end, inline/block, — а не left/right.
• Одна разметка работает в обоих направлениях письма; дубля содержимого для RTL нет.
• Направление определяется CSS и DOM, а не перестановкой данных.
• Параметры компонентов используют имена icon-start и icon-end.

Подробно — см. Направление текста.

Язык интерфейса

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

Решение записывается с замером

Принятое визуальное решение записывается вместе с замером «до» и «после» и проверкой, которая его держит. Запись делается, когда вопрос разобран полностью. Это защищает от возврата к закрытому вопросу и от проверки, которая держит неверное значение как эталон, потому что решение нигде не записано.

Смотрите также

• Одна лестница размеров, Геометрия: стандарт и проверка — лестница размеров и стандарт геометрии.
• Фокус–Язык интерфейса — фокус, направления письма, язык интерфейса.
• Дизайн-токены, Контраст — токены и контраст.
• Как Framework проверяет себя — проверки, которые держат эти принципы.