IbanInput

Role and semantics

IbanInput is a text box with inputmode="numeric", so phones open a number keyboard. The TR prefix and the check mark have aria-hidden; the label says what to type with hidden text. When the check passes, a polite status region says “IBAN is valid”.

Keyboard

Key	Behaviour
Digits	Type; spaces are added for you.
Backspace	Deletes a digit; the spaces are rearranged.
Tab	Leaves the field.

Focus

After regrouping, the caret goes back after the same number of digits, so inserting and deleting in the middle works.

Screen reader output

Example	Output
Field	“IBAN (the 24 digits after TR), edit text”
Valid	“IBAN is valid”
Invalid	“Invalid entry. This IBAN is not valid; check the digits.”

Contrast

Text has 4.5:1; the border, prefix and check mark 3:1.

WCAG 2.2

Criterion	How IbanInput meets it	What product teams must do
3.3.1 Error identification	The check and an incomplete value are stated in text.	Pass server errors with error.
3.3.4 Error prevention	The check runs before submission.	Ask people to confirm the account before submitting.
4.1.3 Status messages	A valid IBAN is announced.	—