Field Type Menu Navbar Block for React

Edit FIELD_TYPES (an id, a label and an icon each) and MAX_FIELDS at the top. START_FIELDS is what the form holds when the page loads, by type id. The count, the polite lines and the menu's disabled state all read the same list of fields, so they can't disagree. Nothing is stored.

It changes a phase in state: draft, publishing for a moment (PUBLISH_MS), then live. Nothing is published, and the polite line says "Live in this demo. Nothing was published." Replace publish and the timer with your own request, and move to live when it answers. Copy puts LINK on the clipboard for real; point it at your form. Unpublish goes back to a draft.

Choosing a field type or removing a field returns focus to the Add field button, as keyboard users get from the menu itself. When Publish turns into Live, focus follows to Unpublish, but only if it was still on Publish (or nowhere); if you've moved on, it stays where you put it. Unpublish returns focus to Publish.

Add field opens its menu with Enter, Space or the Down arrow; the arrow keys move between types, Enter chooses and Escape closes. The Edit and Preview control is a radio group: the arrow keys move between the two and select. Publish stays in the tab order while it waits (it is marked disabled with aria-disabled, not removed), so focus never falls off.

The form's name hides below sm, and the wordmark is its icon below lg. Add field, the Edit and Preview control, Publish and Unpublish show icons, with the words kept for screen readers. The Publish cell always holds the width of the Live layout, so the bar doesn't shift when the form goes live. Nothing wraps and the bar is 56 pixels at every width.

Nothing moves on load. The menu fades and grows from its button, and appears instantly under reduced motion; the Publishing spinner turns, and stands still beside the word Publishing under reduced motion. A band of light sweeps across Publish once on hover and focus (it fades in place under reduced motion).