PasswordInput

Role and semantics

The field renders as <input type="password">, bound to its <label>. The eye button is a <button> with aria-pressed and a fixed name (“Show password”); its state is read as pressed or not. The rule list is a <ul> linked to the field with aria-describedby; each rule’s state is read as hidden text, not by colour alone.

Keyboard

Key	Behaviour
Tab	Moves to the field, then to the eye button.
Enter, Space	On the eye button, shows or hides the value.

Focus

Focus wraps the whole box (focus-within); while the eye button has focus the ring stays on the box, so two rings never show.

Screen reader output

Example	Output
Field	“Password, secure text”
Eye button	“Show password, button, not pressed”
Rule	“At least 12 characters, not met”
After typing stops	“2 of 3 requirements met”, polite announcement
Caps Lock	“Caps Lock is on”

Contrast

Rule text in color-text-success and color-text-subtle has 4.5:1 on the background; strength segments have at least 3:1. The strength level is also written as text.

WCAG 2.2

Criterion	How PasswordInput meets it	What product teams must do
1.3.5 Identify input purpose	autoComplete is required.	Choose the right value.
1.4.1 Use of colour	Rule state is also given by icon and text.	—
3.3.8 Accessible authentication (minimum)	Paste and password managers are never blocked.	Do not add code that blocks paste.
4.1.2 Name, role, value	The eye button has aria-pressed.	—
4.1.3 Status messages	Rule progress and the Caps Lock warning use role="status".	—