Data display
File change
What happened to a file in a list of changes: added, modified, deleted, renamed, conflict.
+
M
−
R
!
Markup
<div class="inst-stack inst-stack--tight">
<span class="inst-change" data-change="added" aria-label="Added">+</span>
<span class="inst-change" data-change="modified" aria-label="Modified">M</span>
<span class="inst-change" data-change="deleted" aria-label="Deleted">−</span>
<span class="inst-change" data-change="renamed" aria-label="Renamed">R</span>
<span class="inst-change" data-change="conflict" aria-label="Conflict">!</span>
</div>
Contract
The sign stands as the content and the name in the aria-label. They are
parted because the sign is data and the name is speech: «−» aloud has to sound
"deleted". The aria-label overrides the content, so the sign is not read
twice.
| What | Required | Why |
|---|---|---|
An aria-label in words |
yes | The sign «+» will be read as "plus". What exactly happened does not follow from that |
| The sign as content | yes | Colour has no right to be the only carrier. In black-and-white print and under colour blindness only the sign is left |
| A value from the vocabulary | yes | Five values, and the list is closed. A sixth will silently do nothing |
Accessibility
| The accessible name | From the aria-label: it overrides the content, and "plus" is not said aloud |
| Colour is not the only one | The sign inside tells an addition from a deletion where colour has gone: print, colour blindness, high contrast |
| Contrast | Different carriers have different thresholds: the outline is a mark at 3:1, the sign is text at 4.5:1. Checked by a sweep over the pixels in five themes |
| The role | Neither img nor status: this is a mark beside a file name, and it is spoken together with it |
API
| Name | What it does |
|---|---|
| class | |
inst-change | The glyph of a change. An outline with a sign inside it |
| Name | Value | What it does |
|---|---|---|
| attribute | ||
data-change | added · modified · deleted · renamed · conflict | What happened to the file. An axis of its own rather than the tonal vocabulary |
aria-label | — | Required. A screen reader reads «+» as "plus" rather than as "file added" |
| Name | Value | Where from |
|---|---|---|
| variable | ||
--change-inkThe colour of the outline. The threshold of a mark, 3:1: an outline is not text | var(--chart-5) | the application sets it |
| token | ||
--size-iconThe box of the glyph | 18px | base +4: scale |
--text-2xsThe size of the sign | 0.6875rem | base +4: scale |
--chart-3 | light-dark(oklch(0.550 0.140 355), oklch(0.720 0.120 355)) | one across every cell |
--chart-4 | light-dark(oklch(0.650 0.120 55), oklch(0.800 0.110 55)) | one across every cell |
--chart-5 | light-dark(oklch(0.580 0.130 115), oklch(0.740 0.120 115)) | one across every cell |
--chart-6 | light-dark(oklch(0.620 0.110 190), oklch(0.780 0.100 190)) | one across every cell |
--text-secondaryThe colour of the sign. The threshold of text, 4.5:1: a sign gets read | light-dark(var(--n-9), var(--n-5)) | one across every cell |
--warn-textConflict only: the one value of the axis that is also a judgement. It paints both the outline and the sign | light-dark(var(--warn-5), var(--warn-3)) | base +1: theme |
Why the kit works this way — the constitution · Open source under MIT, github.com/keshon/instrument