The foundational list row — a universal tappable element for settings, contacts, menus, and transactions.
Cell is the fundamental building block for lists — a universal tappable row for settings, menu items, transactions, addresses, and contacts. It always fills its container width, and every preset is a locked configuration of a single CustomCell base with all slots configurable.
Three states, the same on every preset — one block each. Press is feedback, not a state: see Animation.
.is-disabled on the root; the rows inherit it.A colour swap, not an opacity.
.squircle--disabled, from the Squircle component. A control in the end-slot takes its own disabled state the same way.
Two containers: the row of four slots, and the optional description under it. Only start-text is required.
CustomCell with every slot on. The presets lock a subset of these slots; only the Squircle sizes change the start-slot and, at M, the vertical padding.
overflow: hidden, so the press overlay clips to the corners. The cell keeps its own padding.
dir="rtl" — opt-in per instance.
Motion follows the motion system § 6.1 — pushHighlight, the press without scale. The row has three motions of its own — the press, the disabled colour change and the skeleton's shimmer; a selection control brings its own.
InkWell with its splash in the press overlay colour, black 10% (the State/PressedStateOverlay style).
motion.css zeroes every --component-* inside prefers-reduced-motion: reduce, so the overlay appears without a fade; no override of its own.
Cell is the row of a list — settings, menus, contacts, trip history, a choice.
radiogroup. Any number of choices is Checkbox rows; an on/off setting is a Switcher row.
controlTarget: separate). More actions go to a swipe or a context menu.
Settings
Share my trip
Payment
Saved places
A row is one focus stop — or two when its control is a separate target. The full model and the per-platform tables live in cell-a11y.md.
<button type="button"> — the button role natively; type="button" keeps a cell inside a form from submitting it.The name comes from the cell's own text — title, then subtitle. aria-label only when that text is not a good name.TalkBack: "{title}, {subtitle}", Button, "Double tap to activate".VoiceOver: "{title}, {subtitle}", .button, "Double tap to activate".
aria-describedby to a visually hidden span; the chevron itself is not announced.TalkBack: "Double tap to open". VoiceOver: "Double tap to open".
:focus-visible only.--text-and-icon-primary — its colour.var(--sp-s2) — the inward offset: a list clips its rows, so an outer ring would not show.The same ring on .cell__action; on a row cell it is the control's ring too.
role="checkbox" and aria-checked on the row, its text the name. The box inside is drawn without its safe zone and carries aria-hidden="true" — announced once, by the row.TalkBack: "{title}, {subtitle}, Checkbox, Not checked", "Double tap to toggle".VoiceOver: one element; the box's state merges into the row's traits — selected / not selected; "Double tap to toggle setting".aria-checked, data-ds-state and the box's --selected class change in one handler. A Switcher row is the same with role="switch".After a toggle the new state is read at once, the focus still on the row — the state lives on the row's own element. A state left on the box is never reported; one written only into the label is not reliably read.UI tests read the state on the row: Android checked, iOS value (Switcher) / selected trait (Checkbox, RadioButton), web aria-checked.Cell has no selected state of its own and no aria-selected — a selected row is announced through its control.
role="radiogroup" with its own name; each row role="radio".One Tab stop — tabindex="0" on the selected row, or on the first enabled row when the selected one is disabled.TalkBack: "{title}, {subtitle}, Radio button, Checked, 1 of 2"; "Double tap to select", none once selected.VoiceOver: the selected trait; "Double tap to select", none once selected.
.cell__action — a <button> stretched over the cell, first in the DOM, so it takes the focus first.The root is a <div>: a <button> cannot contain another button — the trap of this model.TalkBack: "{title}", Button, with "{subtitle}" as its description and the row's hint.VoiceOver: "{title}, {subtitle}", .button, the row's hint.The text block is aria-hidden="true" so swipe navigation does not read it a second time; the label and description references still resolve.
aria-checked and name — the title.TalkBack: "{title}, Checkbox, Not checked". VoiceOver: "{title}", its own trait and state.
disabled — out of the Tab order, the trait announced. The control inside takes its own disabled state.TalkBack: "Disabled" after the label, no hint; the row stays in swipe navigation and a double tap does nothing. A selected row reads its value first — "Checked", then "Disabled".VoiceOver: "Dimmed", no activation hint; the row stays in the rotor. A selected row reads "Selected", then "Dimmed".The trap: on a separate cell .is-disabled on the <div> is visual only — disabled goes on both buttons.
aria-hidden, and the loading list carries the busy state once — aria-busy="true" on the web. VoiceOver announces the container once.
<button>, which synthesizes a click on Enter — a bare click handler would toggle a Checkbox row on Enter. The handler flags Enter on keydown and swallows that click, so Enter stays free to submit the form.