[Agustin-Delgado]

Problem

Button makes its pending live region as a sibling of the <button>, visually hidden with position: absolute. Inside a scroll container that is not positioned, that span is laid out against an ancestor outside the scroller. While the container scrolls, Chrome promotes the sticky content around it (a page header) to its own compositing layer to keep the span in place, and the header text loses subpixel anti-aliasing (greyscale text). A probe in a consumer app showed that position: fixed on those spans restores the baseline exactly.

Fix

• New shared primitives/visually-hidden.ts (position: fixed; top: 0; left: 0 plus the usual clip). This is the style that Combobox.Status, Autocomplete.Status, TransferList.Status, Table and Toast already used, each with its own copy (or from table/utils).
• Button, Dropzone and the TimePicker wheel column live regions move from their inline absolute style to the shared one. The Button live region stays a sibling: inside the button its text would join the accessible name.
• The duplicated copies and table/utils/visually-hidden-style.ts are replaced by the shared module.
• Native proxy controls (DatePicker/DateRangePicker hidden input, Dropzone file input, Select hidden select) keep position: absolute on purpose: the browser anchors its validation bubble to them.

Tests

• visually-hidden.test.ts for the shared style.
• button.test.ts: the live region computes to position: fixed.
• lint, typecheck (ui + docs), vitest (2225 tests) and the SSR suite pass locally.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
human-kit-ui-docs	Ready	Preview	Oct 24, 2026 9:54pm UTC