SafariWindowScreen

Remarks

Reconstructed from the real thing — the iPad from the iPadOS 26.5 simulator and a recording of a device, the Mac from Safari 26.6.2 and a recording — so the positions are the ones the learner will actually be hunting in.

One component for two platforms, because Safari gives them one shape: a toolbar with share at its trailing end, a popover hanging off that control with the page undimmed behind it, and a confirmation over a dimmed page. Three enumerable differences are all that separate them, and each is drawn from the step rather than from a branch buried in the drawing code:

• the iPad's popover carries an app row and a row of round actions, and has a collapsed state; the Mac's is one flat list that opens complete;
• the iPad confirms on a light card centred over the page, with Add at the top trailing corner and an Open as Web App switch; the Mac confirms on a sheet hung from the top of the window, with Cancel and Add at the bottom trailing corner and no switch;
• the icon comes to rest on a home screen, or in the Dock.

The iPhone is not drawn here. Its surfaces rise from the bottom of a phone and have their own component.

Controls the learner does not need are drawn as unlabelled grey shapes at their true position and size. Dropping them would be tidier and would also move the target to a place it does not occupy on a real screen, which is the one thing this component exists to get right.

The target's label is read from the same message key the step's instruction uses, so the picture and the sentence can never name different controls.

It is aria-hidden: it repeats what the instruction already says, and a screen reader walking a mock of someone else's UI would only be noise.