Virtualize a long list or table without losing keyboard and screen-reader support

You are adding virtualization to a React list or table that is currently rendering every row into the DOM at once. You pick a windowing strategy that fits the actual data shape, and you explicitly preserve keyboard navigation and screen-reader semantics that virtualization can silently break if the rows outside the viewport simply don't exist in the DOM.

LIST OR TABLE
A transaction history table for an accounting tool, showing every line item for an account.

ITEM COUNT AND SHAPE
Typically 5,000 to 40,000 rows per account; every row has the same three-line layout.

ROW HEIGHT BEHAVIOR
Fixed height, 56px per row, no wrapping text.

INTERACTION REQUIREMENTS
Must support arrow-key row navigation and Enter to open a row, and must announce total row count to screen readers.

CURRENT IMPLEMENTATION
A plain .map() over the full array rendering a <TransactionRow> for each item inside a scrollable div — no virtualization at all today.

VIRTUALIZATION RULES
Choose a fixed-size list implementation only if every row is genuinely the same height; choose a variable-size or dynamically-measured implementation if row height depends on content, and be explicit that measured rows require an actual measurement pass — usually a ResizeObserver-backed hook — not a guessed average height, since a guessed height causes visible jump-scrolling the moment a real measurement replaces the estimate. Set overscan to render a small number of extra rows above and below the visible window, large enough that fast scrolling or arrow-key navigation doesn't visibly flash empty space, but not so large that it defeats the purpose of virtualizing in the first place. If the list needs to be keyboard-navigable, implement roving tabindex on the visible, rendered rows only, and make sure focus is explicitly re-established on the correct row after a scroll-triggered re-render swaps which DOM nodes exist — a naive virtualization will drop focus entirely the moment the focused row scrolls out of the rendered window and gets unmounted. Expose the correct ARIA semantics for the container's actual role — aria-rowcount and aria-rowindex on a table-like structure, or aria-setsize and aria-posinset on a listbox-like structure — set to the full logical count and index, not just the count of rows currently mounted in the DOM, so a screen-reader user is told "row 340 of 12,000" and not "row 4 of 9." If the table has a sticky header row, keep it outside the virtualized scroll container so it never gets unmounted along with off-screen body rows, and account for its height separately when calculating the visible window instead of treating it as just another row the virtualizer manages.

OUTPUT FORMAT
1. Which virtualization library and row-height mode you chose, and the one-sentence reason tied to the stated row height behavior.
2. The implementation, as real code, including the overscan value chosen and why.
3. The keyboard-navigation and ARIA handling, called out as its own section, not folded silently into the general implementation.
4. Anything about the current implementation that will need to change beyond just wrapping it in the virtualizer — a CSS assumption that every row is in normal flow, for instance.