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.