From ff5bdfb2f1d2980d16e2e47dcd92115efb683728 Mon Sep 17 00:00:00 2001
From: mshriver <mshriver@redhat.com>
Date: Mon, 20 Jul 2026 09:40:51 -0400
Subject: [PATCH 1/2] chore(ExpandableSection): Include OUIAProps for
 ExpandableSection

Add OUIA attribute support to ExpandableSection for better test automation.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../ExpandableSection/ExpandableSection.tsx   | 14 +++++++--
 .../__tests__/ExpandableSection.test.tsx      | 30 ++++++++++++++++++-
 .../ExpandableSection.test.tsx.snap           | 11 +++++++
 packages/react-core/src/helpers/OUIA/OUIA.md  |  1 +
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
index ed4e612982c..b045532b71d 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -6,7 +6,7 @@ import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import { PickOptional } from '../../helpers/typeUtils';
 import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { GenerateId } from '../../helpers';
+import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -16,7 +16,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'>, OUIAProps {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
@@ -84,6 +84,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * This is useful when the toggle text should function as a heading in the document structure.
    */
   toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 interface ExpandableSectionState {
@@ -134,7 +138,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    variant: 'default'
+    variant: 'default',
+    ouiaSafe: true
   };
 
   private calculateToggleText(
@@ -232,6 +237,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       truncateMaxLines,
       direction,
       toggleWrapper = 'div',
+      ouiaId,
+      ouiaSafe,
       ...props
     } = this.props;
 
@@ -307,6 +314,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
                     className
                   )}
                   {...props}
+                  {...getOUIAProps(ExpandableSection.displayName, ouiaId, ouiaSafe)}
                 >
                   {variant === ExpandableSectionVariant.default && expandableToggle}
                   <div
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
index 06d16370775..5e36466073c 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
@@ -8,7 +8,11 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
 test('ExpandableSection', () => {
-  const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} ouiaId="ouia-id">
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -306,3 +310,27 @@ test('Renders toggle icon by default when hasToggleIcon is true', () => {
   const button = screen.getByRole('button');
   expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument();
 });
+
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/ExpandableSection');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(
+    <ExpandableSection ouiaId="test-id" ouiaSafe={false}>
+      Test content
+    </ExpandableSection>
+  );
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
index 9129caa2247..1225988eca1 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
@@ -4,6 +4,8 @@ exports[`Disclosure ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -57,6 +59,9 @@ exports[`ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -110,6 +115,8 @@ exports[`Renders ExpandableSection expanded 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-expanded"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -163,6 +170,8 @@ exports[`Renders ExpandableSection indented 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -216,6 +225,8 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
diff --git a/packages/react-core/src/helpers/OUIA/OUIA.md b/packages/react-core/src/helpers/OUIA/OUIA.md
index d971aeb61b2..9d8ec82cc35 100644
--- a/packages/react-core/src/helpers/OUIA/OUIA.md
+++ b/packages/react-core/src/helpers/OUIA/OUIA.md
@@ -57,6 +57,7 @@ component.
 * [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
+* [ExpandableSection](/components/expandable-section)
 * [Form](/components/forms/form)
 * [FormGroup](/components/forms/form)
 * [FormSelect](/components/forms/form-select)

From ab38932fe01f2767cff617ee4d5fd67c92e19c87 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Wed, 22 Jul 2026 16:12:32 -0400
Subject: [PATCH 2/2] Fix tests

---
 .../__snapshots__/MultipleFileUploadStatus.test.tsx.snap  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
index 1dc68518f06..f9a9364418a 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
@@ -7,6 +7,8 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"
@@ -83,6 +85,8 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"
@@ -173,6 +177,8 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"
@@ -251,6 +257,8 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"