Implementation of Collapse

[markusjwetzel]

In order to ensure accessibility for the Collapse component, we need a connection between the collapsible area and the toggler. In comparison to a dropdown the toggler is not necessary next to the collapsible area.

1) injectCollapse function

const [TogglerButton, Collapse] = injectCollapse('button');

function Component() {
 return (
 <>
 <TogglerButton>Action</TogglerButton>
 <Collapse>Show collapsible content</Collapse>
 </>
 );
}

We need to make sure that TogglerButton and Collapse have a shared state, which is possible, but might be hacky.

2) useCollapse hook

function Component() {
 const [TogglerButton, Collapse] = useCollapse('button');

 return (
 <>
 <TogglerButton>Action</TogglerButton>
 <Collapse>Show collapsible content</Collapse>
 </>
 );
}

or

function Component() {
 const [togglerProps, Collapse] = useCollapse('button');

 return (
 <>
 <button {...togglerProps}>Action</button>
 <Collapse>Show collapsible content</Collapse>
 </>
 );
}

---

In addition we need to think about how we can implement a wrapping Accordion component.