Fix keyboardActivation propagation and remove disabledKeys from RAC TabList props

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

@@ -191,12 +191,15 @@ describe('Tabs', function () {
     act(() => {firstItem.focus();});
     expect(firstItem).toHaveAttribute('aria-selected', 'true');
     fireEvent.keyDown(firstItem, {key: 'ArrowRight', code: 39, charCode: 39});
+    fireEvent.keyUp(document.activeElement, {key: 'ArrowRight', code: 39, charCode: 39});
     expect(secondItem).toHaveAttribute('aria-selected', 'false');
     expect(document.activeElement).toBe(secondItem);
     fireEvent.keyDown(secondItem, {key: 'ArrowRight', code: 39, charCode: 39});
+    fireEvent.keyUp(document.activeElement, {key: 'ArrowRight', code: 39, charCode: 39});
     expect(thirdItem).toHaveAttribute('aria-selected', 'false');
     expect(document.activeElement).toBe(thirdItem);
     fireEvent.keyDown(thirdItem, {key: 'Enter', code: 13, charCode: 13});
+    fireEvent.keyUp(document.activeElement, {key: 'Enter', code: 13, charCode: 13});
     expect(firstItem).toHaveAttribute('aria-selected', 'false');
     expect(secondItem).toHaveAttribute('aria-selected', 'false');
     expect(thirdItem).toHaveAttribute('aria-selected', 'true');

packages/react-aria-components/src/Tabs.tsx

@@ -28,7 +28,7 @@ export interface TabsRenderProps {
   orientation: Orientation
 }
 
-export interface TabListProps<T> extends StyleRenderProps<TabListRenderProps>, AriaLabelingProps, CollectionProps<T> {}
+export interface TabListProps<T> extends StyleRenderProps<TabListRenderProps>, AriaLabelingProps, Omit<CollectionProps<T>, 'disabledKeys'> {}
 
 export interface TabListRenderProps {
   /**
@@ -106,15 +106,16 @@ export interface TabPanelRenderProps {
 interface InternalTabsContextValue {
   state: TabListState<object>,
   document: Document<any, BaseCollection<any>>,
-  orientation: Orientation
+  orientation: Orientation,
+  keyboardActivation: 'automatic' | 'manual'
 }
 
 export const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);
 const InternalTabsContext = createContext<InternalTabsContextValue | null>(null);
 
 function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TabsContext);
-  let {orientation = 'horizontal'} = props;
+  let {orientation = 'horizontal', keyboardActivation = 'automatic'} = props;
   let values = useMemo(() => ({orientation}), [orientation]);
   let {collection, document} = useCollectionDocument();
   let state = useTabListState({
@@ -136,7 +137,7 @@ function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
       ref={ref}
       slot={props.slot}
       data-orientation={orientation}>
-      <InternalTabsContext.Provider value={{state, document, orientation}}>
+      <InternalTabsContext.Provider value={{state, document, orientation, keyboardActivation}}>
         {renderProps.children}
       </InternalTabsContext.Provider>
     </div>
@@ -150,13 +151,14 @@ const _Tabs = forwardRef(Tabs);
 export {_Tabs as Tabs};
 
 function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
-  let {state, document, orientation} = useContext(InternalTabsContext)!;
+  let {state, document, orientation, keyboardActivation} = useContext(InternalTabsContext)!;
   let objectRef = useObjectRef(ref);
 
   let portal = useCollectionPortal(props, document);
   let {tabListProps} = useTabList({
     ...props,
-    orientation
+    orientation,
+    keyboardActivation
   }, state, objectRef);
 
   let renderProps = useRenderProps({

packages/react-aria-components/test/Tabs.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {fireEvent, render} from '@react-spectrum/test-utils';
+import {act, fireEvent, render, within} from '@react-spectrum/test-utils';
 import React from 'react';
 import {Tab, TabList, TabPanel, Tabs} from '../';
 import userEvent from '@testing-library/user-event';
@@ -232,4 +232,32 @@ describe('Tabs', () => {
     expect(tabpanels[1]).not.toHaveAttribute('inert');
     expect(tabpanels[2]).toHaveAttribute('inert');
   });
+
+  it('should support keyboardActivation=manual', () => {
+    let onSelectionChange = jest.fn();
+    let {getByRole} = renderTabs({keyboardActivation: 'manual', onSelectionChange, defaultSelectedKey: 'a'});
+
+    let tablist = getByRole('tablist');
+    let tabs = within(tablist).getAllByRole('tab');
+    let firstItem = tabs[0];
+    let secondItem = tabs[1];
+    let thirdItem = tabs[2];
+    act(() => {firstItem.focus();});
+    expect(firstItem).toHaveAttribute('aria-selected', 'true');
+    fireEvent.keyDown(firstItem, {key: 'ArrowRight', code: 39, charCode: 39});
+    fireEvent.keyUp(document.activeElement, {key: 'ArrowRight', code: 39, charCode: 39});
+    expect(secondItem).toHaveAttribute('aria-selected', 'false');
+    expect(document.activeElement).toBe(secondItem);
+    fireEvent.keyDown(secondItem, {key: 'ArrowRight', code: 39, charCode: 39});
+    fireEvent.keyUp(document.activeElement, {key: 'ArrowRight', code: 39, charCode: 39});
+    expect(thirdItem).toHaveAttribute('aria-selected', 'false');
+    expect(document.activeElement).toBe(thirdItem);
+    fireEvent.keyDown(thirdItem, {key: 'Enter', code: 13, charCode: 13});
+    fireEvent.keyUp(document.activeElement, {key: 'Enter', code: 13, charCode: 13});
+    expect(firstItem).toHaveAttribute('aria-selected', 'false');
+    expect(secondItem).toHaveAttribute('aria-selected', 'false');
+    expect(thirdItem).toHaveAttribute('aria-selected', 'true');
+
+    expect(onSelectionChange).toBeCalledTimes(1);
+  });
 });