Feat: Add support for horizontal orientation to GridList & ListBox
#8533
Conversation
…to layout-orientation
…ayout-orientation
|
@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 😅 |
|
|
||
| constructor(ref: RefObject<HTMLElement | null>) { | ||
| constructor(ref: RefObject<HTMLElement | null>, orientation?: Orientation) { |
There was a problem hiding this comment.
Not entirely happy with having to pass this here, but I couldn't think of any reliable alternative. I guess we could do something similar to the drop target delegate and place this information in a data attribute, but is this really preferable?
nwidynski
changed the title
orientation to ListLayout delegateorientation to GridList & ListBox
| @@ -380,6 +381,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta | |||
| shouldUseVirtualFocus: true, | |||
| shouldSelectOnPressUp: true, | |||
| shouldFocusOnHover: true, | |||
| orientation: 'vertical' as const, | |||
There was a problem hiding this comment.
We should explicitly set orientation whenever known to avoid queries to the DOMLayoutDelegate internally.
| @@ -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, | |||
There was a problem hiding this comment.
@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 🙏
| @@ -95,6 +95,9 @@ export interface SortDescriptor { | |||
| export type SortDirection = 'ascending' | 'descending'; | |||
|
|
|||
| export interface KeyboardDelegate { | |||
| /** Returns the orientation of the keyboard delegate. */ | |||
| getOrientation?(): Orientation | null, | |||
There was a problem hiding this comment.
Would love to require these, but I guess that's breaking?
|
@nwidynski heya sorry about the delay, opened #8544 for your build |
|
@LFDanLu Thanks! I will take a look tmrw, otherwise this is ready for review if the team finds time 👍 |
|
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! |
This PR adds support for
horizontalorientations toListLayoutand affected components in preparation for aCarouselcontribution.✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: