From 8309073e69a354626411b9643cab8e6e56629fd2 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Wed, 15 Nov 2023 14:30:10 +0100
Subject: [PATCH] Fix(web-react): Accordion DOM errors #DS-948

- Fixed errors about labelledById in console
- Fixed basic accordion demo (all items could be opened, not just one
as in other demo)
---
 .../Accordion/demo/AccordionBasic.tsx         | 26 +++++-----------
 .../demo/AccordionOneItemOpenAtATime.tsx      | 30 ++++---------------
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/packages/web-react/src/components/Accordion/demo/AccordionBasic.tsx b/packages/web-react/src/components/Accordion/demo/AccordionBasic.tsx
index 6cc092d780..6c3641786d 100644
--- a/packages/web-react/src/components/Accordion/demo/AccordionBasic.tsx
+++ b/packages/web-react/src/components/Accordion/demo/AccordionBasic.tsx
@@ -9,7 +9,7 @@ import AccordionItem from '../AccordionItem';
 import toggleValueByType from './toggleValueByType';
 
 const AccordionBasic = () => {
-  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample0');
+  const [openState, setOpenState] = useState<AccordionOpenStateType>(['AccordionItemExample0']);
 
   const toggle = (id: string) => {
     setOpenState(toggleValueByType(id, openState));
@@ -18,10 +18,8 @@ const AccordionBasic = () => {
   return (
     <Accordion open={openState} toggle={toggle}>
       <AccordionItem id="AccordionItemExample0">
-        <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
-          Accordion Item no. 1
-        </AccordionHeader>
-        <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
+        <AccordionHeader>Accordion Item no. 1</AccordionHeader>
+        <AccordionContent>
           Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae
           curabitur odio leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at
           sem, mauris aenean aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus
@@ -33,8 +31,6 @@ const AccordionBasic = () => {
       </AccordionItem>
       <AccordionItem id="AccordionItemExample1">
         <AccordionHeader
-          id="AccordionItemExample1Header"
-          for="AccordionItemExample1Content"
           slot={
             <>
               <Link href="/">Link</Link>
@@ -44,7 +40,7 @@ const AccordionBasic = () => {
         >
           Accordion Item no. 2
         </AccordionHeader>
-        <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header">
+        <AccordionContent>
           Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque
           non nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum
           consectetur porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare
@@ -54,10 +50,8 @@ const AccordionBasic = () => {
         </AccordionContent>
       </AccordionItem>
       <AccordionItem id="AccordionItemExample2">
-        <AccordionHeader id="AccordionItemExample2Header" for="AccordionItemExample2Content">
-          Accordion Item no. 3
-        </AccordionHeader>
-        <AccordionContent id="AccordionItemExample2Content" labelledById="AccordionItemExample2Header">
+        <AccordionHeader>Accordion Item no. 3</AccordionHeader>
+        <AccordionContent>
           Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae
           curabitur odio leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at
           sem, mauris aenean aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus
@@ -68,15 +62,11 @@ const AccordionBasic = () => {
         </AccordionContent>
       </AccordionItem>
       <AccordionItem id="AccordionItemExample3">
-        <AccordionHeader
-          id="AccordionItemExample3Header"
-          for="AccordionItemExample3Content"
-          slot={<Pill color="selected">3</Pill>}
-        >
+        <AccordionHeader slot={<Pill color="selected">3</Pill>}>
           Augue iaculis, quis ante sapien aliquam aliquam non cursus, vestibulum nunc ipsum maximus. Libero sed non
           nulla, condimentum lorem ipsum molestie integer curabitur rutrum curabitur, tellus pulvinar libero tempus
         </AccordionHeader>
-        <AccordionContent id="AccordionItemExample3Content" labelledById="AccordionItemExample3Header">
+        <AccordionContent>
           Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque
           non nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum
           consectetur porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare
diff --git a/packages/web-react/src/components/Accordion/demo/AccordionOneItemOpenAtATime.tsx b/packages/web-react/src/components/Accordion/demo/AccordionOneItemOpenAtATime.tsx
index a885a6cabd..ff0a9622f4 100644
--- a/packages/web-react/src/components/Accordion/demo/AccordionOneItemOpenAtATime.tsx
+++ b/packages/web-react/src/components/Accordion/demo/AccordionOneItemOpenAtATime.tsx
@@ -16,14 +16,8 @@ const AccordionOneItemOpenAtATime = () => {
   return (
     <Accordion open={openState} toggle={toggle} id="AccordionExample">
       <AccordionItem id="AccordionItemExample4">
-        <AccordionHeader id="AccordionItemExample4Header" for="AccordionItemExample4Content">
-          Accordion Item no. 1
-        </AccordionHeader>
-        <AccordionContent
-          id="AccordionItemExample4Content"
-          labelledById="AccordionItemExample4Header"
-          parent="#AccordionExample"
-        >
+        <AccordionHeader>Accordion Item no. 1</AccordionHeader>
+        <AccordionContent>
           Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae
           curabitur odio leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at
           sem, mauris aenean aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus
@@ -34,14 +28,8 @@ const AccordionOneItemOpenAtATime = () => {
         </AccordionContent>
       </AccordionItem>
       <AccordionItem id="AccordionItemExample5">
-        <AccordionHeader id="AccordionItemExample5Header" for="AccordionItemExample5Content">
-          Accordion Item no. 2
-        </AccordionHeader>
-        <AccordionContent
-          id="AccordionItemExample5Content"
-          labelledById="AccordionItemExample5Header"
-          parent="#AccordionExample"
-        >
+        <AccordionHeader>Accordion Item no. 2</AccordionHeader>
+        <AccordionContent>
           Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque
           non nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum
           consectetur porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare
@@ -51,14 +39,8 @@ const AccordionOneItemOpenAtATime = () => {
         </AccordionContent>
       </AccordionItem>
       <AccordionItem id="AccordionItemExample6">
-        <AccordionHeader id="AccordionItemExample6Header" for="AccordionItemExample6Content">
-          Accordion Item no. 3
-        </AccordionHeader>
-        <AccordionContent
-          id="AccordionItemExample6Content"
-          labelledById="AccordionItemExample6Header"
-          parent="#AccordionExample"
-        >
+        <AccordionHeader>Accordion Item no. 3</AccordionHeader>
+        <AccordionContent>
           Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae
           curabitur odio leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at
           sem, mauris aenean aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus