Skip to content

Screen reader keyboard navigation skips cells when columns are virtualized #9550

@jtribe32

Description

@jtribe32

Provide a general summary of the issue here

When navigating a horizontally-scrolling table that uses TableView with a screen reader, arrow key focus moves before React renders the virtualized cells. This causes focus to skip over cells that aren't in the DOM yet, jumping to the end of the row instead of the next column.

🤔 Expected Behavior?

Arrow key should focus on the next column in the table when using a screen reader

😯 Current Behavior

Pressing the arrow key at the end of the rendered page, skips several columns when using a screen reader

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

  1. Create a TableView with enough columns to trigger horizontal virtualization
  2. Focus on a cell in the table using a screen reader
  3. Use the right arrow key to navigate through the columns
  4. When reaching the edge of the rendered columns, observe that focus skips multiple cells

https://codesandbox.io/p/devbox/eager-lumiere-4g85qm

Version

3.45.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Tahoe 26.2

🧢 Your Company/Team

Adobe/Analytics

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    Status

    🩺 To Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions