Akryum / Akryum/vue-virtual-scroller

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

未关闭
#904 0 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
enhancement
主要语言
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 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。