Zoom Control Navbar Block for React

Edit STOPS (percent, ascending), FIT and CHOICES at the top. Minus goes to the first stop below the current zoom and plus to the first above it, so a fit value that isn't a stop (82%) still steps sensibly. The menu marks the choice that matches the current zoom, and none when you've stepped to a stop it doesn't list.

V, F, P and T pick a tool; 0, 5, 1 and 2 pick a zoom from the menu's list; minus and plus step. They work anywhere on the page that isn't a text field, and never with Control, Command or Alt held. The key is part of each control's name, and the menu shows its hints. Remove the listener in the effect if your page needs those keys.

One tool is always on. The arrow keys move between the tools and Space or Enter chooses the focused one. The zoom menu opens from its button with Enter, Space or the Down arrow, Escape closes it, and focus returns to the button.

It changes the percentage the bar shows and speaks; there is no canvas here. Read zoom and tool from the bar's state in your own page and draw from them.

The wordmark and Share shrink to their icons (the words stay for screen readers), the minus and plus hide below md, and the tool readout shows from lg. The percentage button opens the same menu, so every zoom is still one tap away. Nothing wraps and the bar is 56 pixels at every width.

Nothing moves on load. The menu fades and grows from its button, and instantly appears under reduced motion; a band of light sweeps across Share once on hover and focus (it fades in place under reduced motion).