Details / Accessibility

This component handle the appropriate semantic markup internally (including auto generated id between the summary and detail-section).

You still have to make sure that you use the right headingLevel relative to the context where the component is actual is rendered.

<Details
  headingLevel={2} // 👈 relative heading level
  summary='More on how useEffect works'
>
  <p>
    Here are som information regarding the question.
  </p>
</Details>

Multiple details

When using multiple details together, wrap the multiple details in the <DetailsList>-component. This will see to that:

Correct semantics, using <ul> + <li> elements
Spacing between Detail-elements

<DetailsList>
  <Details
    headingLevel={2}
    summary='Read more about react'
  >
    <p>
      Here are som information regarding the question.
    </p>
  </Details>
  <Details
    headingLevel={2}
    summary='Read more about react-dom'
  >
    <p>
      Here are som information regarding the question.
    </p>
  </Details>
</DetailsList>