Role and semantics
Section titled “Role and semantics”AmountInput is a text box with inputmode="decimal", so phones open a number keyboard. The label holds the currency name as hidden text. The visible symbol has aria-hidden. The description and error are linked with aria-describedby.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Digits, comma, point | Type the amount. |
| Tab | Leaves the field; the amount is formatted. |
Formatting happens on leaving the field; the caret stays put while typing.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Field | “Amount (Euro), edit text” |
| Out of range | “Invalid entry. The amount must be at most €50,000.00.” |
Contrast
Section titled “Contrast”Text has 4.5:1; the border and symbol 3:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How AmountInput meets it | What product teams must do |
|---|---|---|
| 1.3.5 Identify input purpose | autocomplete="off"; the currency is in the label. |
— |
| 3.3.1 Error identification | Too many decimals and limits are stated in text. | Pass server errors with error. |
| 3.3.2 Labels or instructions | The format is in the description, not the placeholder. | State the limits in the description. |