Support grid layout and tab navigation in GridList #6486
Conversation
| * via the left/right arrow keys or the tab key. | ||
| * @default 'arrow' | ||
| */ | ||
| navigationBehavior?: 'arrow' | 'tab' |
There was a problem hiding this comment.
seems pretty good to me, matches linkBehavior which indicates that the way you interact with an element changes due to this prop
There was a problem hiding this comment.
I would lean towards keyboardNavigationBehavior, although it's longer, it avoids confusion with router navigation-related props.
| ...props, | ||
| keyboardDelegate, | ||
| // Only tab navigation is supported in grid layout. | ||
| navigationBehavior: layout === 'grid' ? 'tab' : navigationBehavior |
There was a problem hiding this comment.
confusing? I originally only had layout as a prop, but realized that navigationBehavior="tab" might be useful for some cases even in stack layout so now it's two props. But I don't think arrow navigation in grid layout doesn't really make sense? But maybe? I guess table does that...
|
This is useful. Can you add a Storybook control for this so that it's easier to demo the behavior with stack layout? Testing, locally doesn't seem like |
| gridTemplate: args.layout === 'grid' ? 'repeat(3, 1fr) / repeat(3, 1fr)' : 'auto / 1fr', | ||
| gridAutoFlow: 'row' | ||
| }}> | ||
| <MyGridListItem>1,1 <Button>Actions</Button></MyGridListItem> |
There was a problem hiding this comment.
do items know what is their index in the data source?
do items know what is their position in the visible viewport/row?
|
Does the drag and drop logic need any updates or modifications? |
|
@jaknas I don't think so. This line enables grid layout support, which is already available in ListBox: https://github.com/adobe/react-spectrum/pull/6486/files#diff-87753d6f055505c1f4a4cb6698abe34276d6aa0c17bee1f8b9ec509c4e22944aR169 |
| disabledKeys, | ||
| disabledBehavior, | ||
| layout, | ||
| direction: 'ltr' |
There was a problem hiding this comment.
Shouldn't this be sourced from useLocale instead of being ltr all the time?
There was a problem hiding this comment.
oops, yeah! good catch
|
## API Changes
unknown top level export { type: 'any' } @react-aria/gridlistAriaGridListOptions AriaGridListOptions<T> {
disabledBehavior?: DisabledBehavior
isVirtualized?: boolean
keyboardDelegate?: KeyboardDelegate
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
linkBehavior?: 'action' | 'selection' | 'override' = 'action'
onAction?: (Key) => void
shouldFocusWrap?: boolean = false
}it changed:
AriaGridListProps AriaGridListProps<T> {
disabledBehavior?: DisabledBehavior
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onAction?: (Key) => void
} |
| ...props, | ||
| keyboardDelegate, | ||
| // Only tab navigation is supported in grid layout. | ||
| keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior |
There was a problem hiding this comment.
Wondering if 'arrow' should be allowed in grid layouts so for example https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/#ex2_label can be implemented.
Having the ability to implement the following behaviour for arrow key navigations in grid layout lists regardless of orientation (vertical or horizontal), since layout is only relevant for sighted users, seems useful:
- left/right: navigate to next focusable element, either within the item, or in the next/prev item.
- up/down: Move to prev/next item and attempt to land on the corresponding element.
Related to #4742
This adds a
layoutprop to the RAC GridList component, which can be set to "stack" (default) or "grid". When set to "grid", arrow key navigation is used to move left and right between columns. To access focusable elements inside the items, tab can be used instead. The tab sequence goes through elements within the focused item before going out of the collection.This can also be enabled even for stack layouts via the
keyboardNavigationBehavior="tab"prop. For example, if you have a list where interactive elements within items aren't arranged horizontally, tab might make more sense.