From 312bfb78c9cf905b9caff79ff98561599f75ff7e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 22 Jun 2023 15:49:54 -0400
Subject: [PATCH 1/2] fix(ExpandableSection): added ARIA attributes

---
 .../ExpandableSection/ExpandableSection.tsx   | 26 ++++++++++--
 .../ExpandableSectionToggle.tsx               |  6 +++
 .../__tests__/ExpandableSection.test.tsx      | 41 ++++++++++++++++++-
 .../ExpandableSection.test.tsx.snap           | 33 ++++++++++++---
 .../examples/ExpandableSection.md             | 10 +++++
 .../examples/ExpandableSectionDetached.tsx    | 13 ++++--
 6 files changed, 116 insertions(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
index 1607d0de06c..4eb9c2e333f 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce } from '../../helpers/util';
+import { debounce, getUniqueId } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
@@ -23,6 +23,12 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * property's value should match the contenId property of the expandable section toggle sub-component.
    */
   contentId?: string;
+  /** Id of the toggle of the expandable section, which provides an accessible name to the
+   * expandable section content via the aria-labelledby attribute. When the isDetached property
+   * is also passed in, the value of this property must match the toggleId property of the
+   * expandable section toggle sub-component.
+   */
+  toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
   /** Forces active state. */
@@ -102,7 +108,6 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    contentId: '',
     variant: 'default'
   };
 
@@ -191,13 +196,24 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       isWidthLimited,
       isIndented,
       contentId,
+      toggleId,
       variant,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       ...props
     } = this.props;
+
+    if (isDetached && !toggleId) {
+      /* eslint-disable no-console */
+      console.warn(
+        'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.'
+      );
+    }
+
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
+    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
+    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -219,6 +235,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         className={css(styles.expandableSectionToggle)}
         type="button"
         aria-expanded={propOrStateIsExpanded}
+        aria-controls={uniqueContentId}
+        id={uniqueToggleId}
         onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
       >
         {variant !== ExpandableSectionVariant.truncate && (
@@ -250,7 +268,9 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           ref={this.expandableContentRef}
           className={css(styles.expandableSectionContent)}
           hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={contentId}
+          id={uniqueContentId}
+          aria-labelledby={uniqueToggleId}
+          role="region"
         >
           {children}
         </div>
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
index f9f94de0680..ebb416aca45 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
@@ -16,6 +16,10 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
    * property should match the contentId property of the main expandable section component.
    */
   contentId?: string;
+  /** Id of the toggle. The value passed into this property should match the aria-labelledby
+   * property of the main expandable section component.
+   */
+  toggleId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
   /** @beta Flag to determine toggle styling when the expandable content is truncated. */
@@ -32,6 +36,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   isExpanded = false,
   onToggle,
   contentId,
+  toggleId,
   direction = 'down',
   hasTruncatedContent = false,
   ...props
@@ -52,6 +57,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       aria-expanded={isExpanded}
       aria-controls={contentId}
       onClick={() => onToggle(!isExpanded)}
+      id={toggleId}
     >
       {!hasTruncatedContent && (
         <span
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 5e60bd7b577..77358940c88 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
@@ -36,10 +36,10 @@ test('Renders Uncontrolled ExpandableSection', () => {
 test('Detached ExpandableSection renders successfully', () => {
   const { asFragment } = render(
     <React.Fragment>
-      <ExpandableSection {...props} isExpanded isDetached contentId="test">
+      <ExpandableSection {...props} isExpanded isDetached toggleId="toggle-id" contentId="test">
         test
       </ExpandableSection>
-      <ExpandableSectionToggle isExpanded contentId="test" direction="up">
+      <ExpandableSectionToggle isExpanded contentId="test" toggleId="toggle-id" direction="up">
         Toggle text
       </ExpandableSectionToggle>
     </React.Fragment>
@@ -91,3 +91,40 @@ test('Renders with pf-m-truncate class when variant is truncate', () => {
 
   expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
 });
+
+test('Renders with value passed to contentId', () => {
+  render(
+    <ExpandableSection data-testid="test-id" contentId="custom-id">
+      Test
+    </ExpandableSection>
+  );
+
+  const wrapper = screen.getByTestId('test-id');
+  const content = wrapper.querySelector('#custom-id');
+  expect(content).toBeInTheDocument();
+});
+
+test('Renders with value passed to toggleId', () => {
+  render(
+    <ExpandableSection data-testid="test-id" toggleId="custom-id">
+      Test
+    </ExpandableSection>
+  );
+
+  const wrapper = screen.getByTestId('test-id');
+  const toggle = wrapper.querySelector('#custom-id');
+  expect(toggle).toBeVisible();
+});
+
+test('Renders with ARIA attributes when contentId and toggleId are passed', () => {
+  render(
+    <ExpandableSection data-testid="test-id" toggleId="toggle-id" contentId="content-id">
+      Test
+    </ExpandableSection>
+  );
+
+  const wrapper = screen.getByTestId('test-id');
+
+  expect(wrapper).toContainHTML('aria-labelledby="toggle-id"');
+  expect(wrapper).toContainHTML('aria-controls="content-id"');
+});
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 7fbd3c8aab6..ad49dc13fed 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
@@ -6,8 +6,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
   >
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       id="test"
+      role="region"
     >
       test
     </div>
@@ -19,6 +21,7 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
       aria-controls="test"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -54,7 +57,9 @@ exports[`Disclosure ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section pf-m-display-lg pf-m-limit-width"
   >
     <button
+      aria-controls="expandable-section-content-1687462398031kq4o63hpath"
       class="pf-v5-c-expandable-section__toggle"
+      id="expandable-section-toggle-1687462398031mb3ri27ymdn"
       type="button"
     >
       <span
@@ -79,9 +84,11 @@ exports[`Disclosure ExpandableSection 1`] = `
       />
     </button>
     <div
+      aria-labelledby="expandable-section-toggle-1687462398031mb3ri27ymdn"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="expandable-section-content-1687462398031kq4o63hpath"
+      role="region"
     >
       test 
     </div>
@@ -95,7 +102,9 @@ exports[`ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
+      aria-controls="expandable-section-content-1687462397960cv21n48cjkm"
       class="pf-v5-c-expandable-section__toggle"
+      id="expandable-section-toggle-16874623979605rgz7pi749w"
       type="button"
     >
       <span
@@ -120,9 +129,11 @@ exports[`ExpandableSection 1`] = `
       />
     </button>
     <div
+      aria-labelledby="expandable-section-toggle-16874623979605rgz7pi749w"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="expandable-section-content-1687462397960cv21n48cjkm"
+      role="region"
     >
       test 
     </div>
@@ -136,8 +147,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded"
   >
     <button
+      aria-controls="expandable-section-content-1687462397975jux9tnzdvih"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="expandable-section-toggle-16874623979754smon79ihy4"
       type="button"
     >
       <span
@@ -162,8 +175,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
       />
     </button>
     <div
+      aria-labelledby="expandable-section-toggle-16874623979754smon79ihy4"
       class="pf-v5-c-expandable-section__content"
-      id=""
+      id="expandable-section-content-1687462397975jux9tnzdvih"
+      role="region"
     >
        test 
     </div>
@@ -177,8 +192,10 @@ exports[`Renders ExpandableSection indented 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented"
   >
     <button
+      aria-controls="expandable-section-content-16874623980341qi9dbbdx8s"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="expandable-section-toggle-1687462398034hf2qspa0uzp"
       type="button"
     >
       <span
@@ -203,8 +220,10 @@ exports[`Renders ExpandableSection indented 1`] = `
       />
     </button>
     <div
+      aria-labelledby="expandable-section-toggle-1687462398034hf2qspa0uzp"
       class="pf-v5-c-expandable-section__content"
-      id=""
+      id="expandable-section-content-16874623980341qi9dbbdx8s"
+      role="region"
     >
        test 
     </div>
@@ -218,7 +237,9 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
+      aria-controls="expandable-section-content-1687462398024vgs055e08u"
       class="pf-v5-c-expandable-section__toggle"
+      id="expandable-section-toggle-1687462398024wypw2pennm8"
       type="button"
     >
       <span
@@ -245,9 +266,11 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       </span>
     </button>
     <div
+      aria-labelledby="expandable-section-toggle-1687462398024wypw2pennm8"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="expandable-section-content-1687462398024vgs055e08u"
+      role="region"
     >
        test 
     </div>
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
index 03be97cc34e..f7f3a30f1d4 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
@@ -12,31 +12,39 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 ### Basic
 
 ```ts file="ExpandableSectionBasic.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="ExpandableSectionUncontrolled.tsx"
+
 ```
 
 ### Uncontrolled with dynamic toggle text
 
 ```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
+
 ```
 
 ### Detached
 
+When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.
+
 ```ts file="ExpandableSectionDetached.tsx"
+
 ```
 
 ### Disclosure variation
 
 ```ts file="ExpandableSectionDisclosure.tsx"
+
 ```
 
 ### Indented
 
 ```ts file="ExpandableSectionIndented.tsx"
+
 ```
 
 ### With custom toggle content
@@ -44,6 +52,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
 ```ts file="ExpandableSectionCustomToggle.tsx"
+
 ```
 
 ### Truncate expansion
@@ -51,4 +60,5 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
 
 ```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
+
 ```
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
index 178d62ce82d..bcba03935c2 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
@@ -8,16 +8,23 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
     setIsExpanded(isExpanded);
   };
 
-  const contentId = 'detached-toggle-content';
+  const contentId = 'detached-expandable-section-content';
+  const toggleId = 'detached-expandable-section-toggle';
   return (
     <Stack hasGutter>
       <StackItem>
-        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
           This content is visible only when the component is expanded.
         </ExpandableSection>
       </StackItem>
       <StackItem>
-        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+        <ExpandableSectionToggle
+          isExpanded={isExpanded}
+          onToggle={onToggle}
+          toggleId={toggleId}
+          contentId={contentId}
+          direction="up"
+        >
           {isExpanded ? 'Show less' : 'Show more'}
         </ExpandableSectionToggle>
       </StackItem>

From 9f03482f50a30aa8b9df0cdfbd0a1f7bab880f5a Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 26 Jun 2023 09:03:32 -0400
Subject: [PATCH 2/2] Updated failing snapshots due to mismatching generated ID

---
 .../__tests__/ExpandableSection.test.tsx      | 38 ++++++++--------
 .../ExpandableSection.test.tsx.snap           | 44 +++++++++----------
 .../MultipleFileUploadStatus.tsx              | 21 ++++++---
 .../MultipleFileUploadStatus.test.tsx.snap    | 24 ++++++++--
 .../examples/MultipleFileUpload.md            |  4 +-
 5 files changed, 80 insertions(+), 51 deletions(-)

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 77358940c88..2392923267c 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
-const props = {};
+const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
 test('ExpandableSection', () => {
   const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
@@ -14,7 +14,12 @@ test('ExpandableSection', () => {
 });
 
 test('Renders ExpandableSection expanded', () => {
-  const { asFragment } = render(<ExpandableSection isExpanded> test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} isExpanded>
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -29,17 +34,22 @@ test('ExpandableSection onToggle called', async () => {
 });
 
 test('Renders Uncontrolled ExpandableSection', () => {
-  const { asFragment } = render(<ExpandableSection toggleText="Show More"> test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} toggleText="Show More">
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('Detached ExpandableSection renders successfully', () => {
   const { asFragment } = render(
     <React.Fragment>
-      <ExpandableSection {...props} isExpanded isDetached toggleId="toggle-id" contentId="test">
+      <ExpandableSection isExpanded isDetached {...props}>
         test
       </ExpandableSection>
-      <ExpandableSectionToggle isExpanded contentId="test" toggleId="toggle-id" direction="up">
+      <ExpandableSectionToggle isExpanded direction="up" {...props}>
         Toggle text
       </ExpandableSectionToggle>
     </React.Fragment>
@@ -58,7 +68,7 @@ test('Disclosure ExpandableSection', () => {
 
 test('Renders ExpandableSection indented', () => {
   const { asFragment } = render(
-    <ExpandableSection isExpanded isIndented>
+    <ExpandableSection {...props} isExpanded isIndented>
       {' '}
       test{' '}
     </ExpandableSection>
@@ -67,27 +77,19 @@ test('Renders ExpandableSection indented', () => {
 });
 
 test('Does not render with pf-m-truncate class when variant is not passed', () => {
-  render(<ExpandableSection {...props}>test</ExpandableSection>);
+  render(<ExpandableSection>test</ExpandableSection>);
 
   expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
 });
 
 test('Does not render with pf-m-truncate class when variant is not truncate', () => {
-  render(
-    <ExpandableSection variant={ExpandableSectionVariant.default} {...props}>
-      test
-    </ExpandableSection>
-  );
+  render(<ExpandableSection variant={ExpandableSectionVariant.default}>test</ExpandableSection>);
 
   expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
 });
 
 test('Renders with pf-m-truncate class when variant is truncate', () => {
-  render(
-    <ExpandableSection variant={ExpandableSectionVariant.truncate} {...props}>
-      test
-    </ExpandableSection>
-  );
+  render(<ExpandableSection variant={ExpandableSectionVariant.truncate}>test</ExpandableSection>);
 
   expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
 });
@@ -118,7 +120,7 @@ test('Renders with value passed to toggleId', () => {
 
 test('Renders with ARIA attributes when contentId and toggleId are passed', () => {
   render(
-    <ExpandableSection data-testid="test-id" toggleId="toggle-id" contentId="content-id">
+    <ExpandableSection data-testid="test-id" {...props}>
       Test
     </ExpandableSection>
   );
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 ad49dc13fed..d87bc00aaa6 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
@@ -8,7 +8,7 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     <div
       aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id="test"
+      id="content-id"
       role="region"
     >
       test
@@ -18,7 +18,7 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
   >
     <button
-      aria-controls="test"
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
       id="toggle-id"
@@ -57,9 +57,9 @@ exports[`Disclosure ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section pf-m-display-lg pf-m-limit-width"
   >
     <button
-      aria-controls="expandable-section-content-1687462398031kq4o63hpath"
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
-      id="expandable-section-toggle-1687462398031mb3ri27ymdn"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -84,10 +84,10 @@ exports[`Disclosure ExpandableSection 1`] = `
       />
     </button>
     <div
-      aria-labelledby="expandable-section-toggle-1687462398031mb3ri27ymdn"
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id="expandable-section-content-1687462398031kq4o63hpath"
+      id="content-id"
       role="region"
     >
       test 
@@ -102,9 +102,9 @@ exports[`ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
-      aria-controls="expandable-section-content-1687462397960cv21n48cjkm"
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
-      id="expandable-section-toggle-16874623979605rgz7pi749w"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -129,10 +129,10 @@ exports[`ExpandableSection 1`] = `
       />
     </button>
     <div
-      aria-labelledby="expandable-section-toggle-16874623979605rgz7pi749w"
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id="expandable-section-content-1687462397960cv21n48cjkm"
+      id="content-id"
       role="region"
     >
       test 
@@ -147,10 +147,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded"
   >
     <button
-      aria-controls="expandable-section-content-1687462397975jux9tnzdvih"
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
-      id="expandable-section-toggle-16874623979754smon79ihy4"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -175,9 +175,9 @@ exports[`Renders ExpandableSection expanded 1`] = `
       />
     </button>
     <div
-      aria-labelledby="expandable-section-toggle-16874623979754smon79ihy4"
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id="expandable-section-content-1687462397975jux9tnzdvih"
+      id="content-id"
       role="region"
     >
        test 
@@ -192,10 +192,10 @@ exports[`Renders ExpandableSection indented 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented"
   >
     <button
-      aria-controls="expandable-section-content-16874623980341qi9dbbdx8s"
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
-      id="expandable-section-toggle-1687462398034hf2qspa0uzp"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -220,9 +220,9 @@ exports[`Renders ExpandableSection indented 1`] = `
       />
     </button>
     <div
-      aria-labelledby="expandable-section-toggle-1687462398034hf2qspa0uzp"
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id="expandable-section-content-16874623980341qi9dbbdx8s"
+      id="content-id"
       role="region"
     >
        test 
@@ -237,9 +237,9 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
-      aria-controls="expandable-section-content-1687462398024vgs055e08u"
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
-      id="expandable-section-toggle-1687462398024wypw2pennm8"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -266,10 +266,10 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       </span>
     </button>
     <div
-      aria-labelledby="expandable-section-toggle-1687462398024wypw2pennm8"
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id="expandable-section-content-1687462398024vgs055e08u"
+      id="content-id"
       role="region"
     >
        test 
diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
index eb832f83140..10ec7937fff 100644
--- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 import { ExpandableSection } from '../ExpandableSection';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -65,11 +66,21 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
 
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
-      <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
-          {children}
-        </ul>
-      </ExpandableSection>
+      <GenerateId prefix="pf-expandable-section-">
+        {(expandableSectionId) => (
+          <ExpandableSection
+            contentId={`${expandableSectionId}-content`}
+            toggleId={`${expandableSectionId}-toggle`}
+            toggleContent={toggle}
+            isExpanded={isOpen}
+            onToggle={toggleExpandableSection}
+          >
+            <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+              {children}
+            </ul>
+          </ExpandableSection>
+        )}
+      </GenerateId>
     </div>
   );
 };
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 b908d1a93b0..9a7b3827354 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
@@ -9,8 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-1-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-1-toggle"
         type="button"
       >
         <span
@@ -46,8 +48,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-1-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-1-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -70,8 +74,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-3-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-3-toggle"
         type="button"
       >
         <span
@@ -121,8 +127,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-3-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-3-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -145,8 +153,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-2-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-2-toggle"
         type="button"
       >
         <span
@@ -184,8 +194,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-2-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-2-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -208,8 +220,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-0-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-0-toggle"
         type="button"
       >
         <span
@@ -245,8 +259,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-0-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-0-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
index bd3e7441ce8..549305f17da 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
@@ -18,11 +18,11 @@ Multiple file upload is able to:
   - Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
   - If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
 
-### Restricting file size and type
+## Restricting file size and type
 
 As with singular file upload, any [props accepted by react-dropzone's Dropzone component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
 
-#### IMPORTANT: A note about security
+### IMPORTANT: A note about security
 
 Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.