From e779c318dd4e2f95dd80ef57116a487bda266b31 Mon Sep 17 00:00:00 2001
From: Damien Robson <damien.robson@sage.com>
Date: Wed, 22 Jan 2025 13:15:48 +0000
Subject: [PATCH] docs(accordion): update documentation examples to ensure a11y
 compliance

---
 src/components/accordion/accordion.mdx        | 10 +--
 .../accordion/accordion.stories.tsx           | 86 +++++++++++++------
 2 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/components/accordion/accordion.mdx b/src/components/accordion/accordion.mdx
index c2645928bc..692c00d7fb 100644
--- a/src/components/accordion/accordion.mdx
+++ b/src/components/accordion/accordion.mdx
@@ -76,7 +76,7 @@ const MyComponent = () => (
 
 The default version of `Accordion` has a white background and no side borders.
 
-<Canvas of={AccordionStories.AccordionDefault} />
+<Canvas of={AccordionStories.Default} />
 
 ### With disabled content padding
 
@@ -124,19 +124,19 @@ The icon showing the state of the `Accordion` can be left-aligned by setting the
 
 The default width of 100% can be overriden by setting the `width` prop to a custom value.
 
-<Canvas of={AccordionStories.DifferentWidth} />
+<Canvas of={AccordionStories.CustomWidth} />
 
 ### With custom padding and margins
 
 An `Accordion` can be rendered with different padding and margin by setting the `padding` and `margin` props.
 
-<Canvas of={AccordionStories.WithDifferentPaddingAndMargin} />
+<Canvas of={AccordionStories.WithCustomPaddingAndMargins} />
 
 ### With custom title padding and margins
 
 An `Accordion` title can be rendered with different padding and margin by passing the desired configuration object to the `headerSpacing` prop.
 
-<Canvas of={AccordionStories.WithDifferentPaddingAndMarginInAccordionTitle} />
+<Canvas of={AccordionStories.WithCustomTitlePaddingAndMargins} />
 
 ### Grouped
 
@@ -160,7 +160,7 @@ An `Accordion`  will automatically adjust its height to fit the content inside i
 
 Setting the `variant` prop to `subtle` will override the default styling of an Accordion. The `subTitle` and `scheme` props will have no effect when used alongside this variant, nor will the validation props (`error`, `warning`, and `info`).
 
-<Canvas of={AccordionStories.AccordionSubtle} />
+<Canvas of={AccordionStories.SubtleVariant} />
 
 ## Props
 
diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
index 38559e7097..7c850fbcef 100644
--- a/src/components/accordion/accordion.stories.tsx
+++ b/src/components/accordion/accordion.stories.tsx
@@ -24,7 +24,7 @@ const meta: Meta<typeof Accordion> = {
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 
-export const AccordionDefault: Story = () => {
+export const Default: Story = () => {
   return (
     <Accordion title="Heading">
       <Box mt={2}>Content</Box>
@@ -33,7 +33,7 @@ export const AccordionDefault: Story = () => {
     </Accordion>
   );
 };
-AccordionDefault.storyName = "Default";
+Default.storyName = "Default";
 
 export const WithDisableContentPadding: Story = () => {
   return (
@@ -116,7 +116,7 @@ export const LeftAlignedIcon: Story = () => {
 };
 LeftAlignedIcon.storyName = "Left-Aligned Icon";
 
-export const DifferentWidth: Story = () => {
+export const CustomWidth: Story = () => {
   return (
     <Accordion width="500px" title="Heading">
       <Box mt={2}>Content</Box>
@@ -125,65 +125,65 @@ export const DifferentWidth: Story = () => {
     </Accordion>
   );
 };
-DifferentWidth.storyName = "Custom Width";
+CustomWidth.storyName = "Custom Width";
 
-export const WithDifferentPaddingAndMargin: Story = () => {
+export const WithCustomPaddingAndMargins: Story = () => {
   return (
     <>
-      <Accordion m={0} p={0} title="Accordion">
+      <Accordion m={0} p={0} title="First Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion m={1} p={1} title="Accordion">
+      <Accordion m={1} p={1} title="Second Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion m={2} p={2} title="Accordion">
+      <Accordion m={2} p={2} title="Third Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion m={3} p={3} title="Accordion">
+      <Accordion m={3} p={3} title="Fourth Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion m={4} p={4} title="Accordion">
+      <Accordion m={4} p={4} title="Fifth Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion m={5} p={5} title="Accordion">
+      <Accordion m={5} p={5} title="Sixth Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion m={6} p={6} title="Accordion">
+      <Accordion m={6} p={6} title="Seventh Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
     </>
   );
 };
-WithDifferentPaddingAndMargin.storyName = "With Custom Padding And Margins";
+WithCustomPaddingAndMargins.storyName = "With Custom Padding And Margins";
 
-export const WithDifferentPaddingAndMarginInAccordionTitle: Story = () => {
+export const WithCustomTitlePaddingAndMargins: Story = () => {
   return (
     <>
-      <Accordion headerSpacing={{ p: 0 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 0 }} title="First Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion headerSpacing={{ p: 1 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 1 }} title="Second Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion headerSpacing={{ p: 2 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 2 }} title="Third Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion headerSpacing={{ p: 3 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 3 }} title="Fourth Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion headerSpacing={{ p: 4 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 4 }} title="Fifth Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion headerSpacing={{ p: 5 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 5 }} title="Sixth Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
-      <Accordion headerSpacing={{ p: 6 }} title="Accordion">
+      <Accordion headerSpacing={{ p: 6 }} title="Seventh Accordion">
         <Box mt={2}>content</Box>
       </Accordion>
     </>
   );
 };
-WithDifferentPaddingAndMarginInAccordionTitle.storyName =
+WithCustomTitlePaddingAndMargins.storyName =
   "With Custom Title Padding And Margins";
 
 export const Grouped: Story = () => {
@@ -212,15 +212,47 @@ export const Grouped: Story = () => {
 Grouped.storyName = "Grouped";
 
 export const WithValidationIcon: Story = () => {
+  const [firstAccordionExpanded, setFirstAccordionExpanded] =
+    useState<boolean>(true);
+  const [secondAccordionExpanded, setSecondAccordionExpanded] =
+    useState<boolean>(true);
+  const [thirdAccordionExpanded, setThirdAccordionExpanded] =
+    useState<boolean>(true);
+
+  const toggleFirstAccordion = () => {
+    setFirstAccordionExpanded(!firstAccordionExpanded);
+  };
+  const toggleSecondAccordion = () => {
+    setSecondAccordionExpanded(!secondAccordionExpanded);
+  };
+  const toggleThirdAccordion = () => {
+    setThirdAccordionExpanded(!thirdAccordionExpanded);
+  };
+
   return (
     <AccordionGroup>
-      <Accordion title="Heading" expanded error="This is an error state">
+      <Accordion
+        title="First Heading"
+        expanded={firstAccordionExpanded}
+        onChange={toggleFirstAccordion}
+        error="This is an error state"
+      >
         <Typography>Content</Typography>
       </Accordion>
-      <Accordion title="Heading" expanded warning="This is a warning state">
+      <Accordion
+        title="Second Heading"
+        expanded={secondAccordionExpanded}
+        onChange={toggleSecondAccordion}
+        warning="This is a warning state"
+      >
         <Typography>Content</Typography>
       </Accordion>
-      <Accordion title="Heading" expanded info="This is an info state">
+      <Accordion
+        title="Third Heading"
+        expanded={thirdAccordionExpanded}
+        onChange={toggleThirdAccordion}
+        info="This is an info state"
+      >
         <Typography>Content</Typography>
       </Accordion>
     </AccordionGroup>
@@ -257,7 +289,7 @@ export const WithDynamicContent: Story = () => {
 };
 WithDynamicContent.storyName = "With Dynamic Content";
 
-export const AccordionSubtle: Story = () => {
+export const SubtleVariant: Story = () => {
   return (
     <Accordion title="Heading" variant="subtle">
       <Box>Content</Box>
@@ -266,4 +298,4 @@ export const AccordionSubtle: Story = () => {
     </Accordion>
   );
 };
-AccordionSubtle.storyName = "Subtle Variant";
+SubtleVariant.storyName = "Subtle Variant";