Prepared Docs

VirtualizedList from @prepared911/ui/virtualized-list keeps every row in the accessibility tree. The browser skips layout and paint for rows outside the viewport; it does not unmount them. The component owns the list semantics, the scroll region, and scroll-into-view when focus moves to a skipped row. You name the region, write the row content, and announce paging.

What the component handles

List semantics. It renders a ul with role="list" and one li per item. Do not set a role on the row content.
Skipped rows stay reachable. Tab and programmatic focus reach a control in any row. Focusing it lays the row out and scrolls it into view.
Scroll region. When the list overflows and no row holds a focusable control, Scrollable exposes a role="region" tab stop. Pass scrollRegionLabel so that region has a name.
Find-in-page. A match in a row the browser has not laid out still exists in the DOM.

What you must provide

scrollRegionLabel whenever the list scrolls and the rows themselves are not focusable.
Stable keys via getItemKey when rows insert or reorder, so focus and state stay on the same item.
Live announcements at the boundaries. loadingRow and errorRow are content you render. Put a polite live region on a loading row and an assertive error, with a retry control, when a page fails.
Paint inside the row. A focus ring drawn outside the row's border box is clipped. The row keeps --space-4 of overflow margin, which covers the focus ring's offset plus its width.

Keyboard behavior

Tab moves through every focusable control in item order, including controls in rows that are not laid out yet. Focusing one scrolls it into view.
Arrow keys, Page Up, Page Down, Home, and End scroll the region when the scroll region itself is the tab stop. That is native scrolling; the list does not implement a roving tab index.
scrollToIndex and scrollToOffset move the scrollport from a button or other control. VirtualizedListAlign.Start and End land the row clear of the edge fade.

Semantics and roles

role="list" on the ul (kept even when the list has no markers).
One li per item. renderItem returns the row's content, not another list item.
No aria-posinset or aria-setsize. Every row is present, so the list's count is the DOM's count.

A loading row should announce "Loading more" politely, and announce how many rows arrived when the page completes.
An error row should announce once and offer retry. The list does not announce for you.

Virtualized List / API and Development

Date Input / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

What the component handles

List semantics. It renders a ul with role="list" and one li per item. Do not set a role on the row content.
Skipped rows stay reachable. Tab and programmatic focus reach a control in any row. Focusing it lays the row out and scrolls it into view.
Scroll region. When the list overflows and no row holds a focusable control, Scrollable exposes a role="region" tab stop. Pass scrollRegionLabel so that region has a name.
Find-in-page. A match in a row the browser has not laid out still exists in the DOM.

What you must provide

scrollRegionLabel whenever the list scrolls and the rows themselves are not focusable.
Stable keys via getItemKey when rows insert or reorder, so focus and state stay on the same item.
Live announcements at the boundaries. loadingRow and errorRow are content you render. Put a polite live region on a loading row and an assertive error, with a retry control, when a page fails.
Paint inside the row. A focus ring drawn outside the row's border box is clipped. The row keeps --space-4 of overflow margin, which covers the focus ring's offset plus its width.

Keyboard behavior

Tab moves through every focusable control in item order, including controls in rows that are not laid out yet. Focusing one scrolls it into view.
Arrow keys, Page Up, Page Down, Home, and End scroll the region when the scroll region itself is the tab stop. That is native scrolling; the list does not implement a roving tab index.
scrollToIndex and scrollToOffset move the scrollport from a button or other control. VirtualizedListAlign.Start and End land the row clear of the edge fade.

Semantics and roles

role="list" on the ul (kept even when the list has no markers).
One li per item. renderItem returns the row's content, not another list item.
No aria-posinset or aria-setsize. Every row is present, so the list's count is the DOM's count.

A loading row should announce "Loading more" politely, and announce how many rows arrived when the page completes.
An error row should announce once and offer retry. The list does not announce for you.