-
1
One Tap Target
The row is one control, not a composition of tappable parts. Its name is the two text rows read in order, joined by the name computation with a space — "Where to? And for how much?" — so the Standard state needs no aria-label. The icon and the service image carry aria-hidden="true": the image repeats what the prompt says, and the icon repeats what the button trait already carries.
-
2
Skeleton Is Out Of The Tree
Not focusable, no tabindex. aria-hidden="true" takes it out of TalkBack's swipe order and out of VoiceOver's rotor, so both move from the element before it to the element after it; the screen announces its own loading through the region's aria-busy. There is no Disabled form on this component, so neither platform ever announces DISABLED or .dimmed for it.
-
The Subtitle Is Part Of The Name
"And for how much?" changes what the control promises — a rider who hears only "Where to?" does not know the next screen also quotes a price. It belongs in the name, which is why the two rows are joined rather than split across aria-describedby.
-
Focus
:focus-visible — var(--sp-s2) in var(--text-and-icon-primary) at radius var(--sp-s20), offset inward. Inward because the row spans its container: an outward ring would be drawn past that container's edge and clipped.
-
Keyboard
Tab / Shift+Tab move onto and off the row — one stop for the whole thing.Enter and Space both activate, which a native <button> carries on its own.The trap: a <div> standing in for the row — tempting, because it holds an image and two lines and reads like a card — loses the role, the focus stop and both keys at once. It needs role="button", tabindex="0" and a handler for each key. And neither text row may become interactive: a link in the title makes two controls where the design has one, and focus then stops twice on the same row.
-
Contrast
Title on var(--surface-on-white) — 15.69:1 light, 13.20:1 dark. AA and AAA both pass.Subtitle in var(--text-and-icon-secondary) — 4.64:1 light, 6.13:1 dark. AA passes at 14px; AAA does not.The light-theme margin over AA is 0.14, the narrowest number on the component. It leaves no room to darken the fill or lighten the subtitle — a subtitle that needs headroom moves to var(--text-and-icon-primary) rather than to a new colour.
-
Target Size
var(--sp-s64) tall and the full width of its container, against a 44 x 44 bar. The whole row is the target, icon and image included — nothing inside it invites a separate tap, and nothing inside it has one.
-
Long Strings
The label is read in full even when the visible text truncates — the name comes from the text content, not from the rendered line. A product string that is too long for the row is still announced whole.
-
Rotor By Heading
The title is Heading 2 by style, not by semantics: a <span> inside a button, so it does not enter VoiceOver's heading rotor. That is correct — the control is an action, not a section title.
-
RTL
The row mirrors as a whole from the document's dir: the icon moves to the trailing edge, the service image to the leading one, and the centred text column needs no change. Nothing flips in place — the default search glyph is not on the directional list in icon-container.md § 3.5, so the component carries no directional flip of its own. The illustration is the exception, and not a directional one: it ships scaleX(-1) in every variation, which belongs to the artwork and stays put whichever way the row runs. In Figma the mirrored composition is a variant of the set (RTL: Off | On).