[RAC]: Update Tabs navigation for arrow keys (#4821)

Allow tab item select via all arrow keys regardless of orientation.

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

Author: mariareedstrom

packages/@react-aria/tabs/docs/useTabList.mdx

@@ -319,7 +319,7 @@ tab selection.
 
 ### Orientation
 
-By default, tabs are horizontally oriented. The `orientation` prop can be set to `vertical` to change this. This affects keyboard navigation. You are responsible for styling your tabs accordingly.
+By default, tabs are horizontally oriented. The `orientation` prop can be set to `vertical` to change this. This does not affect keyboard navigation. You are responsible for styling your tabs accordingly.
 
 ```tsx example
 <Tabs aria-label="Chat log orientation example" orientation="vertical">

packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts

@@ -17,49 +17,33 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: Collection<T>;
   private flipDirection: boolean;
   private disabledKeys: Set<Key>;
-  private orientation: Orientation;
 
   constructor(collection: Collection<T>, direction: Direction, orientation: Orientation, disabledKeys: Set<Key> = new Set()) {
     this.collection = collection;
-    this.flipDirection = direction === 'rtl' && orientation === 'horizontal';
-    this.orientation = orientation;
+    this.flipDirection = direction === 'rtl' && orientation === 'horizontal';    
     this.disabledKeys = disabledKeys;
   }
 
   getKeyLeftOf(key: Key) {
     if (this.flipDirection) {
       return this.getNextKey(key);
-    } else {
-      if (this.orientation === 'horizontal') {
-        return this.getPreviousKey(key);
-      }
-      return null;
     }
+    return this.getPreviousKey(key);
   }
 
   getKeyRightOf(key: Key) {
     if (this.flipDirection) {
       return this.getPreviousKey(key);
-    } else {
-      if (this.orientation === 'horizontal') {
-        return this.getNextKey(key);
-      }
-      return null;
-    }
+    } 
+    return this.getNextKey(key);
   }
 
   getKeyAbove(key: Key) {
-    if (this.orientation === 'vertical') {
-      return this.getPreviousKey(key);
-    }
-    return null;
+    return this.getPreviousKey(key);
   }
 
   getKeyBelow(key: Key) {
-    if (this.orientation === 'vertical') {
-      return this.getNextKey(key);
-    }
-    return null;
+    return this.getNextKey(key);
   }
 
   getFirstKey() {

packages/@react-spectrum/tabs/docs/Tabs.mdx

@@ -469,6 +469,8 @@ function Example() {
 ### Orientation
 [View guidelines](https://spectrum.adobe.com/page/tabs/#Orientation)
 
+By default, tabs are horizontally oriented. The `orientation` prop can be set to `vertical` to change this. This does not affect keyboard navigation.
+
 ```tsx example
 <Tabs aria-label="Chat log orientation example" orientation="vertical">
   <TabList>

packages/@react-spectrum/tabs/test/Tabs.test.js

@@ -101,12 +101,11 @@ describe('Tabs', function () {
     expect(ref.current.UNSAFE_getDOMNode()).toBe(tablist.parentElement.parentElement);
   });
 
-  it('allows user to change tab item select via left/right arrow keys with horizontal tabs', function () {
+  it('allows user to change tab item select via arrow keys with horizontal tabs', function () {
     let container = renderComponent({orientation: 'horizontal'});
     let tablist = container.getByRole('tablist');
     let tabs = within(tablist).getAllByRole('tab');
     let selectedItem = tabs[0];
-
     expect(tablist).toHaveAttribute('aria-orientation', 'horizontal');
 
     expect(selectedItem).toHaveAttribute('aria-selected', 'true');
@@ -117,14 +116,15 @@ describe('Tabs', function () {
     fireEvent.keyDown(nextSelectedItem, {key: 'ArrowLeft', code: 37, charCode: 37});
     expect(selectedItem).toHaveAttribute('aria-selected', 'true');
 
-    /** Doesn't change selection because it's horizontal tabs. */
+    /** Changes selection regardless if it's horizontal tabs. */
     fireEvent.keyDown(selectedItem, {key: 'ArrowUp', code: 38, charCode: 38});
-    expect(selectedItem).toHaveAttribute('aria-selected', 'true');
+    nextSelectedItem = tabs[2];
+    expect(nextSelectedItem).toHaveAttribute('aria-selected', 'true');
     fireEvent.keyDown(selectedItem, {key: 'ArrowDown', code: 40, charCode: 40});
     expect(selectedItem).toHaveAttribute('aria-selected', 'true');
   });
 
-  it('allows user to change tab item select via up/down arrow keys with vertical tabs', function () {
+  it('allows user to change tab item select via arrow keys with vertical tabs', function () {
     let container = renderComponent({orientation: 'vertical'});
     let tablist = container.getByRole('tablist');
     let tabs = within(tablist).getAllByRole('tab');
@@ -133,18 +133,19 @@ describe('Tabs', function () {
 
     expect(tablist).toHaveAttribute('aria-orientation', 'vertical');
 
-    /** Doesn't change selection because it's vertical tabs. */
-    expect(selectedItem).toHaveAttribute('aria-selected', 'true');
-    fireEvent.keyDown(selectedItem, {key: 'ArrowRight', code: 39, charCode: 39});
-    expect(selectedItem).toHaveAttribute('aria-selected', 'true');
-    fireEvent.keyDown(selectedItem, {key: 'ArrowLeft', code: 37, charCode: 37});
-    expect(selectedItem).toHaveAttribute('aria-selected', 'true');
-
     let nextSelectedItem = tabs[1];
+    expect(selectedItem).toHaveAttribute('aria-selected', 'true');
     fireEvent.keyDown(selectedItem, {key: 'ArrowDown', code: 40, charCode: 40});
     expect(nextSelectedItem).toHaveAttribute('aria-selected', 'true');
     fireEvent.keyDown(nextSelectedItem, {key: 'ArrowUp', code: 38, charCode: 38});
     expect(selectedItem).toHaveAttribute('aria-selected', 'true');
+
+    /** Changes selection regardless if it's vertical tabs. */
+    fireEvent.keyDown(selectedItem, {key: 'ArrowLeft', code: 37, charCode: 37});
+    nextSelectedItem = tabs[2];
+    expect(nextSelectedItem).toHaveAttribute('aria-selected', 'true');
+    fireEvent.keyDown(selectedItem, {key: 'ArrowRight', code: 39, charCode: 39});
+    expect(selectedItem).toHaveAttribute('aria-selected', 'true');
   });
 
   it('wraps focus from first to last/last to first item', function () {

packages/react-aria-components/docs/Tabs.mdx

@@ -430,7 +430,7 @@ tab selection.
 
 ### Orientation
 
-By default, tabs are horizontally oriented. The `orientation` prop can be set to `vertical` to change this. This affects keyboard navigation. You are responsible for styling your tabs accordingly.
+By default, tabs are horizontally oriented. The `orientation` prop can be set to `vertical` to change this. This does not affect keyboard navigation. You are responsible for styling your tabs accordingly.
 
 ```tsx example
 <Tabs orientation="vertical">