docs(accordion): update documentation examples to ensure a11y compliance

Sage · Jan 23, 2025 · eedcfe4 · eedcfe4
1 parent 3e1b872
commit eedcfe4
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
@@ -130,25 +130,25 @@ DifferentWidth.storyName = "Custom Width";
 export const WithDifferentPaddingAndMargin: 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>
     </>
@@ -159,25 +159,25 @@ WithDifferentPaddingAndMargin.storyName = "With Custom Padding And Margins";
 export const WithDifferentPaddingAndMarginInAccordionTitle: 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>
     </>
@@ -214,13 +214,17 @@ Grouped.storyName = "Grouped";
 export const WithValidationIcon: Story = () => {
   return (
     <AccordionGroup>
-      <Accordion title="Heading" expanded error="This is an error state">
+      <Accordion title="First Heading" expanded 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
+        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 info="This is an info state">
         <Typography>Content</Typography>
       </Accordion>
     </AccordionGroup>