Skip to content

Feat: Add support for horizontal orientation to GridList & ListBox #8533

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

Open
wants to merge 12 commits into
base: main
Choose a base branch
from

Conversation

nwidynski
Copy link
Contributor

@nwidynski nwidynski commented Jul 12, 2025

This PR adds support for horizontal orientations to ListLayout and affected components in preparation for a Carousel contribution.

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

🧢 Your Project:

@nwidynski
Copy link
Contributor Author

@LFDanLu Would you be so kind to issue a build for this PR? I'm going insane because of a bug with virtualized dnd, which I can't seem to get rid of locally, even after reverting all changes and clearing caches. I would really like to know whether the issue exists on remote 😅

@nwidynski nwidynski changed the title Feat: Add support for horizontal orientation to ListLayout delegate Feat: Add support for horizontal orientation to GridList & ListBox Jul 14, 2025
@@ -117,6 +123,7 @@ export function useListBox<T>(props: AriaListBoxOptions<T>, state: ListState<T>,
'aria-multiselectable': 'true'
} : {}, {
role: 'listbox',
'aria-orientation': orientation === 'horizontal' ? orientation : undefined,
Copy link
Contributor Author

@nwidynski nwidynski Jul 14, 2025

Choose a reason for hiding this comment

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

@majornista Should we set aria-orientation only if deviating from the implicit orientation as defined in each role spec? I adjusted useTabList as well to match, let me know what you think 🙏

@LFDanLu
Copy link
Member

LFDanLu commented Jul 14, 2025

@nwidynski heya sorry about the delay, opened #8544 for your build

@nwidynski
Copy link
Contributor Author

nwidynski commented Jul 14, 2025

@LFDanLu Thanks! I will take a look tmrw, otherwise this is ready for review if the team finds time 👍

@LFDanLu
Copy link
Member

LFDanLu commented Jul 15, 2025

sounds good, we are gearing up for a release very soon, but noted this one down (and #8523) for the team to checkout right after!

Copy link
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

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

Will be bring this up with the team tomorrow, but looks good to me at a glance, thanks!

@LFDanLu
Copy link
Member

LFDanLu commented Jul 24, 2025

mainly wondering if some of the changes/refactors can be simplified since we already supported orientation for Listbox previously

@nwidynski
Copy link
Contributor Author

nwidynski commented Jul 24, 2025

@LFDanLu Maybe the PR title is misleading - The primary target of this is to add orientation to the Layout class and its derivates, e.g. ListLayout. While the Listbox did support orientation, it was only affecting keyboard movement and not visual layout for virtualization.

@nwidynski nwidynski force-pushed the layout-orientation branch from b6452fc to 2d97559 Compare July 25, 2025 09:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants