Check the details and try again
`, so no heading remains — see Web); with both off there is no text element, and the button is the only stop; with the button off too, the block has nothing to read — the picture stays decorative and nothing is invented in its place (owner, 2026-10-21). **Accepted gap — both lines off.** The picture is decorative *because the text carries the state*. With both lines off that reasoning no longer holds: the picture is then the only thing that shows the state to a sighted user, and a screen-reader user gets the button alone (or nothing). The set allows the configuration and the owner ruled against inventing text, so this is recorded as a known gap, not solved: a host that turns both lines off owns giving the state a text equivalent elsewhere on the screen. **Announce when it replaces content, not when it loads with the screen.** StatusItem is static in itself; whether it is announced depends on how it appears, and the host decides, because only the host knows whether the block fills the screen: | How it appears | What happens | |---|---| | On screen load, with the rest of the screen | Nothing extra — read in reading order | | Inside a modal host (the "Status" bottom sheet) | The sheet owns focus and its own pane announcement; StatusItem counts as screen load inside it | | Replacing the whole screen's content after an action (a payment result, a failed request) | Focus moves to the text element, so the title and the subtitle are read at once. Moving focus *is* the announcement — nothing is announced on top of it | | Replacing a section (Compact in a card or a sheet section) while focus stays elsewhere | The title and the subtitle are announced once, politely; focus stays where it is | | After "Try again" — a result lands | **Focus decides, never both.** If focus is still where it was (the Button-Loading path below), the result is announced as for a replaced section, **even when its text is identical** to the previous one (a retry that fails again). If the focused element is gone, focus moves to the new text element, which reads it — no announcement on top | The last row is a deliberate exception to the Skeleton contract, which does not re-announce arriving content wholesale: a status is the one piece of content whose arrival is the news. **The retry path — where focus is between the tap and the result.** Two paths are allowed; the host picks one per screen: 1. **Button Loading (preferred).** The block stays; the button goes to its Loading state, which keeps focus (Button contract). When the result is a StatusItem that keeps its button, focus stays on it and the result is announced; when the result removes the button (a success, another screen), focus moves to the new text. 2. **Skeleton.** The block is replaced by its skeleton, which removes the focused button. Before it is removed the host parks focus on the loading region (a focusable, labelled container — web `tabindex="-1"`, TalkBack accessibility focus, VoiceOver `.layoutChanged` with the region), so focus never falls to the document or is lost. When the result lands, focus moves to the new text. A Button-Loading retry whose button is removed by the result and a Skeleton retry both end with focus on the text — so the result is read once. StatusItem has no alert semantics — an error StatusItem is content, not an urgent alert. ## Android · TalkBack | Element | Label | Value | Trait | Hint | |---|---|---|---|---| | StatusItem (root) | Not a node — a layout container; its children are the stops | — | — | — | | Illustration / Squircle | — | — | Decorative — `contentDescription = null` / `Modifier.clearAndSetSemantics {}` | — | | Text (title + subtitle) | `Modifier.semantics(mergeDescendants = true) { heading() }` on the TextContainer — reads "Something went wrong. Check the details and try again" | — | Heading | — | | Button | Its visible label ("Try again") — the Button contract | — | Button | Double-tap to activate (the Button contract, unchanged) | ### Edge states - **Replacing the screen's content:** focus moves to the merged text node. Views — `performAccessibilityAction(ACTION_ACCESSIBILITY_FOCUS, null)` on the text view (the merged container), which reads the title and the subtitle. Compose has no public API that moves TalkBack's accessibility focus: the host makes the new content a pane, `Modifier.semantics { paneTitle = "$title. $subtitle" }` on the block's container — the **whole text**, not the title alone, since the pane title is all TalkBack speaks on the change — and keeps the text node first in the block's traversal order, so the next swipe lands on it. That reads the state but does not place focus; recorded as the Compose gap, to verify on a device. `FocusRequester` is not the mechanism: it needs a focusable node, and `focusable()` on the text would add a keyboard Tab stop that acts on nothing. - **Replacing a section:** `Modifier.semantics { liveRegion = LiveRegionMode.Polite }` on a node that exists before and after the swap — the host's section container — so the change of its content is announced; a live region on a freshly composed node may not fire. Not verified on the shipped builds. - **Retry:** on the Button-Loading path with the button kept, a polite live region announces the result; it does not fire when the content does not change, so the host clears the region's content for one frame before setting the result. When the button is removed, focus goes to the text as for a screen replacement (Views `ACTION_ACCESSIBILITY_FOCUS`; Compose the pane-title gap above). On the Skeleton path the loading container takes accessibility focus before the button is removed. - **No subtitle / no title:** the merged node carries the one line left; still a heading. Both off: no text node — the button is the only stop, read as it is. - **No button:** the text is the only stop. - **Custom type:** the host's top content follows the same rule — decorative unless it carries information the text does not; then it is its own labelled node before the text. - **Skeleton:** every shape is hidden (`clearAndSetSemantics {}`); the loading region — the host's container — announces "Loading" once, politely, and is marked busy, per the Skeleton contract. The shipped DS skeleton sets no semantics of its own (a flagged gap of the Skeleton component), so the host hides the shapes explicitly. - **Disabled:** not applicable to the block. When the action is unavailable, the host omits the button rather than showing it disabled, so the screen-reader user is not left on a dead stop. - **Text scaling:** the Standard title (Heading 2) caps at 130%; the Compact title (Heading 4) and the subtitle scale to 150%, the DS maximum. Both are below WCAG 1.4.4's 200% (the DS-wide rule); the DS defines no mode above 150%, so how a shipped build treats a larger OS font scale is unverified. The lines wrap without truncation; the illustration holds 240 (fixed). At the larger modes the Standard block can exceed the viewport's height — the host's area scrolls, and the block is never clipped. - **Target size:** Compact uses Button `S` (`s40`) — below the 48 the DS uses (Button contract; 48dp is Android's guidance); the SP modes lift it to 52 at 130% and 60 at 150%. **Contract:** at 100% the hit region grows to 48 into the free space above and below it (the BottomSlot's `s16` gap and padding) — the only target in the block, so nothing overlaps. Implemented on the web (`shared.css`); the shipped mobile builds are unverified and the Button contract itself does not pad `S`, so this is an obligation of the StatusItem implementation (e.g. `minimumInteractiveComponentSize` on Android, a larger `contentShape` on iOS). - **Reduced motion:** the skeleton's shimmer zeroes at the token on the web; the shipped Android skeleton does not honour the system setting (a flagged gap of the Skeleton component), so the StatusItem skeleton inherits it. - **RTL:** the block is centred and reads the same; the button follows its own RTL contract. --- ## iOS · VoiceOver | Element | Label | Value | Trait | Hint | |---|---|---|---|---| | StatusItem (root) | Not an element — a container (`accessibilityElement(children: .contain)`) | — | — | — | | Illustration / Squircle | — | — | Decorative — `accessibilityHidden(true)` (UIKit: `isAccessibilityElement = false`) | — | | Text (title + subtitle) | `accessibilityElement(children: .combine)` on the TextContainer — "Something went wrong. Check the details and try again" | — | Header — SwiftUI `.isHeader`, UIKit `.header` | — | | Button | Its visible label ("Try again") — the Button contract | — | Button — SwiftUI `.isButton`, UIKit `.button` | Double-tap to activate (the Button contract, unchanged) | ### Edge states - **Replacing the screen's content:** SwiftUI — an `@AccessibilityFocusState` bound to the text, set when the block appears; moving focus reads it, nothing is announced on top. UIKit — `UIAccessibility.post(notification: .screenChanged, argument: textElement)` with the text's UIKit element, so VoiceOver moves to it and reads it. - **Replacing a section:** an announcement of the title and the subtitle joined with a sentence separator (". "), queued so it does not cut off current speech. UIKit — `UIAccessibility.post(notification: .announcement, argument: NSAttributedString(string: text, attributes: [.accessibilitySpeechQueueAnnouncement: true]))`. SwiftUI / iOS 17+ — `AccessibilityNotification.Announcement(attributedText).post()`, the `AttributedString` carrying the announcement priority `.default`. Focus stays put. - **Retry:** on the Button-Loading path with the button kept, an announcement is posted for each result, so an identical text is announced again (no clearing needed). When the button is removed, focus goes to the text as for a screen replacement — no announcement. On the Skeleton path, `UIAccessibility.post(notification: .layoutChanged, argument: loadingContainer)` before the button is removed. - **No subtitle / no title · No button · Custom type:** as on Android. - **Skeleton:** `accessibilityHidden(true)` on the shapes; the host's loading region announces once. Only the DS's `hasDsSkeleton` path hides the shapes — the unconditional `dsSkeleton(...)` does not (a flagged gap of the Skeleton component), so the host hides them or uses `hasDsSkeleton`. - **Dimmed / Disabled:** not applicable to the block; the host omits an unavailable button. - **Dynamic Type · Target size:** as on Android — the Standard title caps at 130%, the rest scales to 150%; the illustration holds 240; the host's area scrolls; Button `S`'s hit region grows to 48 (a `contentShape` larger than the label box) — the same unverified obligation. - **Reduced motion:** as on Android — the shipped iOS skeleton does not honour Reduce Motion (a flagged gap of the Skeleton component). - **RTL:** as on Android. ### Shipped builds (not verified) Both platforms ship `DsStatusItem` (Figma 3.1). The platform bridges carry no accessibility data, so whether the shipped builds hide the picture, merge the text and set the heading trait is not confirmed here. iOS requires `titleText` and `subtitleText` in its initializer, so a no-subtitle StatusItem there passes an empty string — whether that adds an empty pause to the label is unchecked. --- ## Web preview (reference) - **Structure:** the root is a plain `
`. Headings and paragraphs do not merge in the browser, so they are read as two lines in sequence, the heading first. With the title off, the subtitle stays a `
` — no heading remains on the web (accepted; the platforms keep the heading trait on the merged node). - **Button:** the DS `