How to focus element that isn't YET rendered in virtualized list (roving tabindex pattern)?

[ozzyfromspace]

Describe the bug

This is really more of a discussion post (the GitHub Discussion link for that is broken, so I'm using this forum instead).

Context:

One consequence of virtualizing a list is that not all elements are in the DOM. Thus, tabbing to a specific element may fail.

For example, in the roving tabindex pattern, only one item ever has tabindex="0", the rest have tabindex="-1". Other items can then be accessed via arrow keys. This is an accessibility-first approach.

However, the roving tabindex pattern doesn't work here because the item with the "active index" isn't rendered, so the focus attempt fails, and things break.

Specific Use Case:
List of 250 conversation previews
User selects item number 248 (now active)
User scrolls far away from item 248
User tabs into the list from outside
Expected: List scrolls to item 248 and focuses it
Actual: Focus fails because item 248 isn't in the DOM

Question:
Is there a standard recipe for implementing roving tabindex with this library?
Specifically:

How can we ensure an off-screen item with tabindex="0" can receive focus when tabbing into the list?
Is there a hidden API to force rendering of a specific item before focusing it?
Are there any examples of accessible keyboard navigation with vue-virtual-scroller that I can learn from?

Thanks,
Ozzy

Reproduction

.

System Info

.

Used Package Manager

pnpm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.