Function
See GuidePhoneScreenProps
A decorative miniature of the step's iOS screen
Reconstructed from a screen recording of the real device, so the positions are the ones the learner will actually be hunting in: iOS 26 Safari's bottom bar, the menu behind "···", the share sheet in both the state it opens in and the state "View More" leaves it in, and the confirmation screen.
The share sheet is two surfaces rather than one because the learner sees two. It opens collapsed, with no list on it at all, and the guide that drew only the expanded one was sending learners to scroll a list their phone was not showing. The two share ShareSheetTop, so the second reads as the first having grown.
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 height it does not occupy on a real phone, 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 — and a learner whose phone is in Spanish sees «Compartir» here, not "Share".
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.
A miniature iPhone showing the iOS surface one install step happens on, with that step's target control picked out.