-
1
A Group, Not A Control
No role, no name, no value, no focus stop. Web: <div>s with no role, no aria-label, no tabindex.TalkBack: no node of its own — Modifier.semantics { isTraversalGroup = true } keeps its components together (Compose 1.5 or later).VoiceOver: accessibilityElement(children: .contain) — a group whose components stay separate elements.The trap: Modifier.semantics(mergeDescendants = true) on Android and children: .combine on iOS fuse the components into one stop — a Button and a TextField, neither reachable on its own. clearAndSetSemantics removes them from the tree altogether, and so does accessibilityHidden(true) on the iOS content wrapper. Hide only the card's background shape.
-
2
Decoration Is Silent
The overlay — the root's ::before with no text, outside the accessibility tree; it takes no pointer events of its own. The root's box — the margins and the strip — still takes them: what lies under it is reached by scrolling it clear.The card's border and shadow — drawing, not nodes; on iOS the background shape is accessibilityHidden(true).The home-indicator strip — padding; it holds nothing. On the web it is env(safe-area-inset-bottom): present on a device with a home indicator when the page opts into viewport-fit=cover, zero elsewhere.
-
3
Components Announce Themselves
Each on its own contract — the Main CTA here is announced as that Button. A disabled one is "Disabled" on TalkBack and stays in swipe navigation; "Dimmed" on VoiceOver and stays reachable. Inside the card they are read in layout order — start to end, top to bottom; the start follows the reading direction where a component supports RTL.
-
Reading Order
Read together, at the container's place in the screen — after the content for a bottom container; floating over the content does not move it earlier.Web: the markup follows the content it floats over — position: fixed / sticky moves it visually only, the DOM order is the reading and Tab order (WCAG 1.3.2, 2.4.3).TalkBack: where the default positional order would interleave the container with the items under it, the host gives it a traversalIndex higher than the content's default 0f — to verify with TalkBack.VoiceOver: safeAreaInset(edge: .bottom) places it after the content, in the view order and by position. Laid over in a ZStack, it is read after the content when declared after it; declared earlier, the host sets an accessibilitySortPriority lower than the content's (higher is read first).
-
The Focus Stays Clear Of The Card
WCAG 2.2 · 2.4.11 Focus Not Obscured (AA) for keyboard focus on the web; the same intent for screen-reader focus on iOS and Android. Two parts, both the host's: a bottom inset as tall as the container — the last item scrolls above the card — and a focused element brought into view above it.Web: padding-bottom and scroll-padding-bottom on the scroll container (html when the document scrolls) do both; the height is measured, not assumed — the Animation demo measures it with a ResizeObserver: Tab through its rows.TalkBack: LazyColumn(contentPadding = …) gives the inset — Scaffold's bottomBar only hands it over as innerPadding. An item wholly under the card can still take the focus without a scroll: the host brings it into view (BringIntoViewRequester, animateScrollToItem), or ends the viewport above the card (a Column with the content weight(1f)) — the dependable form, since Compose exposes no accessibility-focus callback.VoiceOver: safeAreaInset(edge: .bottom) insets the content — a container laid over it another way sets the scroll view's bottom content inset to its measured height. An item under the card can still take the focus without a scroll: the host scrolls it clear when it takes the VoiceOver focus (@AccessibilityFocusState with ScrollViewReader's scrollTo(_:anchor:)), or ends the scroll view above the card.Ending the scroll view above the card costs the overlay's fade-under: nothing scrolls under the card any more.On iOS and Android the screen reader reveals an item against the scroll view's bounds, which do not know about the card — to verify on a device.
-
A TextField, Zoom And Large Text
With a TextField inside, the container rides above the on-screen keyboard — Android on the IME inset (Modifier.imePadding()). On iOS Safari a position: fixed container stays on the layout viewport: the host sizes it against visualViewport, or unpins it.Where little of the content stays in view — 400 % zoom (320 CSS px), the largest text sizes, the keyboard open — the host lets the container scroll with the content instead of pinning it: in flow, or sticky inside the content (WCAG 1.4.10 Reflow, 1.4.4 Resize Text).
-
The Press Is Visual Only
With one Button inside, the card presses with it — drawn from the Button's own press state. The card gains no handler, role or focus stop: the Button stays the only target, announced on its own contract, and the card does not press while the Button is disabled or a Skeleton.
-
Content Change
The container is not a live region. A component inside that changes — a CTA whose price updates — announces on its own contract, or the host does; nothing is announced for the container.
-
Text Scaling
var(--sp-130-s24) — the corners grow to 130 % and stop.var(--sp-100-s8) — the margins stay; the card hugs its components at every size, and the bottom inset follows the container's measured height.
-
Reduced Motion
--component-push-button-press / --component-push-button-release — the card's press, zeroed in motion.css under prefers-reduced-motion.The card still steps to 95 % and back, instantly, as the Button does; nothing is announced.
-
Forced Colours
The border and the shadow are box-shadow, which forced colours remove; the card takes a CanvasText outline so its edge survives. The edge carries no contrast requirement.
-
Contrast
--border-transparent — the card's edge, with the M shadow: no 3:1 duty — the card is neither a control nor a graphic needed to understand the content (WCAG 1.4.11).--surface-floating — the card's fill, which the components are read on, whatever the screen's background.--text-and-icon-primary — 17.76:1 Day, 15.52:1 Night on it (WCAG 1.4.3; measured from the primitives).--text-and-icon-secondary — 5.25:1 Day, 7.21:1 Night.--floating-container-fill — a re-pointed fill re-checks every component's pairs, in both themes.