dequelabs / dequelabs/cauldron

[a11y] TreeView: focused row scrolls out of the viewport in virtualized examples

Open
#2,518 3 comments 0 reactions 1 assignee Claimed by @mateoviilla1 View on GitHub
accessibility
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

## Problem
On the "Virtualized (Long Lists)" and "Virtualized with Cascade Selection" examples, arrowing through tree items causes the tree to march up out of the visible area. The focused row ends up off screen, so keyboard and screen reader users can't see which item has focus.

## Steps to Reproduce

1. Open https://pr-2475.d15792l1n26ww3.amplifyapp.com/components/TreeView/#virtualized-with-cascade-selection
2. Move focus into the tree.
3. Press Down Arrow repeatedly to move through the items.
4. Watch the position of the tree and the focused row.

## Expected Behavior
The focused tree item stays within the visible viewport as the user arrows through the list.

## Actual Behavior
Each arrow key press scrolls the nearest scrollable ancestor, pushing the tree — and the focused row with it — out of view.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.