List row

Overview

link

Web

tanrei-list-row

clock_loader_40

SwiftUI

TanreiListRow

radio_button_unchecked

Jetpack Compose

TanreiListRow

radio_button_unchecked

Flutter

TanreiListRow

radio_button_unchecked

React Native

ListRow

radio_button_unchecked

Generated from docs/status/status.json, specs/list-row.spec.json

Rows in a list: a static row with a switch, a row that opens something, and a row that is a link

A list row is the row most lists are made of: a name, a line or two about it, something before it and something after it. The list is a box that arranges its items and makes them actions, links or choices; the list row is what one item shows. Put it in a list item, or use it on its own where a single row is wanted.

The row draws text and glyphs only. It has no fill, no edge, no hover and no focus of its own, and it is never pressable by itself: the list item it is in decides that.

On the web it is <tanrei-list-row>. The other platforms have not implemented it yet.

Usage

link

<!-- In a list: the row is the item's direct child. The item makes it an action, a link or an option. -->
<tanrei-list dividers>
  <tanrei-list-item interactive>
    <tanrei-list-row leading-icon="wifi" headline="Wi-Fi" supporting-text="Connected to Harbour"
                     trailing-icon="chevron_right"></tanrei-list-row>
  </tanrei-list-item>
  <tanrei-list-item>
    <!-- A static row may hold a control of its own; name it with the row's headline. -->
    <tanrei-list-row headline="Bluetooth">
      <tanrei-switch slot="trailing" label="Bluetooth" label-hidden></tanrei-switch>
    </tanrei-list-row>
  </tanrei-list-item>
</tanrei-list>

<!-- A picture at the start, three lines of text. -->
<tanrei-list-row overline="Yesterday" headline="Mira Okada" supporting-text="The harbour photos are in the shared folder now." supporting-lines="2">
  <tanrei-avatar slot="leading" initials="MO" decorative></tanrei-avatar>
</tanrei-list-row>

<script type="module">
  import '@tanrei/web/components/list';
  import '@tanrei/web/components/list-row';
  import '@tanrei/web/components/switch';
  import '@tanrei/web/components/avatar';
</script>

import { List, ListItem, ListRow } from '@tanrei/react';

<List dividers>
  {networks.map((network) => (
    <ListItem key={network.id} interactive onClick={() => open(network)}>
      <ListRow leadingIcon="wifi" headline={network.name} supportingText={network.status} trailingIcon="chevron_right" />
    </ListItem>
  ))}
</List>

The row in each kind of list item

link

The row learns from the list item it is in what that item is, and draws itself to fit:

• A static item, or a row on its own. The row draws its own paddings and its own colors. A control in its leading or trailing slot keeps its own focus and press.
• An interactive item, a link item or an option. The item pads its content, so the row draws no padding of its own and keeps its height: a column that mixes static and pressable items keeps one height. The item is named by the row’s headline and described by its other texts. A selected option draws the row’s texts and glyphs in its selected content color.
• A reorderable list. The list’s handle stands at the item’s start, before the row, in place of the row’s start padding.
• Rows with and without a glyph. Where the list’s iconSpace asks for it (by default, while another row of the list draws a leading glyph), a row without a leading part keeps a glyph’s room, empty, so that its headline starts where the others’ do. A row on its own keeps none.
• A horizontal list, or one that wraps. In a line the row is as wide as its parts and is never cut; in lines that wrap it is never wider than the list, and its text is cut where it must be.

Put the row as the item’s direct child. A row wrapped in another element inside the item is told nothing and draws itself as it would on its own.

Specs

link

One, two and three lines; a picture and a value; compact

Anatomy

Part	Description
1 container	The row's box: as wide as its layout gives it, at least the height of its number of lines, padded at its start, its end, above and below — or, inside a list item that is an action, a link or an option, padded by that item. It draws no fill, no edge, no divider and no state of its own.
2 leading · optional	The part at the row's start: the product's content of the leading slot (an avatar, a picture, a checkbox, a radio button, a switch), or else the glyph leadingIcon names; or, where the row draws neither and the list it is in asks for it (LRW-16), an empty room of a glyph's size.
3 overline · optional	A short line above the headline: a category, a source, a time. One line.
4 headline	The row's name, on one line. The list item the row is in is named by it.
5 supporting-text · optional	The line or two under the headline: what the row is about, its state, a preview of a message.
6 trailing-text · optional	A short value at the row's end: a count, a size, a time, the current value of a setting. One line, never more than half of the row.
7 trailing · optional	The product's content of the trailing slot, after the trailing text: a switch, a checkbox, an icon-only Button, a badge.
8 trailing-icon · optional	A glyph at the row's very end: a chevron that says the row opens something, a status glyph. Decorative.
9 tooltip · optional	The whole of a headline or a supporting text that is cut (LRW-7): a plain tooltip with the headline, or a rich one with the headline as its title and the supporting text, over the row's text on hover and on the keyboard focus of the list item the row is in. Only while something is cut.

Properties

Property	Type	Default	Description
headline	string	""	The row's name, drawn on one line and cut with an ellipsis where it does not fit (the whole in the tooltip). The list item the row is in is named by it where the item has no label of its own.
overline	string	""	A short line above the headline: a category, a source, a time. One line, cut where it does not fit. Empty: none.
supportingText	string	""	The text under the headline, on as many lines as supportingLines says and cut on the last of them with an ellipsis (the whole in the tooltip). Empty: none.
supportingLines	number	1	How many lines the supporting text may take: 1 or 2. Two lines make the row a three-line row (LRW-3). Another number is read as the nearer of the two.
leadingIcon	string	""	The name of a glyph of the system's icon set drawn at the row's start: what the row is (a place, a setting, a kind of file). Decorative. The leading slot's content is drawn in its place where the slot holds any. Empty: none — or, in a List that asks for it (its iconSpace), the glyph's room, empty (LRW-16).
trailingText	string	""	A short value at the row's end: a count, a size, a time, a setting's current value. One line, never more than half of the row's inner width. Empty: none.
trailingIcon	string	""	The name of a glyph of the system's icon set drawn at the row's very end: a chevron that says the row opens something (chevron_right), a status. Decorative, and mirrored in a right-to-left layout where the icon set says the glyph points. Empty: none.
density	regular | compact	"regular"	How much room the row takes: its least heights and the space above and below its text. regular (56, 72 and 88 for one, two and three lines in the default system) is for a product used by touch as well as by pointer; compact (40, 56 and 72) is for a tool used with a pointer. An item that is an action, a link or an option is never lower than the list's own minimum height and the target. Inside an item of a List, the list's density is drawn in place of this one (LRW-17). A design system may add values.

Slots

Slot	Description
leading	Content at the row's start in place of leadingIcon: an avatar, a picture, or — while the row is static — a checkbox, a radio button or a switch. Drawn at its own size and given no style.
trailing	Content at the row's end, after the trailing text and before the trailing glyph: a badge, or — while the row is static — a switch, a checkbox or an icon-only Button. Drawn at its own size and given no style.

States

Behavior

Requirements in EARS form. Every platform implementation is tested against these ids.

ID	Requirement
LRW-1	THE list row SHALL be as wide as its layout gives it — and WHERE its layout sizes it to its content (an item of a horizontal list) as wide as its parts on one line — and SHALL lay out from its start edge: the leading part (LRW-4), the text (LRW-2), which takes the width that is left, and the trailing part (LRW-6), comp.list-row.container.gap apart, an absent part taking no room and no gap. WHILE it draws its own paddings (LRW-8) it SHALL keep comp.list-row.container.padding-inline-start before its first part, comp.list-row.container.padding-inline-end after its last, and the padding of its density (comp.list-row.container.padding-block.regular for regular, comp.list-row.container.padding-block.compact for compact) above its first line and below its last. THE list row SHALL draw no fill, no edge, no divider and no state of its own, SHALL take no focus and SHALL emit no event: it is never pressable by itself.
LRW-2	THE list row SHALL draw its headline in comp.list-row.headline.typescale and comp.list-row.headline.color on one line, cut at the end of its own direction with an ellipsis where it does not fit; WHILE overline is not empty, the overline above it in comp.list-row.overline.typescale and comp.list-row.overline.color, on one line cut the same way; WHILE supportingText is not empty, the supporting text below it in comp.list-row.supporting-text.typescale and comp.list-row.supporting-text.color, starting where the headline starts, on at most as many lines as supportingLines says — wrapping at the spaces of its words and cut with an ellipsis at the end of its last line where it takes more. The overline, the headline and the supporting text SHALL follow one another with no space between their lines. WHEN supportingLines is not 1 or 2 THE list row SHALL read it as the nearer of the two (1 for anything less than 1.5 or not a number) and in debug builds report it. The whole of every text SHALL be in what assistive technology is given (LRW-10), cut or not.
LRW-3	THE list row SHALL count its lines of text: one line WHILE it has a headline alone; two lines WHILE it has an overline or a supporting text of one line besides the headline; three lines WHILE it has both an overline and a supporting text, or a supporting text WHILE supportingLines is 2. It SHALL be at least the height of that count in its density — comp.list-row.container.height.one-line.regular, comp.list-row.container.height.two-line.regular or comp.list-row.container.height.three-line.regular for regular, comp.list-row.container.height.one-line.compact, comp.list-row.container.height.two-line.compact or comp.list-row.container.height.three-line.compact for compact — growing with its text and never clipping it, and SHALL centre its text in the height it has. WHILE it has one or two lines it SHALL centre the leading and the trailing part on the text; WHILE it has three it SHALL align them with the top of the text, so that a picture beside three lines stays with the headline.
LRW-4	WHERE the leading slot holds content THE list row SHALL draw that content at the row's start, at its own size and given no style, and SHALL NOT draw leadingIcon; WHERE it holds none and leadingIcon is not empty, THE list row SHALL draw that glyph of the system's icon set in a box of comp.list-row.leading-icon.size in comp.list-row.leading-icon.color, hidden from assistive technology, nothing in its place until the icon set can draw it, mirrored in a right-to-left layout WHERE the icon set says the glyph points. WHEN both are given THE list row SHALL draw the slot's content and in debug builds report that leadingIcon is not drawn.
LRW-6	WHILE trailingText is not empty THE list row SHALL draw it after the text, on one line, in comp.list-row.trailing-text.typescale and comp.list-row.trailing-text.color; it SHALL NOT wrap, and WHILE it would take more than half of the row's inner width it SHALL be cut at the end of its own direction with an ellipsis, so that the text keeps at least half. After it THE list row SHALL draw the trailing slot's content, at its own size and given no style, and after that, WHILE trailingIcon is not empty, that glyph of the system's icon set in a box of comp.list-row.trailing-icon.size in comp.list-row.trailing-icon.color, hidden from assistive technology, nothing in its place until the icon set can draw it, and mirrored in a right-to-left layout WHERE the icon set says the glyph points (a chevron_right points to the start there). The trailing text, the slot's content and the glyph SHALL be comp.list-row.container.gap apart.
LRW-7	WHILE a row's headline or its supporting text is cut (LRW-2) THE list row SHALL show the whole of it in a Tooltip component over the row's text WHEN a fine pointer rests on the row for the tooltip's show delay and WHEN the list item the row is the content of receives keyboard focus, and SHALL hide it WHEN the pointer leaves the row and the tooltip for the hide delay, WHEN that focus leaves, WHEN the user presses Escape (which then does nothing else), and WHEN the row is pressed; the tooltip SHALL stay while the pointer is over it (WCAG 1.4.13: dismissible, hoverable, persistent). It SHALL hold the headline alone WHERE the row has no supporting text, and the headline as the title and the supporting text as the text of a rich tooltip WHERE it has one. WHILE neither is cut THE list row SHALL show no tooltip. The tooltip SHALL be hidden from assistive technology, which is given the whole text (LRW-10); no touch long-press opens it, because a long press on a row is the platform's (and the List's, which lifts an item of a reorderable list).
LRW-8	WHILE a list row is the content of a list item that is an action, a link or an option (LST-48) THE list row SHALL draw no padding of its own — the item's paddings are the row's (LST-8) — and SHALL be at least its height (LRW-3) less twice comp.list.container.padding-block.regular tall, so that the item is as tall as the row standing alone and a column that mixes static items and actions keeps one height; WHILE it stands alone, or is the content of a static item or of an item of a reorderable list, THE list row SHALL draw its own paddings (LRW-1). The row SHALL fit every arrangement of the List: in a column it is as wide as the list; in a line it is as wide as its parts and never cut; in lines that wrap it is never wider than the list, and cut where it must be; in a reorderable list the List's handle stands before it, the item's gap away, and THE list row SHALL draw no padding before its first part, the handle and that gap standing in its place.
LRW-9	WHILE a list row is the content of a list item that is a selected option (LST-48) THE list row SHALL draw every text and glyph it draws in the content color the item hands its content (comp.list.selected.content.color, LST-8) instead of its own colors, so that the row reads on the selected fill as the item's own text does; the opacity of a disabled item (LST-15) SHALL apply to the whole row, its slots' content included, unchanged. THE list row SHALL leave the color of its slots' content to that content.
LRW-10	THE list row SHALL expose its texts to assistive technology as text, in the order they are drawn — the overline, the headline, the supporting text, the trailing text — whole, whether cut or not, and its glyphs not at all; it SHALL add no role, name or state of its own. WHILE it is the content of a list item, the item SHALL be named by the row's headline and described by its overline, supporting text and trailing text where the item is an action, a link or an option (LST-49). WHILE headline is empty THE list row SHALL still draw the rest, and in debug builds report that it has no headline, so that the item it is in has no name.
LRW-11	WHILE a list row stands alone, or is the content of a static item or of an item of a reorderable list, THE list row SHALL leave a control in its leading or trailing slot its own semantics, focus, keys and press, in the order the row draws them; the product names such a control with the row's headline ("Wi-Fi" for a switch, "Remove Inter" for a button). WHILE it is the content of an action, a link or an option, a control in its slots is the List's to report (LST-20), and THE list row SHALL draw it as given.
LRW-12	THE list row SHALL lay out its overline, its headline, its supporting text and its trailing text each as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right name, an address or a number with its unit keeps its order in a right-to-left layout; THE list row SHALL still place them and align their lines by the layout direction, so that in a right-to-left layout the leading part stands at the right edge and the trailing part at the left, and SHALL cut each at the end of its own direction.
LRW-13	WHILE the text size is enlarged THE list row SHALL grow its texts with it, keep its paddings and gaps and grow in height; a headline and a supporting text SHALL still be cut with an ellipsis and shown whole in the tooltip of LRW-7, the trailing text SHALL keep to half of the row, and THE list row SHALL set no fixed height, SHALL lose no content when the reader raises line height, paragraph spacing, letter spacing or word spacing (a cut text is whole in its tooltip and in what assistive technology is given), and SHALL need no horizontal scrolling at a width of 320 points with text at 200 %.
LRW-14	WHEN density names a value that the active design system does not have THE list row SHALL render with the default density's tokens and in debug builds report the unknown value; a density a design system added SHALL be drawn from that density's tokens, as the core values are. WHEN headline, overline, supportingText, trailingText, leadingIcon, trailingIcon, supportingLines or density changes while the row is shown THE list row SHALL draw the new form at once, without a motion of its own, and the list item it is in SHALL take the new name and description (LST-49).
LRW-15	WHILE forced colors are active THE list row SHALL draw its texts and its glyphs in the system's text color, and in the system's color for disabled text WHILE it is the content of a disabled item; it SHALL draw nothing that carries meaning in a color alone.
LRW-16	WHILE a list row has no leading part (LRW-4) THE list row SHALL begin its text at its start padding — except WHILE the list item it is the direct child of tells it to keep the room of a leading glyph (LST-48, LST-50), where it SHALL keep before its text a box of comp.list-row.leading-icon.size, comp.list-row.container.gap from the text, which draws nothing and is nothing to assistive technology, so that its headline starts where the headline of a row with a glyph does. WHILE it has no trailing part its text SHALL reach its end padding. It SHALL keep no other room for a part it does not draw: a row that draws a leading part keeps none besides it, and a row standing alone, or nested deeper in an item's content, keeps none, lining itself up with no other row.
LRW-17	WHILE the row is the direct child of an item of a List THE list row SHALL draw at the density the list tells it (LST-51) and SHALL NOT read its own density, so that the rows of one list are of one density; standing anywhere else it SHALL draw at its own. WHEN the density the list tells it changes THE list row SHALL draw the new form at once, as LRW-14 says of its own.

Platform name mapping

Parity does not mean identical APIs. Each platform uses its own idiom for the same contract.

Spec	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Component	tanrei-list-row	TanreiListRow	TanreiListRow	TanreiListRow	ListRow
headline · Property	headline	headline	headline	headline	headline
overline · Property	overline	overline	overline	overline	overline
supportingText · Property	supportingText	supportingText	supportingText	supportingText	supportingText
supportingLines · Property	supportingLines	supportingLineLimit	supportingMaxLines	supportingMaxLines	supportingLines
leadingIcon · Property	leadingIcon	leadingIcon	leadingIcon	leadingIcon	leadingIcon
trailingText · Property	trailingText	trailingText	trailingText	trailingText	trailingText
trailingIcon · Property	trailingIcon	trailingIcon	trailingIcon	trailingIcon	trailingIcon
density · Property	density	density	density	density	density
Notes	<tanrei-list-row headline="Wi-Fi" supporting-text="Connected" leading-icon="wifi">, placed as the direct child of a tanrei-list-item or on its own. The attributes are supporting-text, supporting-lines, leading-icon, trailing-text and trailing-icon. The slots are leading and trailing (slot="leading" on the product's element). The item tells the row what it is through an internal property it sets on its direct children; a row nested deeper in an item's content draws itself as standing alone. The tooltip is a tanrei-tooltip in the row's shadow root, made when it first opens.	TanreiListRow(headline:, overline:, supportingText:, leadingIcon:, trailingText:, trailingIcon:) { leading } trailing: { trailing } with view builders for the two slots. It reads what its TanreiListItem is from the environment the item sets. The tooltip is the platform's .help(_:) on macOS and nothing on iOS, where a cut text is whole in the accessibility label.	TanreiListRow(headline = "Wi-Fi", supportingText = …, leading = { … }, trailing = { … }) with composable lambdas for the two slots. It reads what its TanreiListItem is from a CompositionLocal the item provides.	TanreiListRow(headline: 'Wi-Fi', supportingText: …, leading: …, trailing: …) with widgets for the two slots. It reads what its TanreiListItem is from an InheritedWidget the item places above its content.	<ListRow headline="Wi-Fi" supportingText="…" leading={…} trailing={…} /> with React nodes for the two slots. It reads what its ListItem is from a context the item provides.

Tokens

Token	Aliases	Resolved (light)
--tanrei-comp-list-row-container-gap	sys.space.space200	16px
--tanrei-comp-list-row-container-height-one-line-compact	—	40px
--tanrei-comp-list-row-container-height-one-line-regular	—	56px
--tanrei-comp-list-row-container-height-three-line-compact	—	72px
--tanrei-comp-list-row-container-height-three-line-regular	—	88px
--tanrei-comp-list-row-container-height-two-line-compact	—	56px
--tanrei-comp-list-row-container-height-two-line-regular	—	72px
--tanrei-comp-list-row-container-padding-block-compact	—	4px
--tanrei-comp-list-row-container-padding-block-regular	—	8px
--tanrei-comp-list-row-container-padding-inline-end	sys.space.space200	16px
--tanrei-comp-list-row-container-padding-inline-start	sys.space.space200	16px
--tanrei-comp-list-row-headline-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-list-row-leading-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-leading-icon-size	sys.icon.medium	24px
--tanrei-comp-list-row-overline-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-trailing-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-trailing-icon-size	sys.icon.medium	24px
--tanrei-comp-list-row-trailing-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-headline-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-list-row-overline-typescale	sys.typescale.label-small	500 12px/1.3333
--tanrei-comp-list-row-supporting-text-typescale	sys.typescale.body-small	400 13px/1.5385
--tanrei-comp-list-row-trailing-text-typescale	sys.typescale.body-small	400 13px/1.5385

Fixtures

Canonical renderings. Every platform snapshots each fixture under the same id so the results can be compared.

density: regular (12)

one-line

headline: Wi-Fi

two-line

headline: Wi-Fi supportingText: Connected to Harbour

three-line

headline: Wi-Fi overline: Network supportingText: Connected to Harbour

supporting-two-lines

headline: Mira Okada supportingText: The harbour photos are in the shared fol… supportingLines: 2

leading-icon

headline: Wi-Fi supportingText: Connected to Harbour leadingIcon: wifi

leading-picture

headline: Mira Okada supportingText: Online slots: leading

trailing-text

headline: Storage supportingText: Photos, documents and backups trailingText: 12 GB

trailing-icon

headline: Display trailingIcon: chevron_right

trailing-control

headline: brief.pdf supportingText: 820 KB leadingIcon: description slots: trailing

all-parts

headline: Harbour photos overline: Shared supportingText: 48 items, edited today leadingIcon: folder trailingText: 2.4 GB trailingIcon: chevron_right

long-text

headline: Re: the harbour photos, the market stree… supportingText: The captions are in the shared document… leadingIcon: mail trailingText: 09:41

rtl

headline: صور الميناء supportingText: 48 عنصرًا leadingIcon: folder trailingText: 2.4 GB trailingIcon: chevron_right direction: rtl

density: compact (2)

compact

headline: brief.pdf supportingText: 820 KB leadingIcon: description density: compact

compact-one-line

headline: brief.pdf trailingText: 820 KB density: compact

Generated from specs/list-row.spec.json, tokens/comp/list-row.tokens.json, design/tokens/

Guidelines

link

When to use

link

Use a list row for each item of a list of people, places, settings, messages or files that all show the same parts. Use your own content in a list item when the items are tiles, cards or pictures, and a file item for a file that is being sent.

The parts

link

Part	Use for
Headline	The item’s name. It is what the list item is called for assistive technology, in the handle of a reorderable list and in typeahead.
Overline	A short category, a source or a time above the name.
Supporting text	What the item is about, its state, the start of a message: one line, or two with supportingLines.
Leading glyph or slot	What kind of thing the item is (leadingIcon), or an avatar or a picture of it (the leading slot).
Trailing text	A short value: a count, a size, a time, the current value of a setting.
Trailing slot	A badge, or in a static row a switch, a checkbox or an icon-only button.
Trailing glyph	A chevron that says the row opens something, or a status.

The headline, the overline and the supporting text are cut with an ellipsis where they do not fit, and a tooltip shows the whole of a cut headline and supporting text on hover and on keyboard focus. The trailing text never takes more than half of the row.

Density

link

regular rows are 56, 72 and 88 high for one, two and three lines in the default system, for a product used by touch as well as by pointer. compact rows (40, 56 and 72) are for a tool used with a pointer. An action, a link or an option is never lower than the list’s own minimum height and the touch target, whatever the density says.

Do

link

• Give every row a headline. Keep the overline a short category and the trailing text a short value.
• In a list, leave the glyph out of a row that has none to show: the list keeps its room, so the headlines still line up. Give every row of a column a picture, or none, since a picture’s room is not kept.
• Make a row that opens something the content of an interactive item or a link item.

Don’t

link

• Don’t put a control in a row that is the content of an interactive item, a link item or an option. That item is one element, so assistive technology cannot reach a control inside it. Keep such a row static.
• Don’t make the row pressable yourself (a click handler on the row). Use the list item, which carries the focus, the states and the minimum target.
• Don’t rely on the trailing glyph alone to say what a row does. The headline and the item’s role say it.

Accessibility

link

Role

none of its own: its texts are text (the content of a list item, or of the page)

Labeling

The row's texts are read in the order they are drawn: overline, headline, supporting text, trailing text. Its glyphs are decorative and hidden. A list item that holds the row is named by the row's headline where the item has no label, and an item that is an action, a link or an option is described by the row's overline, supporting text and trailing text (LST-49). A control in a slot is named by the product, with the row's headline.

Minimum target

The hit area meets the minimum target size even when the visual size is smaller. minimum 32px · pointer 44px · spacing 8px · touch 48px

Keyboard

Keys	Action

Notes

• The row is never pressable. Pressing, focus, hover, selection, the check, the handle and the dividers are the List's: a row that opens something is the content of an interactive item or a link item, and a row that is chosen is the content of an option. This keeps one element per item for assistive technology, and one target per item for a pointer.
• The row learns from the list item it is in what that item is (LST-48): inside an action, a link or an option it leaves the paddings to the item, and inside a selected option it takes the item's selected content color. Standing alone, or in a static item, it pads itself and draws its own colors.
• A control in a slot (a switch, a checkbox, an icon-only Button) belongs only in a static row — standing alone, or in a static or reorderable item — where it keeps its own semantics and focus. An action, a link or an option is one element to assistive technology and cannot hold another one.
• The headline, the overline and the supporting text are cut where they do not fit and shown whole in a tooltip; assistive technology always gets the whole text.
• Wherever a row stands in a column of rows that some have a leading glyph and some do not, give every row a glyph or none, so that the texts line up.

Generated from specs/list-row.spec.json, tokens/sys/measure.tokens.json

What the component handles

link

• The row’s texts are read as text, in the order they are drawn: overline, headline, supporting text, trailing text. Its glyphs are hidden.
• A list item that holds the row is named by the row’s headline where the item has no label, and an action, a link or an option is described by the row’s overline, supporting text and trailing text.
• A cut text is always whole for assistive technology. Its tooltip is hidden from it, opens on hover and on keyboard focus of the item, stays while the pointer is over it, and Escape closes it.
• In a right-to-left layout the row is mirrored, and each text keeps its own direction.
• In forced colors the texts and glyphs take the system’s text color, and its disabled color in a disabled item.
• Debug builds report a row without a headline, a supportingLines that is neither 1 nor 2, a leading glyph that the leading slot replaces, and an unknown density.

What you need to do

link

• Give the row a headline.
• Name a control in a static row with the row’s headline: “Bluetooth” for a switch, “Remove brief.pdf” for a button.
• Give an avatar or a picture in the leading slot its own text alternative, or hide it where the headline already names the person.