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

* feat: add orientation to layout

* feat: forward orientation to gridlist keyboard delegate

* fix: remove duplicate keyboard delegate in gridlist

* Feat: Add support for `orientation` to `KeyboardDelegate` interface

* fix: implement layout delegate interface

* fix: enumerable keys

* fix: bidirectional overscan for table layout

* chore: remove orientation fallback from domlayoutdelegate

* fix: listbox stories

* chore: review

* fix: gridlist orientation

* chore: naming

* fix: content nodes

* fix page up/down navigation for horizontal lists

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: nwidynski

packages/@react-aria/listbox/src/useListBox.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaListBoxProps} from '@react-types/listbox';
-import {DOMAttributes, KeyboardDelegate, LayoutDelegate, RefObject} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate, LayoutDelegate, Orientation, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {listData} from './utils';
 import {ListState} from '@react-stately/list';
@@ -55,7 +55,13 @@ export interface AriaListBoxOptions<T> extends Omit<AriaListBoxProps<T>, 'childr
    * - 'override': links override all other interactions (link items are not selectable).
    * @default 'override'
    */
-  linkBehavior?: 'action' | 'selection' | 'override'
+  linkBehavior?: 'action' | 'selection' | 'override',
+
+  /**
+   * The primary orientation of the items. Usually this is the direction that the collection scrolls.
+   * @default 'vertical'
+   */
+  orientation?: Orientation
 }
 
 /**
@@ -68,6 +74,7 @@ export function useListBox<T>(props: AriaListBoxOptions<T>, state: ListState<T>,
   let domProps = filterDOMProps(props, {labelable: true});
   // Use props instead of state here. We don't want this to change due to long press.
   let selectionBehavior = props.selectionBehavior || 'toggle';
+  let orientation = props.orientation || 'vertical';
   let linkBehavior = props.linkBehavior || (selectionBehavior === 'replace' ? 'action' : 'override');
   if (selectionBehavior === 'toggle' && linkBehavior === 'action') {
     // linkBehavior="action" does not work with selectionBehavior="toggle" because there is no way
@@ -119,6 +126,7 @@ export function useListBox<T>(props: AriaListBoxOptions<T>, state: ListState<T>,
       'aria-multiselectable': 'true'
     } : {}, {
       role: 'listbox',
+      'aria-orientation': orientation,
       ...mergeProps(fieldProps, listProps)
     })
   };

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -248,7 +248,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
     let nextKey: Key | null = key;
     if (this.orientation === 'horizontal') {
-      let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
+      let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.x - itemRect.width + this.layoutDelegate.getVisibleRect().width);
 
       while (itemRect && itemRect.x < pageX && nextKey != null) {
         nextKey = this.getKeyBelow(nextKey);

packages/@react-aria/selection/src/useSelectableList.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaSelectableCollectionOptions, useSelectableCollection} from './useSelectableCollection';
-import {Collection, DOMAttributes, Key, KeyboardDelegate, LayoutDelegate, Node} from '@react-types/shared';
+import {Collection, DOMAttributes, Key, KeyboardDelegate, LayoutDelegate, Node, Orientation} from '@react-types/shared';
 import {ListKeyboardDelegate} from './ListKeyboardDelegate';
 import {useCollator} from '@react-aria/i18n';
 import {useMemo} from 'react';
@@ -34,7 +34,12 @@ export interface AriaSelectableListOptions extends Omit<AriaSelectableCollection
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
    */
-  disabledKeys: Set<Key>
+  disabledKeys: Set<Key>,
+  /**
+   * The primary orientation of the items. Usually this is the direction that the collection scrolls.
+   * @default 'vertical'
+   */
+  orientation?: Orientation
 }
 
 export interface SelectableListAria {
@@ -54,7 +59,8 @@ export function useSelectableList(props: AriaSelectableListOptions): SelectableL
     disabledKeys,
     ref,
     keyboardDelegate,
-    layoutDelegate
+    layoutDelegate,
+    orientation
   } = props;
 
   // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
@@ -68,9 +74,10 @@ export function useSelectableList(props: AriaSelectableListOptions): SelectableL
       disabledBehavior,
       ref,
       collator,
-      layoutDelegate
+      layoutDelegate,
+      orientation
     })
-  ), [keyboardDelegate, layoutDelegate, collection, disabledKeys, ref, collator, disabledBehavior]);
+  ), [keyboardDelegate, layoutDelegate, collection, disabledKeys, ref, collator, disabledBehavior, orientation]);
 
   let {collectionProps} = useSelectableCollection({
     ...props,

packages/@react-spectrum/table/test/TableTests.js

@@ -1990,7 +1990,7 @@ export let tableTests = () => {
         let row = cell.closest('[role=row]');
         let cells = within(row).getAllByRole('gridcell');
         let rowHeaders = within(row).getAllByRole('rowheader');
-        expect(cells).toHaveLength(9);
+        expect(cells).toHaveLength(10);
         expect(rowHeaders).toHaveLength(1);
         expect(cells[0]).toHaveAttribute('aria-colindex', '1'); // checkbox
         expect(rowHeaders[0]).toHaveAttribute('aria-colindex', '2'); // rowheader