MaskedValue

Role and semantics

With label, the root is a named group (role="group"). The masked text has aria-hidden; a hidden text that says only the visible last characters is read instead. The show toggle is a toggle button with aria-pressed.

Keyboard

Key	Behaviour
Tab	To the show toggle, then to the Copy button.
Enter, Space	Reveals or hides the value.

Focus

Focus stays on the toggle; it does not move when the value changes.

Screen reader output

Example	Output
Masked	“Access key, group. Hidden value ending in 7731. Show value, toggle button, not pressed”
Revealed	“BB7Q2K9X4M7731. Show value, toggle button, pressed”

Contrast

The value has 4.5:1 and the toggle icon 3:1.

WCAG 2.2

Criterion	How MaskedValue meets it	What product teams must do
1.1.1 Non-text content	A meaningful text is read instead of a run of dots.	—
4.1.2 Name, role, value	The toggle states its state with aria-pressed.	Name the value with label.
2.2.1 Timing adjustable	hideAfter only changes the view; one press reveals the value again.	Do not make the time short.