Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table (VO) - keyboard navigation announces not focused cell #7734

Open
bogdan-androsov-jobrad opened this issue Feb 6, 2025 · 2 comments
Open

Comments

@bogdan-androsov-jobrad
Copy link

Provide a general summary of the issue here

When using VoiceOver to navigate within a table that has custom React Aria-based keyboard navigation, there is a noticeable delay in cell announcements.

For example, in a 3x3 table:

Moving from Row 2, Cell 2 → Row 2, Cell 1 → Row 2, Cell 2,
VO might get stuck announcing Row 2, Cell 1, instead of updating to Row 2, Cell 2 if you're fast enough.

🤔 Expected Behavior?

VO should announce the actual focused cell

😯 Current Behavior

If change happened fast enough VO announces previous cell.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

  1. Open https://react-spectrum.adobe.com/react-aria/examples/stock-table.html
  2. Activate VO
  3. Try navigating between cells
  4. If you're fast enough focused cell will differ from the VO announcement

Version

1.4.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS - 15.2 (24C101)

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@snowystinger
Copy link
Member

Thanks for reporting.

It's not just that the announcement is lagging, the VO cursor is also lagging, with it staying on the cell it was announcing.

It's like it didn't quite follow the focus() call to move between the cells.

Will have to see what VO bugs already exist and see if we can reproduce it in other situations.

@dnaploszek
Copy link

@snowystinger I've noticed that using keyboard rerenders the whole table (you can use react-devtools and enable the "Highlight updates when components rerender".

Image

It seems that the table component suffers from unnecessary renders due to the Focus manager state. Noticed that in large virtualized tables it's possible to experience degraded performance too 😢. I was looking for any potential solution for this, and wondering if it's a separate issue to take a look at.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants