Table
table, caption, thead, tbody, tr, th, td, and the scroll wrapper a wide one needs. No type on table itself: a table's cells inherit from wherever it sits, and a font-size here would reset type the surrounding context legitimately chose.
The element
| Surface | Light | Dark |
|---|---|---|
| bg | 3.69 | 3.80 |
| bg-subtle | 3.41 | 3.56 |
| bg-raised | 3.22 | 3.21 |
| bg-inset | 3.50 | 3.66 |
Why caption reverses its flow
@erikakers/typography files caption as not yet covered: it derives caption's type at 15.24px with margins shaped for a <figcaption>, which sits below its figure. A <caption> sits above the table it labels (caption-side: top, restated rather than left to the UA), so the tight edge belongs under it instead of over it: the module's derived margins are asymmetric the wrong way round for this element. Slate takes the role's type and writes the spacing itself, reversed: margin-block: 0 var(--slate-space-3). Legitimate because caption is claimed by nothing, so this is a first source rather than a second one.
The scroll wrapper
A table wider than its container scrolls inside a wrapper rather than taking the page's own scrollbar with it (WCAG 1.4.10). The wrapper needs three attributes CSS cannot supply: tabindex="0", role="region" and an accessible name, so the region is reachable by keyboard even in engines that do not make an overflowing scroller focusable on their own.
| Role | Step | Size | Leading | Tracking | Weight | Lead | Flow | Family |
|---|---|---|---|---|---|---|---|---|
| display | 7 | 4.5rem | 1.05 | -0.02em | bolder | 3.885168rem | 1.942584rem | Hanken Grotesk |
| h2 | 5 | 3.0521rem | 1.318 | -0.01em | bolder | 3.885168rem | 0.971292rem | Hanken Grotesk |
| body | 0 | 1.1563rem | 1.68 | 0em | normal | 0rem | 1.942584rem | Petrona |
| fine | -2 | 0.7842rem | 1.68 | 0.01em | normal | 0.971292rem | 1.942584rem | Fragment Mono |
Keyboard interaction
- Tab reaches the scroll wrapper above (
tabindex="0"), which is announced as a region named "Every derived type role". - With the wrapper focused, the arrow keys scroll a table wider than its container (WCAG 2.1.1: a scroll container that is not keyboard-focusable cannot be scrolled by keyboard at all).
- A table with no scroll wrapper carries no extra tab stop, because it needs none.