ARIA IDs are not unique

[nathanhere]

Describe the bug

Successive Collapsable components are using the same collapsible-trigger & collapsible-content id during NextJS static builds. Flagged by Google Lighthouse as accessibility issue: "ARIA IDs are not unique." Note: Not all Collapsible instances are using the same ID, just some. This phenomenon is not always consistent (e.g. Given 3 Collapsible instances, sometimes the first two instances the same ID, but sometimes the last two instances share the same ID).

To Reproduce

Steps to reproduce the behavior:

1. Code up several successive Collapsable components (Note that I'm using Bootstrap-React lib for some components shown in the code below)

<>
  <Collapsible
    containerElementProps={{ id: `card-collapsible-1`, lang: 'en' }}
    trigger={
      <Card.Header>
        <Row>
          <Col md="auto">
            <span style={{textAlign: 'center'}}>
              Some Text 1
            </span>
          </Col>
        </Row>
      </Card.Header>
    }
    easing='ease-out'
    transitionTime={250}
    open={false}
  >
    <Card.Body>
      <div>
        Some Content 1
      </div>
    </Card.Body>
  </Collapsible>

  <Collapsible
    containerElementProps={{ id: `card-collapsible-2`, lang: 'en' }}
    trigger={
      <Card.Header>
        <Row>
          <Col md="auto">
            <span style={{textAlign: 'center'}}>
              Some Text 2
            </span>
          </Col>
        </Row>
      </Card.Header>
    }
    easing='ease-out'
    transitionTime={250}
    open={false}
  >
    <Card.Body>
      <div>
        Some Content 2
      </div>
    </Card.Body>
  </Collapsible>

  <Collapsible
    containerElementProps={{ id: `card-collapsible-3`, lang: 'en' }}
    trigger={
      <Card.Header>
        <Row>
          <Col md="auto">
            <span style={{textAlign: 'center'}}>
              Some Text 3
            </span>
          </Col>
        </Row>
      </Card.Header>
    }
    easing='ease-out'
    transitionTime={250}
    open={false}
  >
    <Card.Body>
      <div>
        Some Content 3
      </div>
    </Card.Body>
  </Collapsible>
</>

2. Build in nextJS
3. Inspect elements containing collapsible-trigger and collapsible-content

Expected behavior

collapsible-trigger and collapsible-content ids should be unique per Collapsible component

Screenshots

In the screenshot below, note that id=collapsible-trigger-1645058813832 and aria-controls=collapsible-content-1645058813832 are both present in the components with id's product-card-collapsible-2 and product-card-collapsible-3. product-card-collapsible-1 is unique, but is not shown in this screenshot. It contains the value id=collapsible-trigger-1645058813831 & aria-controls="collapsible-content-1645058813831", which is only a .001 second earlier (2022-02-17T00:46:53.831Z vs 2022-02-17T00:46:53.832Z), seeing that the Id's in this library are generated using Date.now().

Additional context

It seems like the assumption in using Date.now() to generate unique collapsible id's:

react-collapsible/src/Collapsible.js

Line 12 in 73d20a2

this.contentId = `collapsible-content-${Date.now()}`;

react-collapsible/src/Collapsible.js

Line 13 in 73d20a2

this.triggerId = props.triggerElementProps.id || `collapsible-trigger-${Date.now()}`;

was that each instance generated would have enough time apart to be unique, however an exceptionally fast build process would break this assumption, in theory. And somehow I think NextJS may be building the Collapsible instances extremely fast during static builds, so it's not a stretch to find two successive Collapsible instances sharing the same ARIA ID if they are generated via Date.now().

If this is indeed the case, the issue could be easily fixed by providing an option to supply our own ID to be appended to collapsible-trigger and collapsible-content.