Secret from @prepared911/ui-core masks sensitive values (tokens, keys, phone numbers) while offering a toggle to reveal, copy, or regenerate them. The primitive wires the visibility toggle and copy action; your job is to label the field, announce state changes, and keep the reveal action obvious.
What the component handles
- Visibility toggle. The reveal button toggles between masked and unmasked states and exposes
aria-pressed.
- Copy action. The copy button copies the underlying value and optionally fires a status message.
- Masked output. Dots or fixed-width placeholder characters render by default.
- Field label. A visible label ("API key", "Webhook secret") or an
aria-label when none fits.
- Revealed state announcement. When the value is revealed, the rotor should announce the change—use the toggle's pressed state, and pair a copy action with a
Snackbar or live-region confirmation.
- Destructive regenerate warnings. If regenerating a secret invalidates existing tokens, surface the consequence in a
Callout before confirming.
- Tab / Shift+Tab move between the field, reveal button, and copy button.
- Enter / Space activate the focused button.
- The masked input accepts typing like a normal text field when editable.
- Reveal button →
role="button" with aria-pressed.
- Copy button →
role="button" with a descriptive label ("Copy API key").
- Input → standard text or password input depending on whether the value is user-editable.
Screen reader announcements
- Copy confirmations should use a polite live region ("API key copied").
- When a value is regenerated, announce the new state ("Secret regenerated; previous value invalidated").
- Revealed secrets in shoulder-surfing contexts. Default to masked; auto-remask on blur or after a timeout for session safety.
- Hidden copy buttons. Don't hide copy behind hover-only reveal; users on touch devices or assistive tech can't discover it.
