AccountNumber React-only

Open in Storybook

AccountNumber serves for displaying an account number (IBAN, credit/debit card number, etc.) and takes care of accessibility and truncation.

Display

AccountNumber at the moment does not provide any means to format the account number, e.g. in groups of four digits, or else. So whatever gets sent to AccountNumber will be displayed. In a similar fashion, setting the masked property only indicates that the account number is obfuscated, and it ensures an accessible text, but the account number to be displayed already has to be obfuscated. The reason being, there are multiple ways to do so; at times a capital X is used to replace individual digits, other times a number of asterisks replace a sequence of digits.

Accessibility

When using AccountNumber, the audible version for people using a screen reader will contain a space delimiter after every digit, to ensure the reader does not try to announce the account number as one large number.

A custom ariaLabel may be set to bypass this automatic behaviour. In any case, the assistive text – even when set with ariaLabel – won’t result in an aria-label attribute. Instead, VisuallyHidden text is added under the hood. This is because the <span> element with no semantic meaning is used to render the account number, and in such a case an aria-label would never be announced.

Truncation

If there is not enough room to display the full account number, AccountNumber won’t simply truncate at the end, because the (first and) last digits may be more important than those in the middle. As such, visibleEndCount – which defaults to 4 – may be used to specify how many digits at the end will always be visible.

Obfuscation

As stated, you may set the masked property if the account number is obfuscated. While this has no effect on the visual display, it does change the experience for people using a screen reader.

Due to the masked or ariaLabel property being set in the example below, the audible version changes as follows.

• 459876XXXXXX6823:
  Instead of 🗣 four five nine eight seven six ex ex ex ex ex ex six eight two three,
  the default 🗣 Last four digits: six eight two three is announced.
• ***9800:
  Instead of 🗣 asterisk asterisk asterisk nine eight zero zero,
  the custom 🗣 Ends with nine eight zero zero is announced.
• 1234:
  Instead of 🗣 one two three four,
  the completely custom 🗣 Demo account is announced.