Akryum / Akryum/vue-virtual-scroller
How to focus element that isn't YET rendered in virtualized list (roving tabindex pattern)?
- 主要语言
- TypeScript
- 星标
- 10.8k
- 派生
- 973
- PR 合并指标
- 30 天内没有已合并 PR
描述
### Describe the bug
This is really more of a discussion post (the [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions) 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
```shell
.
```
### Used Package Manager
pnpm
### Validations
- [x] Read the [docs](https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md).
- [x] Check that there isn't [already an issue](https://github.com/Akryum/vue-virtual-scroller/issues) that reports the same bug to avoid creating a duplicate.
- [x] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions).
- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。