fix: Scroll GridList to focused drop indicators

[mvanhorn]

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Give the rendered GridListDropIndicator row a relative default position so its visually hidden, absolutely positioned focus target is anchored at the indicator's location in the collection; follow the equivalent positioning pattern already used by TreeDropIndicator. Keep the change inside the existing render-props/default-style path so consumer-provided styles continue to compose normally and no new helper or API surface is introduced. Add a real-browser regression in the existing GridList browser suite because jsdom cannot validate native focus-driven scrolling: render a reorderable list taller than a constrained scrollport, start keyboard dragging, navigate to an initially off-screen drop target, and verify both focus and the scroll offset.

Closes #6492

🧢 Your Project:

Not applicable to this change.

[snowystinger]

Looks like the PR is failing lint and the browser tests. As a reminder to your AI, you can run the browser tests with yarn test:browser

[mvanhorn]

Fixed the lint failure by wrapping the programmatic focus in act() in GridList.browser.test.tsx. Also rebased onto current main since the branch had fallen behind.

yarn lint passes now and the GridList Jest suite is green at 93 tests. I could not run yarn test:browser locally because my sandbox blocks localhost listeners, so that one is on CI.

[snowystinger]

If you are unable to see the browser test error, here it is

 FAIL   chromium-desktop  packages/react-aria-components/test/GridList.browser.test.tsx > scrolls focused drop indicators into view during keyboard reordering
TypeError: Cannot read properties of null (reading 'focus')

Failure screenshot:
  - packages/react-aria-components/test/__screenshots__/GridList.browser.test.tsx/scrolls-focused-drop-indicators-into-view-during-keyboard-reordering-1.png

 ❯ packages/react-aria-components/test/GridList.browser.test.tsx:158:23
    156|   let gridlist = container.querySelector('[role=grid]') as HTMLElement;
    157|   let dragButton = container.querySelector('[aria-label="Drag Item 0"]…
    158|   act(() => dragButton.focus());
       |                       ^
    159| 
    160|   await userEvent.keyboard('{Enter}');
 ❯ packages/react-aria-components/test/GridList.browser.test.tsx:158:2

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯

 FAIL   firefox-desktop  packages/react-aria-components/test/GridList.browser.test.tsx > scrolls focused drop indicators into view during keyboard reordering
TypeError: can't access property "focus", dragButton is null

Failure screenshot:
  - packages/react-aria-components/test/__screenshots__/GridList.browser.test.tsx/scrolls-focused-drop-indicators-into-view-during-keyboard-reordering-1.png

 ❯ packages/react-aria-components/test/GridList.browser.test.tsx:158:12
    156|   let gridlist = container.querySelector('[role=grid]') as HTMLElement;
    157|   let dragButton = container.querySelector('[aria-label="Drag Item 0"]…
    158|   act(() => dragButton.focus());
       |            ^
    159| 
    160|   await userEvent.keyboard('{Enter}');
 ❯ packages/react-aria-components/test/GridList.browser.test.tsx:158:6

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯

 FAIL   webkit-desktop  packages/react-aria-components/test/GridList.browser.test.tsx > scrolls focused drop indicators into view during keyboard reordering
TypeError: null is not an object (evaluating 'dragButton.focus')

Failure screenshot:
  - packages/react-aria-components/test/__screenshots__/GridList.browser.test.tsx/scrolls-focused-drop-indicators-into-view-during-keyboard-reordering-1.png

 ❯ packages/react-aria-components/test/GridList.browser.test.tsx:158:23
    156|   let gridlist = container.querySelector('[role=grid]') as HTMLElement;
    157|   let dragButton = container.querySelector('[aria-label="Drag Item 0"]…
    158|   act(() => dragButton.focus());
       |                       ^
    159| 
    160|   await userEvent.keyboard('{Enter}');
 ❯ packages/react-aria-components/test/GridList.browser.test.tsx:158:6

[mvanhorn]

@snowystinger thanks for pasting the failure, that was the whole thing. Fixed in a7dc05e.

The cause was not the selector being stale. In the browser environment aria-labels render as raw ICU templates: the drag handle is literally aria-label="Drag {itemText}" and the drop indicator is aria-label="Insert between {beforeItemText} and {afterItemText}". So [aria-label="Drag Item 0"] matched nothing and the test dereferenced null, in all three browsers.

The test now selects the handle by [slot=drag] and asserts aria-roledescription="drop indicator" rather than any localized string. I also dropped the act() wrapper, which browser mode rejects with "The current testing environment is not configured to support act(...)" and your setup escalates console errors to failures.

Verified against chromium locally: 4/4 in the file. I also checked the test is not vacuous by removing the defaultStyle: {position: 'relative'} line this PR adds, which makes the indicator render position: static and fails the assertion.

One thing worth flagging beyond this PR: since the labels come through uninterpolated, no browser test in the suite can assert a localized string today. Happy to open a separate issue if that is news.

[mvanhorn]

Thanks for pasting the output, that was the missing piece. Fixed in 3a9858c and I can confirm it passes locally now.

Two separate things were going on.

The null dragButton was a scoping problem, not purely a timing one. The poll waited on container.querySelector('[slot=drag]'), which searches the whole grid, and then the code did a second synchronous querySelector to get the element it actually used. It now polls the first row directly and captures the node inside the poll, so the element that gets focused is the one the poll observed.

The second thing is why my earlier attempt at this went nowhere: focus() cannot be wrapped in act() here. This suite runs in a real browser, React logs "The current testing environment is not configured to support act(...)", and test/browser/setup.ts fails the test on console errors, so the act() version failed with six of those instead of the null. That is also why rsp-rules/act-events-test is suppressed on that line rather than satisfied. If you would rather that rule just not apply to *.browser.test.tsx, I am happy to move it into the lint config instead and drop the inline suppression.

Verification: scrolls focused drop indicators into view during keyboard reordering fails on the previous head and passes on this one; all 4 tests in the file are green in chromium-desktop. I could not get firefox or webkit to launch locally (playwright's Firefox Nightly dies on launch on my machine), so those two are on CI.