diff --git a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
index 0416efdf08e..df544a5cd1d 100644
--- a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
@@ -3,108 +3,138 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
-import { AccordionToggle } from '../AccordionToggle';
-import { AccordionContent } from '../AccordionContent';
-import { AccordionItem } from '../AccordionItem';
-import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
-
-describe('Accordion', () => {
-  test('Accordion default', () => {
-    const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Accordion with non-default headingLevel', () => {
-    const { asFragment } = render(
-      <Accordion asDefinitionList={false} headingLevel="h2">
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('It should pass optional aria props', () => {
-    render(
-      <Accordion asDefinitionList>
-        <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
-      </Accordion>
-    );
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveAttribute('aria-label', 'Toggle details for');
-    expect(button).toHaveAttribute('aria-labelledby', 'ex-toggle2 ex-item2');
-    expect(button).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  test('Toggle expanded', () => {
-    render(
-      <Accordion asDefinitionList>
-        <AccordionToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />
-      </Accordion>
-    );
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveAttribute('aria-expanded', 'true');
-    expect(button).toHaveClass('pf-m-expanded');
-  });
-
-  test('renders content with custom Toggle and Content containers', () => {
-    const container = 'a';
-
-    const { asFragment } = render(
-      <Accordion headingLevel="h2">
-        <AccordionItem>
-          <AccordionToggle id="item-1" component={container}>
-            Item One
-          </AccordionToggle>
-          <AccordionContent component={container}>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    expect(screen.getByText('Item One')).toBeInTheDocument();
-    expect(screen.getByText('Item One Content')).toBeInTheDocument();
-  });
-
-  test('Accordion bordered', () => {
-    const { asFragment } = render(
-      <Accordion isBordered>
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Accordion display large', () => {
-    const { asFragment } = render(
-      <Accordion displaySize="large">
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Accordion custom content', () => {
-    const { asFragment } = render(
-      <Accordion>
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent isCustomContent>
-            <AccordionExpandedContentBody>Item one content body 1</AccordionExpandedContentBody>
-            <AccordionExpandedContentBody>Item one Content body 2</AccordionExpandedContentBody>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+import { AccordionContext } from '../AccordionContext';
+
+test('Renders without children', () => {
+  render(<Accordion data-testid="accordion" />);
+
+  expect(screen.getByTestId('accordion')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the passed aria label', () => {
+  render(<Accordion aria-label="Accordion test">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Accordion test');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <Accordion aria-labelledby="labelling-id">Test</Accordion>
+      <p id="labelling-id">Label</p>
+    </>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Label');
+});
+
+test('Renders with class name pf-c-accordion', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<Accordion className="test-class">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders Accordion as a "dl" by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  /* these tests asserting a nodeName property aren't my favorite, but dl and div elements don't have implicit aria
+  roles for us to select/assert against with something more directly meaningful to user experience */
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
+});
+
+test('Renders Accordion as a "div" when asDefinitionList is false', () => {
+  render(<Accordion asDefinitionList={false}>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV');
+});
+
+test('Provides a ContentContainer of "dd" in a context by default', () => {
+  render(
+    <Accordion>
+      <AccordionContext.Consumer>{({ ContentContainer }) => ContentContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('dd')).toBeVisible();
+});
+
+test('Provides a ContentContainer of "div" in a context when asDefinitionList is false', () => {
+  render(
+    <Accordion asDefinitionList={false}>
+      <AccordionContext.Consumer>{({ ContentContainer }) => ContentContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('div')).toBeVisible();
+});
+
+test('Provides a ToggleContainer of "dt" in a context by default', () => {
+  render(
+    <Accordion>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('dt')).toBeVisible();
+});
+
+test('Provides a ToggleContainer of "h3" in a context when asDefinitionList is false', () => {
+  render(
+    <Accordion asDefinitionList={false}>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('h3')).toBeVisible();
+});
+
+test('Provides a ToggleContainer of "h2" in a context when asDefinitionList is false and headingLevel is "h2"', () => {
+  render(
+    <Accordion asDefinitionList={false} headingLevel="h2">
+      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('h2')).toBeVisible();
+});
+
+test('Renders without pf-m-bordered by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-bordered');
+});
+
+test('Renders with pf-m-bordered when isBordered=true', () => {
+  render(<Accordion isBordered>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+});
+
+test('Renders without pf-m-display-lg by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-display-lg');
+});
+
+test('Renders with pf-m-display-lg when displaySize=large', () => {
+  render(<Accordion displaySize="large">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
new file mode 100644
index 00000000000..8c07a023fd9
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionContent } from '../AccordionContent';
+import { AccordionContext } from '../AccordionContext';
+
+jest.mock('../AccordionExpandedContentBody', () => ({
+  AccordionExpandedContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
+}));
+
+test('Renders without children', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent data-testid="accordion-content" />
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByTestId('accordion-content')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with children wrapped in AccordionExpandedContentBody by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Expanded content body mock');
+});
+
+test('Does not render children wrapped in AccordionExpandedContentBody when isCustomContent=true', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent isCustomContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).not.toHaveAccessibleName('Expanded content body mock');
+});
+
+test('Renders with the passed aria label', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent aria-label="Accordion content">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+        <AccordionContent aria-labelledby="labelling-id">Test</AccordionContent>
+        <p id="labelling-id">Label</p>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
+});
+
+test('Renders with class name pf-c-accordion__expanded-content', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-accordion__expanded-content');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent className="test-class">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveClass('test-class');
+});
+
+test('Renders with the id prop passed to the container', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent id="test-id">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveProperty('id', 'test-id');
+});
+
+test('Renders the container as the element provided in ContentContainer from a context by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders as the element provided via the component prop when one is provided', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'button' }}>
+      <AccordionContent component="h1">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders without pf-m-fixed by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).not.toHaveClass('pf-m-fixed');
+});
+
+test('Renders with pf-m-fixed when isFixed is true', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent isFixed>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-fixed');
+});
+
+test('Renders unhidden and with pf-m-expanded by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  const contentContainer = screen.getByRole('heading')
+
+  expect(contentContainer).not.toHaveAttribute('hidden');
+  expect(contentContainer).toHaveClass('pf-m-expanded');
+});
+
+test('Renders aria-hidden and without pf-m-expanded when isHidden is true', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent isHidden>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  const contentContainer = screen.getByRole('heading', { hidden: true })
+
+  expect(contentContainer).toHaveAttribute('hidden');
+  expect(contentContainer).not.toHaveClass('pf-m-expanded');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent aria-label="this is a simple accordion">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx
new file mode 100644
index 00000000000..bbd4cbbf6a3
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
+
+test('Renders without children', () => {
+    const { asFragment } = render(<AccordionExpandedContentBody />);
+
+    /* a snapshot test is used here because this component isn't selectable via better screen queries without children 
+    as it doesn't spread other props to its container
+    */
+    expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders children', () => {
+  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-accordion__expanded-content-body', () => {
+  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expanded-content-body');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionExpandedContentBody>Test</AccordionExpandedContentBody>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx
new file mode 100644
index 00000000000..d2a6c8ff540
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionItem } from '../AccordionItem';
+
+test('Renders children', () => {
+  render(<AccordionItem>Test</AccordionItem>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionItem>Test</AccordionItem>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
new file mode 100644
index 00000000000..3f76b9a8b13
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionToggle } from '../AccordionToggle';
+import { AccordionContext } from '../AccordionContext';
+
+jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+
+test('Renders without children', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" data-testid="accordion-toggle-test-id" />
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByTestId('accordion-toggle-test-id')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+        <AccordionToggle id="accordion-toggle" aria-labelledby="labelling-id">
+          Test
+        </AccordionToggle>
+        <p id="labelling-id">Label</p>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Label');
+});
+
+test('Renders the accordion toggle with class pf-c-accordion__toggle', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('pf-c-accordion__toggle');
+});
+
+test('Renders the accordion toggle with custom class names provided via prop', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test" className="test-class">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('test-class');
+});
+
+test('Renders with children inside class pf-c-accordion__toggle-text', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__toggle-text');
+});
+
+test('Renders with the toggle icon inside class pf-c-accordion__toggle-icon', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Icon mock')).toHaveClass('pf-c-accordion__toggle-icon');
+});
+
+test('Renders with the id prop passed to the toggle', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveProperty('id', 'accordion-toggle');
+});
+
+test('Renders the container as the element provided in ToggleContainer from a context by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders the container as the element provided via the component prop when one is provided', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" component="h1">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders the toggle without pf-m-expanded and aria-expanded=false by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).not.toHaveClass('pf-m-expanded');
+  expect(toggle).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders the toggle with pf-m-expanded and aria-expanded=true when isExpanded=true', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).toHaveClass('pf-m-expanded');
+  expect(toggle).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
index 4e4121ce518..176a5bba191 100644
--- a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -1,115 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Accordion Accordion bordered 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion pf-m-bordered"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion custom content 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item one content body 1
-      </div>
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item one Content body 2
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion default 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <dl
     aria-label="this is a simple accordion"
@@ -117,107 +8,3 @@ exports[`Accordion Accordion default 1`] = `
   />
 </DocumentFragment>
 `;
-
-exports[`Accordion Accordion display large 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion pf-m-display-lg"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion with non-default headingLevel 1`] = `
-<DocumentFragment>
-  <div
-    aria-label=""
-    class="pf-c-accordion"
-  >
-    <h2>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </h2>
-    <div
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap
new file mode 100644
index 00000000000..1ff2488c81b
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <h3
+    aria-label="this is a simple accordion"
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      aria-label="Expanded content body mock"
+    >
+      Test
+    </div>
+  </h3>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap
new file mode 100644
index 00000000000..21188ba69ab
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-accordion__expanded-content-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Renders without children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-accordion__expanded-content-body"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap
new file mode 100644
index 00000000000..2c26d83dce7
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  Test
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionToggle.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionToggle.test.tsx.snap
new file mode 100644
index 00000000000..25b9cadd984
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionToggle.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <h3>
+    <button
+      aria-expanded="false"
+      class="pf-c-accordion__toggle"
+      id="accordion-toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-accordion__toggle-text"
+      >
+        Test
+      </span>
+      <span
+        class="pf-c-accordion__toggle-icon"
+      >
+        Icon mock
+      </span>
+    </button>
+  </h3>
+</DocumentFragment>
+`;
diff --git a/packages/react-integration/cypress/integration/accordion.spec.ts b/packages/react-integration/cypress/integration/accordion.spec.ts
deleted file mode 100644
index 03fbc825ad4..00000000000
--- a/packages/react-integration/cypress/integration/accordion.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-describe('Accordion Demo Test', () => {
-  it('Navigate to Accordion section', () => {
-    cy.visit('http://localhost:3000/accordion-demo-nav-link');
-  });
-
-  it('Verify toggle open behavior', () => {
-    cy.get('#item-1').click();
-    cy.get('#item-1').should('have.attr', 'aria-expanded', 'true');
-    cy.get('#item-2').should('have.attr', 'aria-expanded', 'false');
-    cy.get('#item-3').should('have.attr', 'aria-expanded', 'false');
-    const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
-    expandedContent.should('have.length', 1);
-    expandedContent.should('have.attr', 'id', 'item-1-content');
-  });
-
-  it('Verify toggle switch behavior', () => {
-    cy.get('#item-2').click();
-    cy.get('#item-1').should('have.attr', 'aria-expanded', 'false');
-    cy.get('#item-2').should('have.attr', 'aria-expanded', 'true');
-    cy.get('#item-3').should('have.attr', 'aria-expanded', 'false');
-    const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
-    expandedContent.should('have.length', 1);
-    expandedContent.should('have.attr', 'id', 'item-2-content');
-  });
-
-  it('Verify toggle close behavior', () => {
-    cy.get('#item-2').click();
-    cy.get('#item-1').should('have.attr', 'aria-expanded', 'false');
-    cy.get('#item-2').should('have.attr', 'aria-expanded', 'false');
-    cy.get('#item-3').should('have.attr', 'aria-expanded', 'false');
-    const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
-    expandedContent.should('not.exist');
-  });
-});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index 691a14208ea..e3b8cba3d80 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -15,11 +15,6 @@ export const Demos: DemoInterface[] = [
     name: 'About Modal Demo',
     componentType: Examples.AboutModalDemo
   },
-  {
-    id: 'accordion-demo',
-    name: 'Accordion Demo',
-    componentType: Examples.AccordionDemo
-  },
   {
     id: 'alert-timeout-close-button-demo',
     name: 'Alert Timeout Close Button Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
deleted file mode 100644
index 82eff12da2f..00000000000
--- a/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import React from 'react';
-import {
-  Accordion,
-  AccordionItem,
-  AccordionContent,
-  AccordionToggle,
-  AccordionExpandedContentBody,
-  Stack,
-  StackItem,
-  Button
-} from '@patternfly/react-core';
-
-interface AccordionDemoState {
-  expanded: string;
-}
-
-export class AccordionDemo extends React.Component<null, AccordionDemoState> {
-  static displayName = 'AccordionDemo';
-  state: AccordionDemoState = {
-    expanded: ''
-  };
-
-  componentDidMount() {
-    window.scrollTo(0, 0);
-  }
-
-  onToggle = (id: string) => {
-    const { expanded } = this.state;
-    this.setState({ expanded: id !== expanded ? id : '' });
-  };
-
-  render() {
-    const { expanded } = this.state;
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <Accordion id="accordion-example">
-            <AccordionItem>
-              <AccordionToggle onClick={() => this.onToggle('item-1')} isExpanded={expanded === 'item-1'} id="item-1">
-                Item One
-              </AccordionToggle>
-              <AccordionContent isHidden={expanded !== 'item-1'} id="item-1-content">
-                <p>
-                  Item One Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle onClick={() => this.onToggle('item-2')} isExpanded={expanded === 'item-2'} id="item-2">
-                Item Two
-              </AccordionToggle>
-              <AccordionContent isHidden={expanded !== 'item-2'} id="item-2-content">
-                <p>
-                  Item Two Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle onClick={() => this.onToggle('item-3')} isExpanded={expanded === 'item-3'} id="item-3">
-                Item Three
-              </AccordionToggle>
-              <AccordionContent isHidden={expanded !== 'item-3'} id="item-3-content">
-                <p>
-                  Item Three Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </StackItem>
-        <StackItem>
-          <Accordion id="accordion-example-no-box-shadow">
-            <AccordionItem>
-              <AccordionToggle onClick={() => this.onToggle('item-1')} isExpanded={expanded === 'item-1'} id="item-1">
-                Item One
-              </AccordionToggle>
-              <AccordionContent isHidden={expanded !== 'item-1'} id="item-1-content">
-                <p>
-                  Item One Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle onClick={() => this.onToggle('item-2')} isExpanded={expanded === 'item-2'} id="item-2">
-                Item Two
-              </AccordionToggle>
-              <AccordionContent isHidden={expanded !== 'item-2'} id="item-2-content">
-                <p>
-                  Item Two Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle onClick={() => this.onToggle('item-3')} isExpanded={expanded === 'item-3'} id="item-3">
-                Item Three
-              </AccordionToggle>
-              <AccordionContent isHidden={expanded !== 'item-3'} id="item-3-content">
-                <p>
-                  Item Three Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </StackItem>
-        <StackItem>
-          <Accordion id="accordion-bordered" isBordered displaySize="large">
-            <AccordionItem>
-              <AccordionToggle
-                onClick={() => {
-                  this.onToggle('ex-toggle1');
-                }}
-                isExpanded={expanded === 'ex-toggle1'}
-                id="ex-toggle1"
-              >
-                Item One
-              </AccordionToggle>
-              <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                  et dolore magna aliqua.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle
-                onClick={() => {
-                  this.onToggle('ex-toggle2');
-                }}
-                isExpanded={expanded === 'ex-toggle2'}
-                id="ex-toggle2"
-              >
-                Item Two
-              </AccordionToggle>
-              <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
-                <p>
-                  Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                  ultrices, faucibus erat id, maximus nunc.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle
-                onClick={() => {
-                  this.onToggle('ex-toggle3');
-                }}
-                isExpanded={expanded === 'ex-toggle3'}
-                id="ex-toggle3"
-              >
-                Item Three
-              </AccordionToggle>
-              <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
-                <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle
-                onClick={() => {
-                  this.onToggle('ex-toggle4');
-                }}
-                isExpanded={expanded === 'ex-toggle4'}
-                id="ex-toggle4"
-              >
-                Item Four
-              </AccordionToggle>
-              <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'} isCustomContent>
-                <AccordionExpandedContentBody>
-                  Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula
-                  pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et
-                  ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula
-                  ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et
-                  magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies
-                  condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec
-                  rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus,
-                  sit amet auctor eros.
-                </AccordionExpandedContentBody>
-                <AccordionExpandedContentBody>
-                  <Button variant="link" isLarge isInline>
-                    Call to action
-                  </Button>
-                </AccordionExpandedContentBody>
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem>
-              <AccordionToggle
-                onClick={() => {
-                  this.onToggle('ex-toggle5');
-                }}
-                isExpanded={expanded === 'ex-toggle5'}
-                id="ex-toggle5"
-              >
-                Item Five
-              </AccordionToggle>
-              <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
-                <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 5d234aab0a4..d0539a1cf0f 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -1,5 +1,4 @@
 export * from './AboutModal/AboutModalDemo';
-export * from './AccordionDemo/AccordionDemo';
 export * from './AlertDemo/AlertDemo';
 export * from './AlertDemo/AlertTimeoutCloseButtonDemo';
 export * from './AlertGroupDemo/AlertGroupDemo';