Accordion - consider hidden="until-found" to allow the in-page search to find accordion content

[msayoung]

If we were to use the hidden attribute to show / hide the accordion panes, we could make use of the hidden="until-found" attribute which allows CTRL F to find content within a closed accordion.

Which I think is pretty cool.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

---

Also, while I'm looking, @markconroy do you know why we have a hidden span in the accordion pane heading?
It seems unneeed, but maybe there's a reason.

<div class="accordion-pane__title">
        <h3>
          **<span class="accordion-pane__heading" hidden="">Accordion title</span>**
          <button aria-expanded="false" aria-controls="accordion-content-0-0">
            Accordion title
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
        </h3>
      </div>

[markconroy]

Hi @msayoung

I'm moving this issue to this repo, as it's where the template resides.

1. hidden="until-found" (I'll get to this next week perhaps)
2. extra span = this is used as a no-JS fallback.

[markconroy]

Actually, we have some PRs to refactor accordion to use details/summary, which might be even better.

• [WIP] feat: refactor accordion to details and summary #220
• [WIP] feat: refactor accordion to details and summary localgov_base#708