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.