Text

Role and semantics

Text renders a <span> by default, with no role; its text is read in flow. Use render={<p />} for a paragraph and render={<label />} for a form label; the meaning comes from the element.

Keyboard

Key	Behaviour
Tab	Text does not take focus; Tab skips it.

Focus

None. Text is not in the focus order and shows no focus ring.

Screen reader output

The text is read as written. truncate cuts the visual only; the cut part stays in the accessibility tree and a screen reader reads the whole text.

Example	Announced
<Text>Metin örneği</Text>	“Sample text”
<Text tone="danger">…</Text>	The text as written; the colour is not announced

When colour carries meaning, the text or an icon must say the same.

Contrast

Text colours are checked in packages/tokens/test/contrast.test.mjs for at least 4.5:1 in every brand and mode. The test covers only the pairs below; other backgrounds are not measured.

Ton	Pair checked in the test
default	text-default / surface-default, surface-layer-2, surface-sunken
subtle	text-subtle / surface-default, surface-sunken
subtlest	text-subtlest / surface-default, surface-raised, surface-checker
inverse	text-inverse / surface-inverse
danger, success, warning, info	text-{tone} / surface-raised

If you use a status tone on a background other than surface-raised, its contrast is not measured; verify it yourself. inverse is measured on surface-inverse only.

WCAG 2.2

Criterion	How Text meets it	What the product team does
1.3.1 Info and relationships	render draws a meaningful element such as <p>, <label> or <time>.	Use Heading for text that looks like a heading.
1.4.1 Use of colour	Tone is colour only; the text carries the meaning.	Use status tones together with text or an icon.
1.4.3 Contrast (minimum)	At least 4.5:1 for the pairs above; the token test verifies it.	Measure contrast on backgrounds outside the test; do not set colour with className.
1.4.4 Resize text	Sizes are token styles; the text grows with zoom.	Where truncate is used, check that the full text is reachable at 200% zoom.
1.4.12 Text spacing	Line height comes from a token; the height is not fixed and the text wraps.	With truncate limiting lines, check the enlarged spacing.