Dialog Face

One step of a multi-step dialog. Pairs with AutoHeight: that animates the box, this animates and focuses the face inside it. Replaces the identical five-prop motion.div that was copy-pasted into every multi-step dialog.

It exists for focus. When a face swaps, the control the user just activated is unmounted, and measured, focus fell to the document body, stranding keyboard and screen-reader users. Focus now moves to the face container: inside the dialog, at the top of the new content, and never wearing a button’s focus ring.