@patternfly/react-core 6.4.0-prerelease.5 → 6.4.1-prerelease.0

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.0-prerelease.5",
+  "version": "6.4.1-prerelease.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,9 +46,9 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.4.0-prerelease.3",
-    "@patternfly/react-styles": "^6.4.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.4.0-prerelease.3",
+    "@patternfly/react-icons": "^6.4.0",
+    "@patternfly/react-styles": "^6.4.0",
+    "@patternfly/react-tokens": "^6.4.0",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "201443e85688ffd5be3bdcd1bd37c9e67cf634e3"
+  "gitHead": "f783f064d4256000fec110dae7e4e04d42f7e9ac"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getUniqueId } from '../../helpers/util';
 import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
@@ -39,6 +40,8 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
+  /** Custom aria-describedby value for the checkbox input. If not provided and description is set, a unique ID will be generated automatically. */
+  'aria-describedby'?: string;
   /** Sets the checkbox 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.*/
@@ -52,6 +55,7 @@ const defaultOnChange = () => {};
 
 interface CheckboxState {
   ouiaStateId: string;
+  descriptionId: string;
 }
 
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
@@ -70,7 +74,8 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   constructor(props: any) {
     super(props);
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Checkbox.displayName)
+      ouiaStateId: getDefaultOUIAId(Checkbox.displayName),
+      descriptionId: getUniqueId('pf-checkbox-description')
     };
   }
 
@@ -81,6 +86,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   render() {
     const {
       'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy,
       className,
       inputClassName,
       onChange,
@@ -115,6 +121,14 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
+    // 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}
@@ -123,6 +137,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         onChange={this.handleChange}
         aria-invalid={!isValid}
         aria-label={ariaLabel}
+        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         required={isRequired}
         ref={(elem) => {
@@ -169,7 +184,11 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             {labelRendered}
           </>
         )}
-        {description && <span className={css(styles.checkDescription)}>{description}</span>}
+        {description && (
+          <span id={this.state.descriptionId} className={css(styles.checkDescription)}>
+            {description}
+          </span>
+        )}
         {body && <span className={css(styles.checkBody)}>{body}</span>}
       </Component>
     );

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

@@ -287,3 +287,37 @@ test('Matches snapshot', () => {
 
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Sets aria-describedby when description is provided', () => {
+  render(<Checkbox id="test-id" description="test description" />);
+
+  const checkbox = screen.getByRole('checkbox');
+  const descriptionElement = screen.getByText('test description');
+
+  expect(checkbox).toHaveAttribute('aria-describedby', descriptionElement.id);
+  expect(descriptionElement).toHaveAttribute('id');
+});
+
+test('Sets custom aria-describedby when provided', () => {
+  render(<Checkbox id="test-id" description="test description" aria-describedby="custom-id" />);
+
+  const checkbox = screen.getByRole('checkbox');
+
+  expect(checkbox).toHaveAttribute('aria-describedby', 'custom-id');
+});
+
+test('Does not set aria-describedby when no description is provided', () => {
+  render(<Checkbox id="test-id" />);
+
+  const checkbox = screen.getByRole('checkbox');
+
+  expect(checkbox).not.toHaveAttribute('aria-describedby');
+});
+
+test('Does not set aria-describedby when description is provided but aria-describedby is empty string', () => {
+  render(<Checkbox id="test-id" description="test description" aria-describedby="" />);
+
+  const checkbox = screen.getByRole('checkbox');
+
+  expect(checkbox).not.toHaveAttribute('aria-describedby');
+});

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -77,6 +77,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   widths,
   colorVariant = DrawerColorVariant.default,
   focusTrap,
+  style,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = useRef<HTMLDivElement>(undefined);
@@ -381,9 +382,10 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               }
             }}
             hidden={hidden}
-            {...((defaultSize || minSize || maxSize) && {
-              style: boundaryCssVars as React.CSSProperties
-            })}
+            style={{
+              ...((defaultSize || minSize || maxSize) && boundaryCssVars),
+              ...style
+            }}
             {...props}
             ref={panel}
           >

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -121,3 +121,40 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
 
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
+
+test('Applies style prop as expected', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent style={{ backgroundColor: 'red', padding: '20px' }}>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  const panelContent = screen.getByText('Drawer panel content');
+  expect(panelContent).toHaveStyle({ backgroundColor: 'red', padding: '20px' });
+});
+
+test('Style prop overrides boundaryCssVars', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent
+        defaultSize="200px"
+        minSize="100px"
+        maxSize="400px"
+        style={{
+          '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
+          '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
+          '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
+        }}
+      >
+        Drawer panel content
+      </DrawerPanelContent>
+    </Drawer>
+  );
+
+  const panelContent = screen.getByText('Drawer panel content');
+  expect(panelContent).toHaveStyle({
+    '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
+    '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
+    '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
+  });
+});

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 TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-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: TimesCircleIcon,
+  danger: ExclamationCircleIcon,
   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="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"
+          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"
         />
       </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="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"
+            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"
           />
         </svg>
       </span>

package/src/components/Radio/Radio.tsx

@@ -3,6 +3,7 @@ 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'>,
@@ -39,6 +40,8 @@ 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.*/
@@ -47,7 +50,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-class Radio extends Component<RadioProps, { ouiaStateId: string }> {
+class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId: string }> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -63,7 +66,8 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
       console.error('Radio:', 'Radio requires an aria-label to be specified');
     }
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Radio.displayName)
+      ouiaStateId: getDefaultOUIAId(Radio.displayName),
+      descriptionId: getUniqueId('pf-radio-description')
     };
   }
 
@@ -74,6 +78,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
   render() {
     const {
       'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy,
       checked,
       className,
       inputClassName,
@@ -98,6 +103,14 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
       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}
@@ -105,6 +118,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}
+        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         checked={checked || isChecked}
         {...(checked === undefined && { defaultChecked })}
@@ -143,7 +157,11 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
             {labelRendered}
           </>
         )}
-        {description && <span className={css(styles.radioDescription)}>{description}</span>}
+        {description && (
+          <span id={this.state.descriptionId} className={css(styles.radioDescription)}>
+            {description}
+          </span>
+        )}
         {body && <span className={css(styles.radioBody)}>{body}</span>}
       </Component>
     );

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

@@ -139,4 +139,48 @@ 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,15 +1,83 @@
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Tabs } from '../Tabs';
+import { Tabs, TabsProps } 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">
@@ -429,6 +497,46 @@ 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-20"
+    data-ouia-component-id="OUIA-Generated-Tabs-24"
     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-21"
+    data-ouia-component-id="OUIA-Generated-Tabs-25"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"