Skip to content

feat: Add 'orientation' prop to GridList#9785

Merged
snowystinger merged 6 commits intoadobe:mainfrom
essandhu:feat/gridlist-horizontal-orientation
Mar 13, 2026
Merged

feat: Add 'orientation' prop to GridList#9785
snowystinger merged 6 commits intoadobe:mainfrom
essandhu:feat/gridlist-horizontal-orientation

Conversation

@essandhu
Copy link
Contributor

@essandhu essandhu commented Mar 12, 2026

Closes #6928

Adding an orientation prop to the GridList aria component and updating arrow key navigation to respect the new prop. Added new unit tests to verify this behavior and new Storybook controls and an example ("Draggable Grid List Example") so that drag and drop can be tested.

✅ 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:

Steps to replicate the original issue:

  1. Open the GridList story in Storybook
  2. Set layout to "stack" and note that Arrow Down/Up moves focus between items.
  3. Drag and drop is also locked to vertical arrow keys, which doesn't work for horizontal layouts

Testing the new orientation prop:

  1. In the GridListExample story, set orientation to "horizontal" and layout to "stack"
  2. Verify that Arrow Left/Right now moves focus between items
  3. Set layout to "grid" while keeping orientation "horizontal"
  4. Verify Arrow Down/Up moves between items in the cross axis and Arrow Left/Right moves in the primary axis
  5. Set orientation back to "vertical" and confirm both stack and grid layouts behave the same as before
  6. Open the DraggableGridListExample story and set orientation to "horizontal"
  7. Focus an item, press Enter to start a drag
  8. Verify drop indicators are navigable with Arrow Left/Right
  9. Press Enter to complete the reorder and confirm it works
  10. Set orientation back to "vertical" and confirm drag and drop still uses Arrow Down/Up as before

🧢 Your Project:

None

@github-actions github-actions bot added the RAC label Mar 12, 2026
@essandhu essandhu changed the title Feat/gridlist horizontal orientation feat: Add 'orientation' prop to GridList Mar 12, 2026
@essandhu essandhu marked this pull request as ready for review March 12, 2026 22:42
Copy link
Member

@reidbarber reidbarber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@snowystinger snowystinger added this pull request to the merge queue Mar 13, 2026
Merged via the queue into adobe:main with commit b39acc3 Mar 13, 2026
28 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[RAC] Add orientation prop to GridList

4 participants