@patternfly/react-core 6.4.1-prerelease.9 → 6.4.1

package/src/components/Progress/ProgressContainer.tsx

@@ -3,7 +3,7 @@ import progressStyle from '@patternfly/react-styles/css/components/Progress/prog
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
 import { ProgressHelperText } from './ProgressHelperText';
@@ -61,7 +61,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
 }
 
 const variantToIcon = {
-  danger: ExclamationCircleIcon,
+  danger: TimesCircleIcon,
   success: CheckCircleIcon,
   warning: ExclamationTriangleIcon
 };

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
         width="1em"
       >
         <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
         />
       </svg>
     </span>

package/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap

@@ -298,7 +298,7 @@ exports[`Progress variant danger 1`] = `
           width="1em"
         >
           <path
-            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
           />
         </svg>
       </span>

package/src/components/Radio/Radio.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/Radio/radio';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
 
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
@@ -40,8 +39,6 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
-  /** Custom aria-describedby value for the radio input. If not provided and description is set, a unique ID will be generated automatically. */
-  'aria-describedby'?: string;
   /** Sets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -50,7 +47,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId: string }> {
+class Radio extends Component<RadioProps, { ouiaStateId: string }> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -66,8 +63,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       console.error('Radio:', 'Radio requires an aria-label to be specified');
     }
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Radio.displayName),
-      descriptionId: getUniqueId('pf-radio-description')
+      ouiaStateId: getDefaultOUIAId(Radio.displayName)
     };
   }
 
@@ -78,7 +74,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
   render() {
     const {
       'aria-label': ariaLabel,
-      'aria-describedby': ariaDescribedBy,
       checked,
       className,
       inputClassName,
@@ -103,14 +98,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       console.error('Radio:', 'id is required to make input accessible');
     }
 
-    // Handle aria-describedby logic
-    let ariaDescribedByValue: string | undefined;
-    if (ariaDescribedBy !== undefined) {
-      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
-    } else if (description) {
-      ariaDescribedByValue = this.state.descriptionId;
-    }
-
     const inputRendered = (
       <input
         {...props}
@@ -118,7 +105,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}
-        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         checked={checked || isChecked}
         {...(checked === undefined && { defaultChecked })}
@@ -157,11 +143,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
             {labelRendered}
           </>
         )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.radioDescription)}>
-            {description}
-          </span>
-        )}
+        {description && <span className={css(styles.radioDescription)}>{description}</span>}
         {body && <span className={css(styles.radioBody)}>{body}</span>}
       </Component>
     );

package/src/components/Radio/__tests__/Radio.test.tsx

@@ -139,48 +139,4 @@ describe('Radio', () => {
     expect(wrapper.children[0].tagName).toBe('LABEL');
     expect(wrapper.children[1].tagName).toBe('INPUT');
   });
-
-  test('Sets aria-describedby when description is provided', () => {
-    render(<Radio id="test-id" name="check" aria-label="test radio" description="test description" />);
-
-    const radio = screen.getByRole('radio');
-    const descriptionElement = screen.getByText('test description');
-
-    expect(radio).toHaveAttribute('aria-describedby', descriptionElement.id);
-    expect(descriptionElement).toHaveAttribute('id');
-  });
-
-  test('Sets custom aria-describedby when provided', () => {
-    render(
-      <Radio
-        id="test-id"
-        name="check"
-        aria-label="test radio"
-        description="test description"
-        aria-describedby="custom-id"
-      />
-    );
-
-    const radio = screen.getByRole('radio');
-
-    expect(radio).toHaveAttribute('aria-describedby', 'custom-id');
-  });
-
-  test('Does not set aria-describedby when no description is provided', () => {
-    render(<Radio id="test-id" name="check" aria-label="test radio" />);
-
-    const radio = screen.getByRole('radio');
-
-    expect(radio).not.toHaveAttribute('aria-describedby');
-  });
-
-  test('Does not set aria-describedby when description is provided but aria-describedby is empty string', () => {
-    render(
-      <Radio id="test-id" name="check" aria-label="test radio" description="test description" aria-describedby="" />
-    );
-
-    const radio = screen.getByRole('radio');
-
-    expect(radio).not.toHaveAttribute('aria-describedby');
-  });
 });

package/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -1,83 +1,15 @@
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Tabs, TabsProps } from '../Tabs';
+import { Tabs } from '../Tabs';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 import { TabTitleIcon } from '../TabTitleIcon';
 import { TabContent } from '../TabContent';
 import { TabContentBody } from '../TabContentBody';
-import { createRef } from 'react';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
-const renderSeparateTabs = (props?: Pick<TabsProps, 'activeKey' | 'defaultActiveKey'>) => {
-  const contentRef1 = createRef<HTMLElement>();
-  const contentRef2 = createRef<HTMLElement>();
-  const contentRef3 = createRef<HTMLElement>();
-
-  let calculatedActiveKey;
-  if (props?.defaultActiveKey) {
-    calculatedActiveKey = props?.defaultActiveKey;
-  } else {
-    calculatedActiveKey = props?.activeKey;
-  }
-
-  return (
-    <>
-      <Tabs id="separateTabs" {...props}>
-        <Tab
-          eventKey={0}
-          title={<TabTitleText>Tab item 1</TabTitleText>}
-          tabContentId="refTab1Section"
-          tabContentRef={contentRef1}
-        />
-        <Tab
-          eventKey={1}
-          title={<TabTitleText>Tab item 2</TabTitleText>}
-          tabContentId="refTab2Section"
-          tabContentRef={contentRef2}
-        />
-        <Tab
-          eventKey={2}
-          title={<TabTitleText>Tab item 3</TabTitleText>}
-          tabContentId="refTab3Section"
-          tabContentRef={contentRef3}
-        />
-      </Tabs>
-      <div>
-        <TabContent
-          eventKey={0}
-          id="refTab1Section"
-          ref={contentRef1}
-          aria-label="Tab item 1"
-          hidden={calculatedActiveKey !== 0}
-        >
-          Tab 1 section
-        </TabContent>
-        <TabContent
-          eventKey={1}
-          id="refTab2Section"
-          ref={contentRef2}
-          aria-label="Tab item 2"
-          hidden={calculatedActiveKey !== 1}
-        >
-          <TabContentBody>Tab 2 section</TabContentBody>
-        </TabContent>
-        <TabContent
-          eventKey={2}
-          id="refTab3Section"
-          ref={contentRef3}
-          aria-label="Tab item 3"
-          hidden={calculatedActiveKey !== 2}
-        >
-          <TabContentBody hasPadding>Tab 3 section with padding </TabContentBody>
-        </TabContent>
-      </div>
-    </>
-  );
-};
-
 test(`Renders with classes ${styles.tabs} and ${styles.modifiers.animateCurrent} by default`, () => {
   render(
     <Tabs role="region">
@@ -497,46 +429,6 @@ test('should render tabs with separate content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render correct tab content for uncontrolled tabs with separate content', () => {
-  render(renderSeparateTabs({ defaultActiveKey: 1 }));
-
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-});
-
-test('should correctly advance tab content for uncontrolled tabs with separate content', async () => {
-  render(renderSeparateTabs({ defaultActiveKey: 1 }));
-
-  userEvent.setup();
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-  await userEvent.click(screen.getByRole('tab', { name: /Tab item 1/i }));
-  expect(screen.getByText(/Tab 1 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).not.toBeVisible();
-});
-
-test('should render correct tab content for controlled tabs with separate content', () => {
-  render(renderSeparateTabs({ activeKey: 1 }));
-
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-});
-
-test('should correctly advance tab content for controlled tabs with separate content', async () => {
-  render(renderSeparateTabs({ activeKey: 1 }));
-
-  userEvent.setup();
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-  await userEvent.click(screen.getByRole('tab', { name: /Tab item 1/i }));
-  expect(screen.getByText(/Tab 1 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).not.toBeVisible();
-});
-
 test('should render box tabs of secondary variant', () => {
   const { asFragment } = render(
     <Tabs id="boxSecondaryVariantTabs" isBox variant="secondary">

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-25"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"

package/src/components/Tabs/examples/Tabs.md

@@ -2,18 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-v6-c-tabs
-propComponents:
-  [
-    'Tabs',
-    'Tab',
-    'TabContent',
-    'TabContentBody',
-    'TabTitleText',
-    'TabTitleIcon',
-    'HorizontalOverflowObject',
-    'TabAction',
-    'PopperOptions'
-  ]
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'TabAction', 'PopperOptions']
 ouia: true
 ---
 
@@ -46,7 +35,6 @@ Tabs can be styled as 'default' or 'boxed':
 - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
 
 ```ts file="./TabsDefault.tsx"
-
 ```
 
 ### Boxed secondary tabs
@@ -56,7 +44,6 @@ To change the background color of boxed tabs or the tab content, use the `varian
 Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
 
 ```ts file="./TabsBoxSecondary.tsx"
-
 ```
 
 ### Vertical tabs
@@ -66,7 +53,6 @@ Vertical tabs are placed on the left-hand side of a page or container and may ap
 To style tabs vertically, use the `isVertical` property.
 
 ```ts file="./TabsVertical.tsx"
-
 ```
 
 ### Vertical expandable tabs
@@ -78,7 +64,6 @@ Expandable tabs can be enabled at different breakpoints. The following example p
 To flag vertical tabs when they're expanded, use the `isExpanded` property.
 
 ```ts file="./TabsVerticalExpandable.tsx"
-
 ```
 
 ### Vertical expandable uncontrolled
@@ -86,7 +71,6 @@ To flag vertical tabs when they're expanded, use the `isExpanded` property.
 To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpanded` property.
 
 ```ts file="./TabsVerticalExpandableUncontrolled.tsx"
-
 ```
 
 ### Default overflow tabs
@@ -94,7 +78,6 @@ To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpa
 By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.
 
 ```ts file="./TabsDefaultOverflow.tsx"
-
 ```
 
 ### Horizontal overflow tabs
@@ -106,7 +89,6 @@ To enable horizontal overflow, use the `isOverflowHorizontal` property.
 In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
 
 ```ts file="./TabsHorizontalOverflow.tsx"
-
 ```
 
 ### With tooltip react ref
@@ -116,15 +98,14 @@ When using a React ref to link a tooltip to a tab component via the `reference`
 The tooltip should also have the `id` property passed in. The value of `id` should be passed into the tab's `aria-describedby` property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
 
 ```ts file="./TabsTooltipReactRef.tsx"
-
 ```
 
 ### Uncontrolled tabs
 
 To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.
 
-```ts file="./TabsUncontrolled.tsx"
 
+```ts file="./TabsUncontrolled.tsx"
 ```
 
 ### With adjusted inset
@@ -132,7 +113,6 @@ To allow the `<Tabs>` component to manage setting the active tab and displaying
 To adjust the inset of tabs and visually separate them more, use the `inset` property. You can set the inset to "insetNone", "insetSm", "insetMd", "insetLg", "insetXl", or "inset2xl" at "default", "sm", "md", "lg, "xl, and "2xl" breakpoints.
 
 ```ts file="./TabsInset.tsx"
-
 ```
 
 ### With page insets
@@ -140,7 +120,6 @@ To adjust the inset of tabs and visually separate them more, use the `inset` pro
 To adjust the left padding of tabs, use the `usePageInsets` property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.
 
 ```ts file="./TabsPageInsets.tsx"
-
 ```
 
 ### With icons and text
@@ -150,7 +129,6 @@ You can render different content in the `title` property of a tab to add icons a
 To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
 
 ```ts file="./TabsIconAndText.tsx"
-
 ```
 
 ### Subtabs
@@ -160,7 +138,6 @@ Use subtabs within other components, like modals. Subtabs have less visually pro
 To apply subtab styling to tabs, use the `isSubtab` property.
 
 ```ts file="./TabsSubtabs.tsx"
-
 ```
 
 ### Filled tabs with icons
@@ -168,7 +145,6 @@ To apply subtab styling to tabs, use the `isSubtab` property.
 To allow tabs to fill the available width of the page section, use the `isFilled` property.
 
 ```ts file="./TabsFilledWithIcons.tsx"
-
 ```
 
 ### Tabs linked to nav elements
@@ -178,7 +154,6 @@ To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component
 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>`.
 
 ```ts file="./TabsNav.tsx"
-
 ```
 
 ### Subtabs linked to nav elements
@@ -186,15 +161,13 @@ Nav tabs should use the `href` property to link the tab to the URL of another pa
 Subtabs can also link to nav elements.
 
 ```ts file="./TabsNavSubtab.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.
+If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties
 
 ```ts file="./TabsSeparateContent.tsx"
-
 ```
 
 ### With tab content with body and padding
@@ -202,7 +175,6 @@ If a `<TabContent>` component is defined outside of a `<Tabs>` component, use th
 To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property.
 
 ```ts file="./TabsContentWithBodyPadding.tsx"
-
 ```
 
 ### Children mounting on click
@@ -212,7 +184,6 @@ To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEn
 Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
 
 ```ts file="./TabsChildrenMounting.tsx"
-
 ```
 
 ### Unmounting invisible children
@@ -220,17 +191,15 @@ Note that this property does not create the tab children until the tab is clicke
 To unmount tab children (remove from the DOM) when they are no longer visible, use the `unmountOnExit` property.
 
 ```ts file="./TabsUnmountingInvisibleChildren.tsx"
-
 ```
 
 ### Toggled tab content
 
-You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item 2" invisible.
+You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item  2" invisible.
 
 The tab its content should only be mounted when the tab is visible.
 
 ```ts file="./TabsToggledSeparateContent.tsx"
-
 ```
 
 ### Dynamic tabs
@@ -238,7 +207,6 @@ The tab its content should only be mounted when the tab is visible.
 To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`.
 
 ```ts file="./TabsDynamic.tsx"
-
 ```
 
 ### With help action popover
@@ -248,7 +216,6 @@ You may add a help action to a tab to provide users with additional context in a
 To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property.
 
 ```ts file="./TabsHelp.tsx"
-
 ```
 
 ### With help and close actions
@@ -258,5 +225,4 @@ To add multiple actions to a tab, create a `<TabAction>` component for each acti
 The following example passes in both help popover and close actions.
 
 ```ts file="./TabsHelpAndClose.tsx"
-
 ```

package/src/components/Tabs/examples/TabsSeparateContent.tsx

@@ -48,7 +48,6 @@ export const TabsSeparateContent: React.FunctionComponent = () => {
           id="refTab1Section"
           ref={contentRef1}
           aria-label="This is content for the first separate content tab"
-          hidden={activeTabKey !== 0}
         >
           Tab 1 section
         </TabContent>
@@ -57,7 +56,7 @@ export const TabsSeparateContent: React.FunctionComponent = () => {
           id="refTab2Section"
           ref={contentRef2}
           aria-label="This is content for the second separate content tab"
-          hidden={activeTabKey !== 1}
+          hidden
         >
           Tab 2 section
         </TabContent>
@@ -66,7 +65,7 @@ export const TabsSeparateContent: React.FunctionComponent = () => {
           id="refTab3Section"
           ref={contentRef3}
           aria-label="This is content for the third separate content tab"
-          hidden={activeTabKey !== 2}
+          hidden
         >
           Tab 3 section
         </TabContent>

package/src/components/Wizard/WizardNavInternal.tsx

@@ -48,7 +48,7 @@ export const WizardNavInternal = ({
           let firstSubStepIndex: number;
           let hasActiveChild = false;
 
-          const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
+          const subNavItems = step.subStepIds?.map((subStepId, _subStepIndex) => {
             const subStep = steps.find((step) => step.id === subStepId);
             const hasVisitedNextStep = steps.some((step) => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
@@ -66,8 +66,8 @@ export const WizardNavInternal = ({
               return;
             }
 
-            // Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
-            if (subStepIndex === 0) {
+            // Store the first visible sub-step index so that when its parent is clicked, the first sub-step is focused
+            if (firstSubStepIndex === undefined) {
               firstSubStepIndex = subStep.index;
             }
 

package/src/components/Wizard/WizardNavItem.tsx

@@ -4,7 +4,6 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
@@ -39,7 +38,7 @@ export interface WizardNavItemProps
   /** The id for the navigation item */
   id?: string | number;
   /** Used to determine the icon displayed next to content. Default has no icon. */
-  status?: 'default' | 'error' | 'success' | 'warning';
+  status?: 'default' | 'error' | 'success';
 }
 
 export const WizardNavItem = ({
@@ -98,8 +97,7 @@ export const WizardNavItem = ({
           isCurrent && styles.modifiers.current,
           isDisabled && styles.modifiers.disabled,
           status === WizardNavItemStatus.Error && styles.modifiers.danger,
-          status === WizardNavItemStatus.Success && styles.modifiers.success,
-          status === WizardNavItemStatus.Warning && styles.modifiers.warning
+          status === WizardNavItemStatus.Success && styles.modifiers.success
         )}
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
@@ -112,7 +110,6 @@ export const WizardNavItem = ({
             <span className={css(styles.wizardNavLinkStatusIcon)}>
               {status === WizardNavItemStatus.Error && <ExclamationCircleIcon />}
               {status === WizardNavItemStatus.Success && <CheckCircleIcon />}
-              {status === WizardNavItemStatus.Warning && <ExclamationTriangleIcon />}
             </span>
           </>
         )}

package/src/components/Wizard/WizardStep.tsx

@@ -28,7 +28,7 @@ export interface WizardStepProps {
   /** Replaces the step's footer. The step's footer takes precedence over the wizard's footer. */
   footer?: React.ReactElement<any> | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
-  status?: 'default' | 'error' | 'success' | 'warning';
+  status?: 'default' | 'error' | 'success';
   /** Flag to determine whether parent steps can expand or not. Defaults to false. */
   isExpandable?: boolean;
 }

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -627,3 +627,42 @@ test('onStepChange skips over disabled or hidden steps and substeps', async () =
     WizardStepChangeScope.Back
   );
 });
+
+test('clicking parent step navigates to first visible sub-step when first sub-step is hidden', async () => {
+  const user = userEvent.setup();
+  const onStepChange = jest.fn();
+
+  render(
+    <Wizard onStepChange={onStepChange}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        steps={[
+          <WizardStep id="step2-sub1" name="Hidden sub step" isHidden />,
+          <WizardStep id="step2-sub2" name="Visible sub step 1" />,
+          <WizardStep id="step2-sub3" name="Visible sub step 2" />
+        ]}
+      />
+      <WizardStep id="step-3" name="Test step 3" />
+    </Wizard>
+  );
+
+  // Navigate to step 3 first
+  await user.click(screen.getByRole('button', { name: 'Test step 3' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-3' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
+
+  // Click on parent step 2 - should navigate to the first VISIBLE sub-step (step2-sub2), not crash
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub2' }),
+    expect.objectContaining({ id: 'step-3' }),
+    WizardStepChangeScope.Nav
+  );
+});