Nesting collapsibles

[jonsterling]

Thanks for this nicely written package! I am having a bit of difficulty understanding how to use multiple collapsibles when nested; in particular, there is a need to associate a given region to a specific collapsible. Consider the following structure:

<aria-collapsible open>
  <button control>toggle 1</button>
  <div region>region 1</div>
  <aria-collapsible open>
    <button control>toggle 1</button>
    <div region>region 2</div>
  </aria-collapsible>
</aria-collapsible>

The expected behaviour of hitting toggle 1 is that the div region 1 disappears. The actual behaviour is that both divs region 1 and region 2 disappear.

It strikes me that within the scope of a given aria-collapsible element, any regions should be "isolated" from aria-collapsible elements at higher levels. Alternatively, the relation might be encoded by some kind of id.

Is there a way to achieve what I am trying to do?

[jonsterling]

I have found, for example, that changing the code for constructor() to the following achieves my desired behaviour:

  constructor() {
    super();

    this.#control = this.querySelector("[control]");

    const regionsUnder = (node) => [...node.querySelectorAll("[region]")];
    const collapsiblesUnder = (node) => [...node.querySelectorAll(this.tagName)];

    const regionsToRemove = collapsiblesUnder(this).flatMap(regionsUnder);
    this.#regions = regionsUnder(this).filter((region) => !regionsToRemove.includes(region) );

    this.#configured = this.#control && this.#regions.length;
  }