Swapped digits mark
Spec
The two digits a typo would swap, marked inside an amount in a sentence. SwappedDigits in code. Used only in Find the difference's typo sentence.
Rules
- text-warning in the row style (semibold), underlined with border-width-strong (2px) at space-2xs from the text. The underline means it never relies on color alone.
- Digits only: never a comma or the decimal point. "$12.34" meant as "$13.24" marks the 2 and the 3 on either side of the point.
- On both amounts in the sentence: the likely amount (bold) and the amount as entered. The row's own amount stays plain.
- For the eye only. The marks split an amount into pieces that a screen reader can read apart, so the marked sentence is hidden from screen readers and a plain copy, with whole amounts, is read instead.
- Amber here means an oddity to look at, as the warning band beside it.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Nov 1 2026: First version: the two digits that would swap, in text-warning, in the row style (semibold) and underlined (2px), so it never relies on color. Used in Find the difference's typo sentence. Not in Figma yet. (#158)