A sensitive value — a tax ID, a date of birth, an account number — shown
redacted and revealed in place when the reader hovers or focuses it.
The reveal rides on the copy button, so a pointer, a keyboard and a tap all
reach it: the reveal keys off :focus rather than :focus-visible because a
tap produces the former and not the latter. The full value is what gets
copied either way.
The redaction holds for assistive technology too — label names the field
("Copy tax ID") instead of interpolating the secret into the button's
accessible name, so a screen reader announces what is on screen and a
speech-input user can say it.
A sensitive value — a tax ID, a date of birth, an account number — shown redacted and revealed in place when the reader hovers or focuses it.
The reveal rides on the copy button, so a pointer, a keyboard and a tap all reach it: the reveal keys off
:focusrather than:focus-visiblebecause a tap produces the former and not the latter. The full value is what gets copied either way.The redaction holds for assistive technology too —
labelnames the field ("Copy tax ID") instead of interpolating the secret into the button's accessible name, so a screen reader announces what is on screen and a speech-input user can say it.