From 3a40a3cdc64a847b548d7495f08c7692c54efe7d Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Thu, 15 Oct 2026 11:43:40 +0200
Subject: [PATCH 1/2] fix(Tabs): support custom link components

Assisted-by: OpenCode (GPT-6.1)
---
 .../react-core/src/components/Tabs/Tab.tsx    |  15 ++-
 .../src/components/Tabs/TabButton.tsx         |   9 +-
 .../react-core/src/components/Tabs/Tabs.tsx   |  11 +-
 .../src/components/Tabs/TabsContext.ts        |   3 +-
 .../Tabs/__tests__/TabButton.test.tsx         |  27 ++++-
 .../__tests__/TabsCustomComponent.test.tsx    | 113 ++++++++++++++++++
 .../src/components/Tabs/examples/Tabs.md      |  39 +++++-
 .../Tabs/examples/TabsCustomComponent.tsx     |  57 +++++++++
 .../cypress/integration/tabsrouter.spec.ts    |  93 ++++++++++++++
 .../demo-app-ts/src/Demos.ts                  |   5 +
 .../demos/TabsDemo/TabsRouterDemo.tsx         |  55 +++++++++
 .../demo-app-ts/src/components/demos/index.ts |   1 +
 12 files changed, 412 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx
 create mode 100644 packages/react-core/src/components/Tabs/examples/TabsCustomComponent.tsx
 create mode 100644 packages/react-integration/cypress/integration/tabsrouter.spec.ts
 create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx

diff --git a/packages/react-core/src/components/Tabs/Tab.tsx b/packages/react-core/src/components/Tabs/Tab.tsx
index a24b405ed29..f278171b276 100644
--- a/packages/react-core/src/components/Tabs/Tab.tsx
+++ b/packages/react-core/src/components/Tabs/Tab.tsx
@@ -14,8 +14,10 @@ export interface TabProps
   children?: React.ReactNode;
   /** additional classes added to the Tab */
   className?: string;
-  /** URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs component="nav"> should have an href. */
+  /** URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button> unless component is supplied. */
   href?: string;
+  /** Sets the element or custom component used for this Tab's button or link. Defaults to an anchor when href is supplied, otherwise a button. Does not change the Tabs container's outer wrapper. Custom components must forward the ref and supplied props to the underlying element. */
+  component?: React.ElementType<any> | React.ComponentType<any>;
   /** Content rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling. */
   title: React.ReactNode;
   /** uniquely identifies the tab */
@@ -58,6 +60,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   isAriaDisabled,
   inoperableEvents = ['onClick', 'onKeyPress'],
   href,
+  component = href ? 'a' : 'button',
   innerRef,
   tooltip,
   closeButtonAriaLabel,
@@ -80,7 +83,8 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
     ariaControls = undefined;
   }
-  const isButtonElement = Boolean(!href);
+  const isButtonElement = component === 'button';
+  const isCustomComponent = component !== 'a' && !isButtonElement;
   const getDefaultTabIdx = () => {
     if (isDisabled) {
       return isButtonElement ? null : -1;
@@ -94,19 +98,20 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       parentInnerRef={innerRef}
       className={css(
         styles.tabsLink,
-        isDisabled && href && styles.modifiers.disabled,
+        isDisabled && !isButtonElement && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled
       )}
       disabled={isButtonElement ? isDisabled : null}
       aria-disabled={isDisabled || isAriaDisabled}
       tabIndex={getDefaultTabIdx()}
-      onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef)}
-      {...(isAriaDisabled ? preventedEvents : null)}
+      onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef, isCustomComponent)}
+      {...(isAriaDisabled || (isDisabled && !isButtonElement) ? preventedEvents : null)}
       id={`pf-tab-${eventKey}-${childId || uniqueId}`}
       aria-controls={ariaControls}
       tabContentRef={tabContentRef}
       ouiaId={childOuiaId}
       href={href}
+      component={component}
       role="tab"
       aria-selected={eventKey === localActiveKey}
       {...props}
diff --git a/packages/react-core/src/components/Tabs/TabButton.tsx b/packages/react-core/src/components/Tabs/TabButton.tsx
index 48d62163c48..b1ffb158e86 100644
--- a/packages/react-core/src/components/Tabs/TabButton.tsx
+++ b/packages/react-core/src/components/Tabs/TabButton.tsx
@@ -5,8 +5,10 @@ export interface TabButtonProps extends Omit<React.HTMLProps<HTMLAnchorElement |
   children?: React.ReactNode;
   /** additional classes added to the Tab */
   className?: string;
-  /** URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs component="nav"> should have an href. */
+  /** URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button> unless component is supplied. */
   href?: string;
+  /** Sets the element or custom component used for the tab's button or link. Defaults to an anchor when href is supplied, otherwise a button. */
+  component?: React.ElementType<any> | React.ComponentType<any>;
   /** child reference for case in which a TabContent section is defined outside of a Tabs component */
   tabContentRef?: React.Ref<any>;
   /** Parents' innerRef passed down for properly displaying Tooltips */
@@ -20,13 +22,14 @@ export const TabButton: React.FunctionComponent<TabButtonProps> = ({
   ouiaId,
   parentInnerRef,
   ouiaSafe,
+  component,
   ...props
 }: TabButtonProps) => {
-  const Component = (props.href ? 'a' : 'button') as any;
+  const Component = (component || (props.href ? 'a' : 'button')) as any;
 
   return (
     <Component
-      {...(!props.href && { type: 'button' })}
+      {...(Component === 'button' && { type: 'button' })}
       ref={parentInnerRef}
       {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)}
       {...props}
diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
index 677ee8fac92..cd34bd7228a 100644
--- a/packages/react-core/src/components/Tabs/Tabs.tsx
+++ b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -89,7 +89,7 @@ export interface TabsProps
   backScrollAriaLabel?: string;
   /** Aria-label for the forward scroll button */
   forwardScrollAriaLabel?: string;
-  /** Determines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region */
+  /** Determines the outer wrapper element for the Tabs container. Use "nav" to define a navigation region. To customize an individual tab's button or link, use the component property of Tab instead. */
   component?: 'div' | 'nav';
   /** Provides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page. */
   'aria-label'?: string;
@@ -242,12 +242,17 @@ class Tabs extends Component<TabsProps, TabsState> {
   handleTabClick(
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,
-    tabContentRef: React.RefObject<any>
+    tabContentRef: React.RefObject<any>,
+    isCustomComponent = false
   ) {
     const { shownKeys, initialActiveKey } = this.state;
     const { onSelect, defaultActiveKey, component, isNav } = this.props;
 
-    if (event.currentTarget instanceof HTMLAnchorElement && event.currentTarget.hasAttribute('href')) {
+    if (
+      !isCustomComponent &&
+      event.currentTarget instanceof HTMLAnchorElement &&
+      event.currentTarget.hasAttribute('href')
+    ) {
       event.preventDefault();
 
       if (canUseDOM && (component === TabsComponent.nav || isNav)) {
diff --git a/packages/react-core/src/components/Tabs/TabsContext.ts b/packages/react-core/src/components/Tabs/TabsContext.ts
index 682a16df2a6..f35da5b24bd 100644
--- a/packages/react-core/src/components/Tabs/TabsContext.ts
+++ b/packages/react-core/src/components/Tabs/TabsContext.ts
@@ -10,7 +10,8 @@ export interface TabsContextProps {
   handleTabClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,
-    tabContentRef: React.RefObject<any>
+    tabContentRef: React.RefObject<any>,
+    isCustomComponent?: boolean
   ) => void;
   handleTabClose?: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
diff --git a/packages/react-core/src/components/Tabs/__tests__/TabButton.test.tsx b/packages/react-core/src/components/Tabs/__tests__/TabButton.test.tsx
index 020dbc31c34..5938f364b15 100644
--- a/packages/react-core/src/components/Tabs/__tests__/TabButton.test.tsx
+++ b/packages/react-core/src/components/Tabs/__tests__/TabButton.test.tsx
@@ -1,7 +1,32 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { TabButton } from '../TabButton';
 
 test('should render tab button', () => {
   const { asFragment } = render(<TabButton>Tab button</TabButton>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('renders an anchor by default when href is supplied', () => {
+  render(<TabButton href="#tab">Tab link</TabButton>);
+  expect(screen.getByRole('link')).toHaveAttribute('href', '#tab');
+  expect(screen.getByRole('link')).not.toHaveAttribute('type');
+});
+
+test('uses the explicit component instead of the href-based default', () => {
+  render(
+    <TabButton component="button" href="#tab">
+      Tab button
+    </TabButton>
+  );
+  expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+});
+
+test('renders an explicit anchor without button-specific attributes', () => {
+  render(
+    <TabButton component="a" role="tab">
+      Tab link
+    </TabButton>
+  );
+  expect(screen.getByRole('tab').tagName).toBe('A');
+  expect(screen.getByRole('tab')).not.toHaveAttribute('type');
+});
diff --git a/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx b/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx
new file mode 100644
index 00000000000..8fc1055376d
--- /dev/null
+++ b/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx
@@ -0,0 +1,113 @@
+// Generated with OpenCode (GPT-6.1).
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, forwardRef } from 'react';
+import { Tabs } from '../Tabs';
+import { Tab } from '../Tab';
+
+const onNavigate = jest.fn();
+// Router links invoke the supplied handler before navigating, and honor preventDefault.
+const CustomLink = forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>(
+  ({ onClick, href = '#custom-link', ...props }, ref) => (
+    <a
+      {...props}
+      href={href}
+      ref={ref}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          onNavigate();
+        }
+        event.preventDefault();
+      }}
+    />
+  )
+);
+CustomLink.displayName = 'CustomLink';
+
+describe('custom tab components', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it.each([
+    { description: 'default tabs without href', tabsProps: {}, href: undefined },
+    { description: 'default tabs with href', tabsProps: {}, href: '#custom-link' },
+    { description: 'nav wrapper without href', tabsProps: { component: 'nav' as const }, href: undefined },
+    { description: 'nav wrapper with href', tabsProps: { component: 'nav' as const }, href: '#custom-link' },
+    { description: 'nav styling without href', tabsProps: { isNav: true }, href: undefined },
+    { description: 'nav styling with href', tabsProps: { isNav: true }, href: '#custom-link' }
+  ])('allows custom navigation and tab selection for $description', async ({ tabsProps, href }) => {
+    const user = userEvent.setup();
+    const pushState = jest.spyOn(window.history, 'pushState');
+    const ref = createRef<HTMLAnchorElement>();
+
+    render(
+      <Tabs defaultActiveKey={0} {...tabsProps}>
+        <Tab eventKey={0} title="First tab" />
+        <Tab eventKey={1} title="Custom tab" component={CustomLink} href={href} ref={ref}>
+          Custom content
+        </Tab>
+      </Tabs>
+    );
+
+    const tab = screen.getByRole('tab', { name: 'Custom tab' });
+    expect(ref.current).toBe(tab);
+    expect(tab).toHaveAttribute('href', '#custom-link');
+    expect(tab).not.toHaveAttribute('type');
+    expect(tab).not.toHaveAttribute('disabled');
+
+    await user.click(tab);
+
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+    expect(pushState).not.toHaveBeenCalled();
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Custom content');
+  });
+
+  it('calls onSelect when clicking a controlled custom tab', async () => {
+    const user = userEvent.setup();
+    const onSelect = jest.fn();
+    render(
+      <Tabs activeKey={0} onSelect={onSelect}>
+        <Tab eventKey={0} title="First tab" />
+        <Tab eventKey={1} title="Custom tab" component={CustomLink} />
+      </Tabs>
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Custom tab' }));
+
+    expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 1);
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    { description: 'disabled', disabledProps: { isDisabled: true }, tabIndex: '-1' },
+    { description: 'aria-disabled', disabledProps: { isAriaDisabled: true }, tabIndex: null }
+  ])('prevents mouse and keyboard navigation for a $description custom link', async ({ disabledProps, tabIndex }) => {
+    const user = userEvent.setup();
+    const onSelect = jest.fn();
+    render(
+      <Tabs onSelect={onSelect}>
+        <Tab eventKey={0} title="Custom tab" component={CustomLink} {...disabledProps} />
+      </Tabs>
+    );
+
+    const tab = screen.getByRole('tab', { name: 'Custom tab' });
+    expect(tab).toHaveAttribute('aria-disabled', 'true');
+    expect(tab).not.toHaveAttribute('disabled');
+    if (tabIndex) {
+      expect(tab).toHaveAttribute('tabindex', tabIndex);
+    } else {
+      await user.tab();
+      expect(tab).toHaveFocus();
+    }
+
+    await user.click(tab);
+    tab.focus();
+    await user.keyboard('{Enter}');
+
+    expect(onNavigate).not.toHaveBeenCalled();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md
index 9605b51e055..c54196f93cb 100644
--- a/packages/react-core/src/components/Tabs/examples/Tabs.md
+++ b/packages/react-core/src/components/Tabs/examples/Tabs.md
@@ -17,7 +17,7 @@ propComponents:
 ouia: true
 ---
 
-import { createRef, Fragment, useEffect, useRef, useState } from 'react';
+import { createRef, forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
 import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
@@ -175,9 +175,9 @@ To allow tabs to fill the available width of the page section, use the `isFilled
 
 ### Tabs linked to nav elements
 
-To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property.
+To render the `<Tabs>` container inside a navigation region, pass `{TabsComponent.nav}` into the `component` property of `<Tabs>`. This property controls the outer wrapper, not the individual tab links.
 
-Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`.
+In this example, each `<Tab>` uses `href` to render its clickable element as an `<a>` instead of a `<button>`. To use a router link instead, see the [custom component example](#custom-component).
 
 ```ts file="./TabsNav.tsx"
 
@@ -199,6 +199,18 @@ Site navigation tabs
 
 ```
 
+### Custom component
+
+Pass `component={CustomLink}` to an individual `<Tab>` to replace its button or anchor with a custom component. This is separate from `<Tabs component={TabsComponent.nav}>`, which controls the outer wrapper.
+
+The custom component must forward the supplied props and ref to its underlying element. `<Tabs>` continues handling selection, while the custom component handles navigation.
+
+The following example uses a custom anchor and prevents default browser navigation so you can try tab selection without leaving the example. For integration with a router, see [using router links](#using-router-links).
+
+```ts file="./TabsCustomComponent.tsx"
+
+```
+
 ### With separate content
 
 If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.
@@ -270,3 +282,24 @@ The following example passes in both help popover and close actions.
 ```ts file="./TabsHelpAndClose.tsx"
 
 ```
+
+## Using router links
+
+Router links can be used for in-app navigation without reloading the page. Following the [custom component example](#custom-component), pass a component that wraps your router's `Link` to the `component` property of `<Tab>`. This wrapper maps the tab's `href` to the router's `to` property and forwards the supplied props and ref.
+
+```nolive
+const RouterTabLink = forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>(
+  ({ href = '/', ...props }, ref) => <Link {...props} to={href} ref={ref} />
+);
+
+<Tab
+  eventKey="users"
+  title={<TabTitleText>Users</TabTitleText>}
+  component={RouterTabLink}
+  href="/users"
+/>
+```
+
+Define the wrapper outside the parent component so re-renders preserve the link element and keyboard focus.
+
+When the current route determines which tab is selected, use it to set the `activeKey` property of `<Tabs>`.
diff --git a/packages/react-core/src/components/Tabs/examples/TabsCustomComponent.tsx b/packages/react-core/src/components/Tabs/examples/TabsCustomComponent.tsx
new file mode 100644
index 00000000000..a309f772643
--- /dev/null
+++ b/packages/react-core/src/components/Tabs/examples/TabsCustomComponent.tsx
@@ -0,0 +1,57 @@
+// Generated with OpenCode (GPT-6.1).
+import { forwardRef, useState } from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+// This custom link stands in for a router link without requiring a router in the example.
+const CustomTabLink = forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>(
+  ({ onClick, ...props }, ref) => (
+    <a
+      {...props}
+      ref={ref}
+      onClick={(event) => {
+        onClick?.(event);
+        event.preventDefault();
+      }}
+    />
+  )
+);
+CustomTabLink.displayName = 'CustomTabLink';
+
+export const TabsCustomComponent: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+      isNav
+      aria-label="Tabs with custom links example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} component={CustomTabLink} href="#custom-users">
+        Users
+      </Tab>
+      <Tab
+        eventKey={1}
+        title={<TabTitleText>Containers</TabTitleText>}
+        component={CustomTabLink}
+        href="#custom-containers"
+      >
+        Containers
+      </Tab>
+      <Tab
+        eventKey={2}
+        title={<TabTitleText>Disabled</TabTitleText>}
+        component={CustomTabLink}
+        href="#custom-disabled"
+        isDisabled
+      />
+      <Tab
+        eventKey={3}
+        title={<TabTitleText>ARIA disabled</TabTitleText>}
+        component={CustomTabLink}
+        href="#custom-aria-disabled"
+        isAriaDisabled
+      />
+    </Tabs>
+  );
+};
diff --git a/packages/react-integration/cypress/integration/tabsrouter.spec.ts b/packages/react-integration/cypress/integration/tabsrouter.spec.ts
new file mode 100644
index 00000000000..054ca542d60
--- /dev/null
+++ b/packages/react-integration/cypress/integration/tabsrouter.spec.ts
@@ -0,0 +1,93 @@
+// Generated with OpenCode (GPT-6.1).
+describe('Tabs React Router navigation', () => {
+  const usersTab = '#pf-tab-users-router-tabs';
+  const containersTab = '#pf-tab-containers-router-tabs';
+  const disabledTab = '#pf-tab-disabled-router-tabs';
+  const ariaDisabledTab = '#pf-tab-aria-disabled-router-tabs';
+
+  // Cypress 14 supports native Tab presses, but not Enter. Use Chromium's native key events for anchor activation.
+  const pressEnter = () =>
+    cy
+      .then(() =>
+        Cypress.automation('remote:debugger:protocol', {
+          command: 'Input.dispatchKeyEvent',
+          params: { type: 'keyDown', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13, text: '\r' }
+        })
+      )
+      .then(() =>
+        Cypress.automation('remote:debugger:protocol', {
+          command: 'Input.dispatchKeyEvent',
+          params: { type: 'keyUp', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13 }
+        })
+      );
+
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/tabs-router-demo-nav-link?tab=users');
+    cy.get(usersTab).should('have.attr', 'aria-selected', 'true');
+  });
+
+  it('navigates through React Router without reloading or replacing the focused link', () => {
+    cy.document().then((originalDocument) => {
+      cy.get(containersTab).then(($link) => {
+        const originalLink = $link[0];
+        cy.wrap($link).click();
+
+        cy.location('search').should('equal', '?tab=containers');
+        cy.get(containersTab).should('have.attr', 'aria-selected', 'true').and('have.focus');
+        cy.get(containersTab).should(($currentLink) => {
+          expect($currentLink[0]).to.equal(originalLink);
+        });
+        cy.get('#pf-tab-section-containers-router-tabs')
+          .should('be.visible')
+          .and('contain.text', 'Containers route content');
+        cy.get('#router-selection-count').should('have.text', 'Selections: 1');
+        cy.document().should('equal', originalDocument);
+      });
+    });
+  });
+
+  it('supports keyboard navigation and keeps focus after activation', () => {
+    cy.get(usersTab).focus();
+    cy.press(Cypress.Keyboard.Keys.TAB);
+    cy.get(containersTab).should('have.focus');
+    pressEnter();
+
+    cy.location('search').should('equal', '?tab=containers');
+    cy.get(containersTab).should('have.attr', 'aria-selected', 'true').and('have.focus');
+    cy.get('#pf-tab-section-containers-router-tabs').should('be.visible');
+    cy.get('#router-selection-count').should('have.text', 'Selections: 1');
+  });
+
+  it('blocks mouse and keyboard navigation for disabled links', () => {
+    [disabledTab, ariaDisabledTab].forEach((selector) => {
+      cy.get(selector).should('have.attr', 'aria-disabled', 'true').click({ force: true });
+      cy.location('search').should('equal', '?tab=users');
+      cy.get(selector).focus();
+      pressEnter();
+      cy.location('search').should('equal', '?tab=users');
+    });
+
+    cy.get(usersTab).should('have.attr', 'aria-selected', 'true');
+    cy.get('#router-selection-count').should('have.text', 'Selections: 0');
+  });
+
+  it('skips disabled links but allows focusing an aria-disabled link and its tooltip', () => {
+    cy.get(disabledTab).should('have.attr', 'tabindex', '-1');
+    cy.get(containersTab).focus();
+    cy.press(Cypress.Keyboard.Keys.TAB);
+    cy.get(ariaDisabledTab).should('have.focus');
+    cy.get('.pf-v6-c-tooltip').should('be.visible').and('contain.text', 'This route is unavailable.');
+  });
+
+  it('restores route-based selection with browser Back', () => {
+    cy.get(containersTab).click();
+    cy.location('search').should('equal', '?tab=containers');
+
+    cy.go('back');
+
+    cy.location('search').should('equal', '?tab=users');
+    cy.get(usersTab).should('have.attr', 'aria-selected', 'true');
+    cy.get('#pf-tab-section-users-router-tabs').should('be.visible').and('contain.text', 'Users route content');
+    cy.get('#router-selection-count').should('have.text', 'Selections: 1');
+  });
+});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index 61a7c733ac4..fa66a655f6f 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -362,6 +362,11 @@ export const Demos: DemoInterface[] = [
     name: 'Tabs Horizontal Overflow Demo',
     componentType: Examples.TabsHorizontalOverflowDemo
   },
+  {
+    id: 'tabs-router-demo',
+    name: 'Tabs Router Demo',
+    componentType: Examples.TabsRouterDemo
+  },
   {
     id: 'table-collapsible-demo',
     name: 'Table Collapsible Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx
new file mode 100644
index 00000000000..daff5d0cc79
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx
@@ -0,0 +1,55 @@
+// Generated with OpenCode (GPT-6.1).
+import { forwardRef, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Tabs, Tab, TabTitleText, Tooltip } from '@patternfly/react-core';
+
+const RouterTabLink = forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>(
+  ({ href = '?tab=users', ...props }, ref) => <Link {...props} to={href} ref={ref} />
+);
+RouterTabLink.displayName = 'RouterTabLink';
+
+export const TabsRouterDemo: React.FunctionComponent = () => {
+  const [searchParams] = useSearchParams();
+  const activeTabKey = searchParams.get('tab') || 'users';
+  const [selectionCount, setSelectionCount] = useState(0);
+
+  return (
+    <>
+      <p id="router-selection-count">Selections: {selectionCount}</p>
+      <Tabs
+        id="router-tabs"
+        component="nav"
+        aria-label="Router navigation tabs"
+        activeKey={activeTabKey}
+        onSelect={() => setSelectionCount((count) => count + 1)}
+      >
+        <Tab eventKey="users" title={<TabTitleText>Users</TabTitleText>} component={RouterTabLink} href="?tab=users">
+          Users route content
+        </Tab>
+        <Tab
+          eventKey="containers"
+          title={<TabTitleText>Containers</TabTitleText>}
+          component={RouterTabLink}
+          href="?tab=containers"
+        >
+          Containers route content
+        </Tab>
+        <Tab
+          eventKey="disabled"
+          title={<TabTitleText>Disabled</TabTitleText>}
+          component={RouterTabLink}
+          href="?tab=disabled"
+          isDisabled
+        />
+        <Tab
+          eventKey="aria-disabled"
+          title={<TabTitleText>ARIA disabled</TabTitleText>}
+          component={RouterTabLink}
+          href="?tab=aria-disabled"
+          isAriaDisabled
+          tooltip={<Tooltip content="This route is unavailable." />}
+        />
+      </Tabs>
+    </>
+  );
+};
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 669875480ef..08b14e67eed 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -81,6 +81,7 @@ export * from './TabsDemo/TabsExpandableDemo';
 export * from './TabsDemo/TabsStringEventKeyDemo';
 export * from './TabsDemo/TabsUncontrolledDemo';
 export * from './TabsDemo/TabsHorizontalOverflowDemo';
+export * from './TabsDemo/TabsRouterDemo';
 export * from './TextAreaDemo/TextAreaDemo';
 export * from './TextInputDemo/TextInputDemo';
 export * from './ToggleGroupDemo/ToggleGroupDemo';

From 4aeae8e588d43ec784499e130158caee61082d68 Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Thu, 15 Oct 2026 13:08:36 +0200
Subject: [PATCH 2/2] fix(Tabs): address custom component review feedback

Assisted-by: OpenCode (GPT-6.1)
---
 .../react-core/src/components/Tabs/Tab.tsx    | 14 +++-
 .../src/components/Tabs/TabButton.tsx         |  2 +-
 .../__tests__/TabsCustomComponent.test.tsx    | 67 ++++++++++++++++++-
 .../src/components/Tabs/examples/Tabs.md      |  2 +
 .../cypress/integration/tabsrouter.spec.ts    | 19 +++++-
 .../demos/TabsDemo/TabsRouterDemo.tsx         | 14 +++-
 6 files changed, 108 insertions(+), 10 deletions(-)

diff --git a/packages/react-core/src/components/Tabs/Tab.tsx b/packages/react-core/src/components/Tabs/Tab.tsx
index f278171b276..a626b1e4a77 100644
--- a/packages/react-core/src/components/Tabs/Tab.tsx
+++ b/packages/react-core/src/components/Tabs/Tab.tsx
@@ -16,7 +16,7 @@ export interface TabProps
   className?: string;
   /** URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button> unless component is supplied. */
   href?: string;
-  /** Sets the element or custom component used for this Tab's button or link. Defaults to an anchor when href is supplied, otherwise a button. Does not change the Tabs container's outer wrapper. Custom components must forward the ref and supplied props to the underlying element. */
+  /** Sets the element or custom component used for this Tab's button or link. Defaults to an anchor when href is supplied, otherwise a button. Does not change the Tabs container's outer wrapper. Custom components must forward the ref and supplied props to the underlying element. For custom components that render a button, pass type="button" or set it inside the component to prevent form submission. */
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** Content rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling. */
   title: React.ReactNode;
@@ -66,6 +66,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   closeButtonAriaLabel,
   isCloseDisabled = false,
   actions,
+  onClick,
   ...props
 }: TabProps) => {
   const preventedEvents = inoperableEvents.reduce(
@@ -104,8 +105,6 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       disabled={isButtonElement ? isDisabled : null}
       aria-disabled={isDisabled || isAriaDisabled}
       tabIndex={getDefaultTabIdx()}
-      onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef, isCustomComponent)}
-      {...(isAriaDisabled || (isDisabled && !isButtonElement) ? preventedEvents : null)}
       id={`pf-tab-${eventKey}-${childId || uniqueId}`}
       aria-controls={ariaControls}
       tabContentRef={tabContentRef}
@@ -115,6 +114,15 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       role="tab"
       aria-selected={eventKey === localActiveKey}
       {...props}
+      onClick={(event: any) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        handleTabClick(event, eventKey, tabContentRef, isCustomComponent);
+        onClick?.(event);
+      }}
+      {...(isAriaDisabled || (isDisabled && !isButtonElement) ? preventedEvents : null)}
     >
       {title}
     </TabButton>
diff --git a/packages/react-core/src/components/Tabs/TabButton.tsx b/packages/react-core/src/components/Tabs/TabButton.tsx
index b1ffb158e86..75c35fb7ea1 100644
--- a/packages/react-core/src/components/Tabs/TabButton.tsx
+++ b/packages/react-core/src/components/Tabs/TabButton.tsx
@@ -7,7 +7,7 @@ export interface TabButtonProps extends Omit<React.HTMLProps<HTMLAnchorElement |
   className?: string;
   /** URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button> unless component is supplied. */
   href?: string;
-  /** Sets the element or custom component used for the tab's button or link. Defaults to an anchor when href is supplied, otherwise a button. */
+  /** Sets the element or custom component used for the tab's button or link. Defaults to an anchor when href is supplied, otherwise a button. For custom components that render a button, pass type="button" or set it inside the component to prevent form submission. */
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** child reference for case in which a TabContent section is defined outside of a Tabs component */
   tabContentRef?: React.Ref<any>;
diff --git a/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx b/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx
index 8fc1055376d..7ec1c07d267 100644
--- a/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx
+++ b/packages/react-core/src/components/Tabs/__tests__/TabsCustomComponent.test.tsx
@@ -25,6 +25,11 @@ const CustomLink = forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<
 );
 CustomLink.displayName = 'CustomLink';
 
+const CustomButton = forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>((props, ref) => (
+  <button {...props} ref={ref} />
+));
+CustomButton.displayName = 'CustomButton';
+
 describe('custom tab components', () => {
   afterEach(() => {
     jest.restoreAllMocks();
@@ -68,28 +73,84 @@ describe('custom tab components', () => {
   it('calls onSelect when clicking a controlled custom tab', async () => {
     const user = userEvent.setup();
     const onSelect = jest.fn();
+    const onClick = jest.fn();
     render(
       <Tabs activeKey={0} onSelect={onSelect}>
         <Tab eventKey={0} title="First tab" />
-        <Tab eventKey={1} title="Custom tab" component={CustomLink} />
+        <Tab eventKey={1} title="Custom tab" component={CustomLink} onClick={onClick} />
       </Tabs>
     );
 
     await user.click(screen.getByRole('tab', { name: 'Custom tab' }));
 
     expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 1);
+    expect(onClick).toHaveBeenCalledTimes(1);
     expect(onNavigate).toHaveBeenCalledTimes(1);
   });
 
+  it('allows a caller to prevent custom navigation without replacing tab selection', async () => {
+    const user = userEvent.setup();
+    const onSelect = jest.fn();
+    render(
+      <Tabs onSelect={onSelect}>
+        <Tab eventKey={1} title="Custom tab" component={CustomLink} onClick={(event) => event.preventDefault()} />
+      </Tabs>
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Custom tab' }));
+
+    expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 1);
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it('selects a custom button tab without submitting its form when type="button" is supplied', async () => {
+    const user = userEvent.setup();
+    const onSubmit = jest.fn();
+    render(
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          onSubmit();
+        }}
+      >
+        <Tabs defaultActiveKey={0}>
+          <Tab eventKey={0} title="First tab" />
+          <Tab eventKey={1} title="Custom button tab" component={CustomButton} type="button">
+            Custom button content
+          </Tab>
+        </Tabs>
+      </form>
+    );
+
+    const tab = screen.getByRole('tab', { name: 'Custom button tab' });
+    expect(tab).toHaveAttribute('type', 'button');
+
+    await user.click(tab);
+    await user.keyboard('{Enter}');
+
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Custom button content');
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
   it.each([
     { description: 'disabled', disabledProps: { isDisabled: true }, tabIndex: '-1' },
     { description: 'aria-disabled', disabledProps: { isAriaDisabled: true }, tabIndex: null }
   ])('prevents mouse and keyboard navigation for a $description custom link', async ({ disabledProps, tabIndex }) => {
     const user = userEvent.setup();
     const onSelect = jest.fn();
+    const onClick = jest.fn();
+    const onKeyPress = jest.fn();
     render(
       <Tabs onSelect={onSelect}>
-        <Tab eventKey={0} title="Custom tab" component={CustomLink} {...disabledProps} />
+        <Tab
+          eventKey={0}
+          title="Custom tab"
+          component={CustomLink}
+          onClick={onClick}
+          onKeyPress={onKeyPress}
+          {...disabledProps}
+        />
       </Tabs>
     );
 
@@ -109,5 +170,7 @@ describe('custom tab components', () => {
 
     expect(onNavigate).not.toHaveBeenCalled();
     expect(onSelect).not.toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onKeyPress).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md
index c54196f93cb..1dd7aaf52db 100644
--- a/packages/react-core/src/components/Tabs/examples/Tabs.md
+++ b/packages/react-core/src/components/Tabs/examples/Tabs.md
@@ -205,6 +205,8 @@ Pass `component={CustomLink}` to an individual `<Tab>` to replace its button or
 
 The custom component must forward the supplied props and ref to its underlying element. `<Tabs>` continues handling selection, while the custom component handles navigation.
 
+For a custom component that renders a `<button>`, pass `type="button"` to `<Tab>` or set it inside the custom component to prevent form submission. Tabs cannot determine which element a custom component renders, so it only supplies a default button type for `component="button"`.
+
 The following example uses a custom anchor and prevents default browser navigation so you can try tab selection without leaving the example. For integration with a router, see [using router links](#using-router-links).
 
 ```ts file="./TabsCustomComponent.tsx"
diff --git a/packages/react-integration/cypress/integration/tabsrouter.spec.ts b/packages/react-integration/cypress/integration/tabsrouter.spec.ts
index 054ca542d60..b7c4cc51b8a 100644
--- a/packages/react-integration/cypress/integration/tabsrouter.spec.ts
+++ b/packages/react-integration/cypress/integration/tabsrouter.spec.ts
@@ -5,7 +5,8 @@ describe('Tabs React Router navigation', () => {
   const disabledTab = '#pf-tab-disabled-router-tabs';
   const ariaDisabledTab = '#pf-tab-aria-disabled-router-tabs';
 
-  // Cypress 14 supports native Tab presses, but not Enter. Use Chromium's native key events for anchor activation.
+  // Cypress 14 supports cross-browser native Tab presses, but not Enter.
+  // Tests using this Chromium-only helper explicitly exclude Firefox; the other router tests run in both browsers.
   const pressEnter = () =>
     cy
       .then(() =>
@@ -41,12 +42,13 @@ describe('Tabs React Router navigation', () => {
           .should('be.visible')
           .and('contain.text', 'Containers route content');
         cy.get('#router-selection-count').should('have.text', 'Selections: 1');
+        cy.get('#router-click-count').should('have.text', 'Clicks: 1');
         cy.document().should('equal', originalDocument);
       });
     });
   });
 
-  it('supports keyboard navigation and keeps focus after activation', () => {
+  it('supports keyboard navigation and keeps focus after activation', { browser: '!firefox' }, () => {
     cy.get(usersTab).focus();
     cy.press(Cypress.Keyboard.Keys.TAB);
     cy.get(containersTab).should('have.focus');
@@ -56,12 +58,22 @@ describe('Tabs React Router navigation', () => {
     cy.get(containersTab).should('have.attr', 'aria-selected', 'true').and('have.focus');
     cy.get('#pf-tab-section-containers-router-tabs').should('be.visible');
     cy.get('#router-selection-count').should('have.text', 'Selections: 1');
+    cy.get('#router-click-count').should('have.text', 'Clicks: 1');
   });
 
-  it('blocks mouse and keyboard navigation for disabled links', () => {
+  it('blocks mouse navigation and caller handlers for disabled links', () => {
     [disabledTab, ariaDisabledTab].forEach((selector) => {
       cy.get(selector).should('have.attr', 'aria-disabled', 'true').click({ force: true });
       cy.location('search').should('equal', '?tab=users');
+    });
+
+    cy.get(usersTab).should('have.attr', 'aria-selected', 'true');
+    cy.get('#router-selection-count').should('have.text', 'Selections: 0');
+    cy.get('#router-click-count').should('have.text', 'Clicks: 0');
+  });
+
+  it('blocks keyboard navigation and caller handlers for disabled links', { browser: '!firefox' }, () => {
+    [disabledTab, ariaDisabledTab].forEach((selector) => {
       cy.get(selector).focus();
       pressEnter();
       cy.location('search').should('equal', '?tab=users');
@@ -69,6 +81,7 @@ describe('Tabs React Router navigation', () => {
 
     cy.get(usersTab).should('have.attr', 'aria-selected', 'true');
     cy.get('#router-selection-count').should('have.text', 'Selections: 0');
+    cy.get('#router-click-count').should('have.text', 'Clicks: 0');
   });
 
   it('skips disabled links but allows focusing an aria-disabled link and its tooltip', () => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx
index daff5d0cc79..9b3beb22751 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsRouterDemo.tsx
@@ -12,10 +12,13 @@ export const TabsRouterDemo: React.FunctionComponent = () => {
   const [searchParams] = useSearchParams();
   const activeTabKey = searchParams.get('tab') || 'users';
   const [selectionCount, setSelectionCount] = useState(0);
+  const [clickCount, setClickCount] = useState(0);
+  const onTabClick = () => setClickCount((count) => count + 1);
 
   return (
     <>
       <p id="router-selection-count">Selections: {selectionCount}</p>
+      <p id="router-click-count">Clicks: {clickCount}</p>
       <Tabs
         id="router-tabs"
         component="nav"
@@ -23,7 +26,13 @@ export const TabsRouterDemo: React.FunctionComponent = () => {
         activeKey={activeTabKey}
         onSelect={() => setSelectionCount((count) => count + 1)}
       >
-        <Tab eventKey="users" title={<TabTitleText>Users</TabTitleText>} component={RouterTabLink} href="?tab=users">
+        <Tab
+          eventKey="users"
+          title={<TabTitleText>Users</TabTitleText>}
+          component={RouterTabLink}
+          href="?tab=users"
+          onClick={onTabClick}
+        >
           Users route content
         </Tab>
         <Tab
@@ -31,6 +40,7 @@ export const TabsRouterDemo: React.FunctionComponent = () => {
           title={<TabTitleText>Containers</TabTitleText>}
           component={RouterTabLink}
           href="?tab=containers"
+          onClick={onTabClick}
         >
           Containers route content
         </Tab>
@@ -39,6 +49,7 @@ export const TabsRouterDemo: React.FunctionComponent = () => {
           title={<TabTitleText>Disabled</TabTitleText>}
           component={RouterTabLink}
           href="?tab=disabled"
+          onClick={onTabClick}
           isDisabled
         />
         <Tab
@@ -46,6 +57,7 @@ export const TabsRouterDemo: React.FunctionComponent = () => {
           title={<TabTitleText>ARIA disabled</TabTitleText>}
           component={RouterTabLink}
           href="?tab=aria-disabled"
+          onClick={onTabClick}
           isAriaDisabled
           tooltip={<Tooltip content="This route is unavailable." />}
         />