Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Accessibility: is a “tiny” option warranted? (font-size + spacing audit)

Question: TEDY’s concept tables are dense; do we need a new “tiny” accessibility option? Audited Marina/reference-editor vs @helex/ui sizing.

What @helex/ui already has (two orthogonal axes)

  • Density (HelexDensity, libs/ui/src/lib/themes/themes.ts): comfortable (controls 40px, table cell 16/16, gaps 6/12/16/20/32) · default (32px, 16/16, 4/8/12/16/24) · compact (24px, 8/8, 2/4/8/8/16 + antd compactAlgorithm). Driven via AccessibilityModal → HelexThemeProvider → buildAntTheme/applyThemeCSSVars.
  • Font size (HelexFontSize, HelexThemeProvider.tsx): normal 14px · large 18px · extraLarge 26px (root <html> font-size + .helex-scaled-*). Both axes only go bigger/looser than baseline except compact.

Marina / reference-editor density (px, base font 14)

Marina + reference-editor both set html{font-size:14px}. the reference platform never drops global font below 14 — it shrinks font only inside nzSize="small" tables (~10.5px).

Metricreference-editorhelex comfortablehelex defaulthelex compact
Base font14141414
Control height32 (24 small)403224
Table cell padding11.2/11.2 (small 5.6/11.2 + font↓~10.5)16/1616/168/8
Card padding12~2424~12
Typical row heightsmall ~27–32 / default ~44~53~53~37

Verdict

The opinion is partially right — but as a DENSITY step, not a FontSize option, and only for data-grade tables.

  • @helex/ui compact is already denser than reference-editor’s default (control 24 vs 32, cell 8 vs 11.2). For ordinary screens, use compact — no new preset needed.
  • The only place the reference platform is denser is its small-table mode (~27–32px rows), which shrinks both padding and in-table font — something no @helex/ui density does. For big concept tables (the reference platform precedent: a 37,504-row CodeSystem), a denser step buys ~15–30% more visible rows. A narrow, real gap.
  • Reject a FontSize “tiny” (sub-14 global) — WCAG-adverse; the FontSize axis exists to scale up for low-vision users, and the reference platform never goes sub-14 globally.

A new HelexDensity 'tiny' (below compact): keep global font 14, compress padding, and shrink font within tables only (mirroring the reference platform’s --*--sm table vars). Proposed tokens (from the audit):

  • DENSITY_MAPS.tiny = { gapXs:2, gapSm:4, gapMd:6, gapLg:6, gapXl:12, rowPadding:6 }
  • antdComponentSizeFor: tiny → 'small' + compactAlgorithm
  • buildAntTheme tiny overrides: token.controlHeight:24, controlHeightSM:20; components.Table:{cellPaddingBlock:4, cellPaddingBlockSM:4, cellPaddingInline:8, cellPaddingInlineSM:8, cellFontSizeSM:13}; components.Card:{bodyPadding:8}. Global fontSize stays 14.
  • Edit sites (@helex/ui, all additive): themes.ts (HelexDensity union, DENSITY_MAPS, antdComponentSizeFor, buildAntTheme), settings/AccessibilityModal.tsx (radio + helex.settings.access.tiny key), themes.test.ts. Effort ~½ day.

This is a shared @helex/ui change → needs sign-off (per the leaned-down convention). Cheaper alternative that avoids a global preset: apply antd size="small" + a scoped cellFontSize override on the specific TEDY concept-table components only.