@patternfly/react-core 6.3.1-prerelease.2 → 6.3.1-prerelease.21

package/src/components/Progress/ProgressBar.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 export interface AriaProps {
   'aria-labelledby'?: string;
   'aria-label'?: string;
+  'aria-describedby'?: string;
   'aria-valuemin'?: number;
   'aria-valuenow'?: number;
   'aria-valuemax'?: number;
@@ -28,7 +29,7 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
   value,
   ...props
 }: ProgressBarProps) => (
-  <div {...props} className={css(styles.progressBar, className)} {...progressBarAriaProps}>
+  <div role="progressbar" {...props} className={css(styles.progressBar, className)} {...progressBarAriaProps}>
     <div className={css(styles.progressIndicator)} style={{ width: `${value}%` }}>
       <span className={css(styles.progressMeasure)}>{children}</span>
     </div>

package/src/components/Progress/ProgressContainer.tsx

@@ -130,7 +130,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
           )}
         </div>
       )}
-      <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
+      <ProgressBar progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>
       {helperText && <ProgressHelperText>{helperText}</ProgressHelperText>}

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

@@ -4,6 +4,7 @@ exports[`ProgressBar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress__bar ''"
+    role="progressbar"
   >
     <div
       class="pf-v6-c-progress__indicator"

package/src/components/Progress/__tests__/ProgressBar.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { ProgressBar } from '../ProgressBar';
+
+test('Does not render with aria-describedby by default', () => {
+  render(<ProgressBar value={33} />);
+
+  expect(screen.getByRole('progressbar')).not.toHaveAccessibleDescription();
+});
+
+test('Renders with aria-describedby when progressBarAriaProps is passed in', () => {
+  render(
+    <>
+      <div id="test-id">Test description</div>
+      <ProgressBar value={33} progressBarAriaProps={{ 'aria-describedby': 'test-id' }} />
+    </>
+  );
+
+  expect(screen.getByRole('progressbar')).toHaveAccessibleDescription('Test description');
+});

package/src/components/Progress/examples/Progress.md

@@ -8,75 +8,119 @@ propComponents: ['Progress']
 import { useState } from 'react';
 
 ## Examples
+
 ### Basic
+
 ```ts file="./ProgressBasic.tsx"
+
 ```
 
 ### Small
+
 ```ts file="./ProgressSmall.tsx"
+
 ```
 
 ### Large
+
 ```ts file="./ProgressLarge.tsx"
-```
 
-### Outside
-```ts file="./ProgressOutside.tsx"
 ```
 
-### Inside
-```ts file="./ProgressInside.tsx"
-```
+### Outside
 
-### Success
-```ts file="./ProgressSuccess.tsx"
-```
+```ts file="./ProgressOutside.tsx"
 
-### Failure
-```ts file="./ProgressFailure.tsx"
 ```
 
-### Warning
-```ts file="./ProgressWarning.tsx"
-```
+### Inside
 
-### Inside success
-```ts file="./ProgressInsideSuccess.tsx"
-```
+```ts file="./ProgressInside.tsx"
 
-### Outside failure
-```ts file="./ProgressOutsideFailure.tsx"
 ```
 
 ### Single line
+
 ```ts file="./ProgressSingleLine.tsx"
+
 ```
 
 ### Without measure
+
 ```ts file="./ProgressWithoutMeasure.tsx"
-```
 
-### Failure without measure
-```ts file="./ProgressFailureWithoutMeasure.tsx"
 ```
 
-
 ### Finite step
+
 ```ts file="./ProgressFiniteStep.tsx"
+
 ```
 
 ### Progress with step instructions
+
 ```ts file="./ProgressStepInstruction.tsx"
+
 ```
 
 ### Truncate title
+
 ```ts file="./ProgressTruncateTitle.tsx"
+
 ```
 
 ### Title outside of progress bar
+
 ```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
+
 ```
 
 ### Helper text
+
 ```ts file="./ProgressHelperText.tsx"
+
+```
+
+## Status examples
+
+When conveying status, you should ensure:
+
+- There is visible helper text that explains the status.
+- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text#basic).
+- The helper text is linked to the `<Progress>` component via the `aria-describedby` property, as seen in the [progress helper text example](#helper-text).
+
+### Success
+
+```ts file="./ProgressSuccess.tsx"
+
+```
+
+### Failure
+
+```ts file="./ProgressFailure.tsx"
+
+```
+
+### Warning
+
+```ts file="./ProgressWarning.tsx"
+
+```
+
+### Inside success
+
+```ts file="./ProgressInsideSuccess.tsx"
+
+```
+
+### Outside failure
+
+```ts file="./ProgressOutsideFailure.tsx"
+
+```
+
+### Failure without measure
+
+```ts file="./ProgressFailureWithoutMeasure.tsx"
+
 ```

package/src/components/Progress/examples/ProgressHelperText.tsx

@@ -25,7 +25,7 @@ export const ProgressHelperText: React.FunctionComponent = () => {
   const helperTextVariant = selectedVariant === 'danger' ? 'error' : selectedVariant;
 
   const helperText = (
-    <HelperText>
+    <HelperText id="progress-helper-text-example-help-text">
       <HelperTextItem variant={helperTextVariant}>
         {`${formatVariantName(selectedVariant)} variant is being displayed`}
       </HelperTextItem>
@@ -36,7 +36,13 @@ export const ProgressHelperText: React.FunctionComponent = () => {
     <>
       {variantOptions}
       <br />
-      <Progress value={33} title="Title" helperText={helperText} variant={selectedVariant} />
+      <Progress
+        aria-describedby="progress-helper-text-example-help-text"
+        value={33}
+        title="Title"
+        helperText={helperText}
+        variant={selectedVariant}
+      />
     </>
   );
 };

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
@@ -180,7 +181,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations: hasAnimationsProp } = expandableInput || {};
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the

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

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
@@ -363,3 +364,54 @@ test('Additional props are spread when inputProps prop is passed', () => {
   render(<SearchInput aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
   expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop for expandable input', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <SearchInput
+        data-testid="test-id"
+        expandableInput={{
+          isExpanded: false,
+          onToggleExpand: () => {},
+          toggleAriaLabel: 'Test label'
+        }}
+      />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
+
+test('local hasAnimations prop takes precedence over context for expandable input', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <SearchInput
+        data-testid="test-id"
+        expandableInput={{
+          hasAnimations: false,
+          isExpanded: false,
+          onToggleExpand: () => {},
+          toggleAriaLabel: 'Test label'
+        }}
+      />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
+
+test('works without AnimationsProvider for expandable input (backward compatibility)', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        isExpanded: false,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});

package/src/components/Select/Select.tsx

@@ -1,33 +1,12 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper } from '../../helpers/Popper/Popper';
+import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
+import type { SelectOptionProps } from './SelectOption';
 
-export interface SelectPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the select to. Defaults to document.body.
-   * If your select is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo="inline"
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type SelectPopperProps = PopperOptions;
 
 export interface SelectToggleProps {
   /**  Select toggle node. */
@@ -56,7 +35,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** @beta Flag indicating the first menu item should be focused after opening the menu. */
   shouldFocusFirstItemOnOpen?: boolean;
   /** Function callback when user selects an option. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: SelectOptionProps['value']) => void;
   /** Callback to allow the select component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -75,7 +54,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
   /** Additional properties to pass to the popper */
-  popperProps?: SelectPopperProps;
+  popperProps?: PopperOptions;
   /** Height of the select menu */
   menuHeight?: string;
   /** Maximum height of select menu */

package/src/components/Select/examples/Select.md

@@ -4,7 +4,7 @@ section: components
 subsection: menus
 cssPrefix: pf-v6-c-select
 propComponents:
-  ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
+  ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'PopperOptions']
 ouia: true
 ---
 

package/src/components/Tabs/OverflowTab.tsx

@@ -2,36 +2,14 @@ import { Fragment, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { Popper } from '../../helpers';
+import { Popper, PopperOptions } from '../../helpers';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { TabsContext } from './TabsContext';
 import { TabProps } from './Tab';
 import { TabTitleText } from './TabTitleText';
 
-export interface HorizontalOverflowPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the select to. Defaults to document.body.
-   * If your select is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo="inline"
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type HorizontalOverflowPopperProps = PopperOptions;
 
 export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   /** Additional classes added to the overflow tab */
@@ -51,7 +29,7 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
   focusTimeoutDelay?: number;
   /** Additional props to spread to the popper menu. */
-  popperProps?: HorizontalOverflowPopperProps;
+  popperProps?: PopperOptions;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({

package/src/components/Tabs/Tabs.tsx

@@ -54,9 +54,9 @@ export interface TabsProps
   /** The index of the default active tab. Set this for uncontrolled Tabs */
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
-  onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
+  onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: TabProps['eventKey']) => void;
   /** Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
-  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
+  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: TabProps['eventKey']) => void;
   /** Callback for the add button. Passing this property inserts the add button */
   onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /** Aria-label for the add button */
@@ -438,6 +438,10 @@ class Tabs extends Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
+
+    if (prevState.uncontrolledIsExpandedLocal !== this.state.uncontrolledIsExpandedLocal) {
+      this.setAccentStyles(true);
+    }
   }
 
   static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {
@@ -572,8 +576,12 @@ class Tabs extends Component<TabsProps, TabsState> {
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           id={id && id}
-          style={{ [linkAccentLength.name]: currentLinkAccentLength, [linkAccentStart.name]: currentLinkAccentStart }}
           {...props}
+          style={{
+            [linkAccentLength.name]: currentLinkAccentLength,
+            [linkAccentStart.name]: currentLinkAccentStart,
+            ...props.style
+          }}
         >
           {expandable && isVertical && (
             <GenerateId>

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

@@ -1,4 +1,5 @@
 import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Tabs } from '../Tabs';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
@@ -50,6 +51,53 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when com
   jest.useRealTimers();
 });
 
+test(`Renders with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component initially mounts`, async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
+  render(
+    <Tabs
+      isVertical
+      expandable={{ default: 'expandable' }}
+      toggleText="Jump to section"
+      defaultIsExpanded={false}
+      role="region"
+    >
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  jest.useFakeTimers();
+  await user.click(screen.getByRole('button', { name: 'Jump to section' }));
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
+  jest.useRealTimers();
+});
+
+test(`Does not render with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component is finished mounting`, async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Tabs
+      isVertical
+      expandable={{ default: 'expandable' }}
+      toggleText="Jump to section"
+      defaultIsExpanded={false}
+      role="region"
+    >
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Jump to section' }));
+  expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">
@@ -514,3 +562,15 @@ test('should render an enabled add button', () => {
   const addButton = screen.getByLabelText('add-label');
   expect(addButton).not.toBeDisabled();
 });
+
+test(`should render with custom inline style and accent position inline style`, () => {
+  render(
+    <Tabs role="region" style="background-color: #12345;">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveStyle(`background-color: #12345;--pf-v6-c-tabs--link-accent--start: 0px;`);
+});

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

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-12"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -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-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -413,7 +413,7 @@ exports[`should render expandable vertical tabs 1`] = `
         <button
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
+          data-ouia-component-id="OUIA-Generated-Button-plain-5"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="generated-id-button"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    data-ouia-component-id="OUIA-Generated-Tabs-6"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-15"
+      data-ouia-component-id="OUIA-Generated-Tabs-17"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -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-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-17"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-7"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    data-ouia-component-id="OUIA-Generated-Tabs-10"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"