Add overlays and modals

Add the account-settings modal and link it to the profile avatar so Marco in support can test the password flow Monday. The modal must trap focus, allow closing with ESC and the Close icon, and preserve scroll position underneath. Verify the Save button becomes enabled only when changes are made and call out any copy that needs legal review.

Before I send this to Marco, make the modal reviewer-friendly: make the close affordances visible, show the disabled and enabled Save states, surface where focus will land when opened, and highlight any inputs with validation rules so a QA tester won’t miss flaky behavior.

I linked the profile avatar to the settings modal, but pressing ESC leaves it open. Support and QA will try keyboard shortcuts first; I’m worried it’s a focus trap misconfiguration or that the modal instance isn’t the active layer. I can’t see if the close action is attached to the correct component. What check should I run now to fix this before Marco tests tomorrow?

Across releases we ship modals that later fail accessibility and keyboard tests, forcing last-minute patches. I need a single habit to stop this. What naming, component rules, and a short accessibility preflight will catch focus, ESC, and ARIA issues before QA discovers them?