Отображение данных
Изменение файла
Что случилось с файлом в списке изменений: добавлен, изменён, удалён, переименован, конфликт.
+
M
−
R
!
Разметка
<div class="inst-stack inst-stack--tight">
<span class="inst-change" data-change="added" aria-label="Добавлен">+</span>
<span class="inst-change" data-change="modified" aria-label="Изменён">M</span>
<span class="inst-change" data-change="deleted" aria-label="Удалён">−</span>
<span class="inst-change" data-change="renamed" aria-label="Переименован">R</span>
<span class="inst-change" data-change="conflict" aria-label="Конфликт">!</span>
</div>
Контракт
Знак стоит содержимым, имя — в aria-label. Разделены они потому, что знак это
данные, а имя — речь: «−» вслух должно звучать «удалён». aria-label
перекрывает содержимое, поэтому знак не зачитывается дважды.
| Что | Обязательно | Почему |
|---|---|---|
aria-label словом |
да | Знак «+» будет прочитан как «плюс». Что именно случилось, из этого не следует |
| Знак содержимым | да | Цвет не имеет права быть единственным носителем. На чёрно-белой печати и при дальтонизме остаётся только знак |
| Значение из словаря | да | Пять значений, список закрыт. Шестое молча не сработает |
Доступность
| Доступное имя | Из aria-label: он перекрывает содержимое, и «плюс» вслух не звучит |
| Цвет не единственный | Знак внутри отличает добавление от удаления там, где цвет исчез: печать, дальтонизм, высокая контрастность |
| Контраст | Разные пороги у разных носителей: контур меточный 3:1, знак текстовый 4.5:1. Проверяется обходом по пикселям в пяти темах |
| Роль | Не img и не status: это метка при имени файла, и озвучивается она вместе с ним |
API
| Имя | Что делает |
|---|---|
| класс | |
inst-change | Глиф изменения. Контур со знаком внутри |
| Имя | Значение | Что делает |
|---|---|---|
| атрибут | ||
data-change | added · modified · deleted · renamed · conflict | Что случилось с файлом. Своя ось, не тональный словарь |
aria-label | — | Обязателен. «+» скринридер прочитает как «плюс», а не как «файл добавлен» |
| Имя | Значение | Откуда |
|---|---|---|
| переменная | ||
--change-inkЦвет контура. Меточный порог 3:1: контур — не текст | var(--chart-5) | задаёт приложение |
| токен | ||
--size-iconКоробка глифа | 18px | база +4: масштаб |
--text-2xsКегль знака | 0.6875rem | база +4: масштаб |
--chart-3 | light-dark(oklch(0.550 0.140 355), oklch(0.720 0.120 355)) | одно на все ячейки |
--chart-4 | light-dark(oklch(0.650 0.120 55), oklch(0.800 0.110 55)) | одно на все ячейки |
--chart-5 | light-dark(oklch(0.580 0.130 115), oklch(0.740 0.120 115)) | одно на все ячейки |
--chart-6 | light-dark(oklch(0.620 0.110 190), oklch(0.780 0.100 190)) | одно на все ячейки |
--text-secondaryЦвет знака. Текстовый порог 4.5:1: знак читают | light-dark(var(--n-9), var(--n-5)) | одно на все ячейки |
--warn-textТолько конфликт: единственное значение оси, которое одновременно оценка. Красит и контур, и знак | light-dark(var(--warn-5), var(--warn-3)) | база +1: тема |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument