Accordion

[claviska]

An accordion component, much like what <sl-details> provides in this example, but with a controller to make the experience more idiomatic for React and other users.

See also: #1000

Please vote for this feature using 👍 and 👎

[masi]

Another nice-to-have is to change the behaviour of the accordion by an attribute if only one or multiple children may be open at the same time. I could use the <sl-details> but then again I have the issue of the Hx I'd like to have.

Is it possible to write a custom Shoelace component to fool around? I'm not confident right now to fork and change Shoelace directly. I assume besides Lit underneath Shoelace comes with more helpers to build new components.

[masi]

There are even examples for details/collapsible/expandable that use a proper header with a level WRAPPING the button. I am not sure if aria-level works directly on a <header> as I have only see examples with <div role="heading">.

This is more in the lines of how I'd change the HTML:

 <header
          part="header"
          id="header"
          class="details__header"
          ${this.level ? aria-level="${this.level}" : ''}
        >
  <div
           part="header-button"
           class="details__header__button"
           role="button"
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-controls="content"
           aria-disabled=${this.disabled ? 'true' : 'false'}
           tabindex=${this.disabled ? '-1' : '0'}
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
        >

The new HTML structure is probably a breaking change. So perhaps the wrapping should only be done in the new way if a level is set.

FAST lets use set the level as I have suggested. Lion lets you set the wrapper element for the button with the slot. There is no additional wrapper like <header> in Shoelace.

I think I can come up with a code for a "plain" accordion web component. But I have no idea what a controller in React terms that you say is needed for React.

[claviska]

What I want is a shadow DOM that looks like the one of the WCAG.

That's a fair ask for an accordion. While details and accordions are similar, they're semantically different and may not be interchangeable in all cases. As it stands, the Shoelace <sl-details> elements functions the same as <details> so that's going to remain consistent.

When we start work on an accordion, we'll be sure to review the [Aria APG](ARIA Authoring Practices Guide (APG)) to make sure it's accessible to as many assistive devices as possible.

[masi]

When we start work on an accordion, we'll be sure to review the [Aria APG](ARIA Authoring Practices Guide (APG)) to make sure it's accessible to as many assistive devices as possible.
I am willing to help out to write one.

I think I can create code on the basis of existing components. But I need guidance for the React conroller as I have no React experience at all.

[claviska]

The accordion will be two components: a "controller" called <sl-accordion> and items called <sl-accordion-item>. It's not a React-specific controller, but rather a pattern that React devs find easier to use compared to, say, the example where <sl-details> elements are grouped. (That's a lot harder to do in React.)

[masi]

Great.

Let me know if you want help. Can give it a try next week.