Accordion naming convention?

eirikbacker commented 2 months ago

Description

Any opinions on Accordion often being used with only one Accordion.Item? Today we require that Accordion.Item is always wrapped in a grouping component, but can it occasionally not be a group? :relaxed: See other systems operate with slightly different solutions; some call it Collapsible or Expandable so it is less related to it being in a group context.
And, there is currently no way to set that only one should be open at a time - all Accordion.Items can be opened and closed independently of each other, but maybe that is the intention? :relaxed:
Hover behind chevron: this is a design choice - marked that the designers in the Norwegian Food Safety Authority were confused by whether it was a UU requirement, but thoughts about hoover should be kept on only the chevron, or possibly the whole field?

Feedback from @Thunear :

I am often uses accordion with only 1 item on several different websites in the Digdir universe e.g. in the table of contents.
Will create an admin interface in the near future where I want only 1 accordion item in the left menu to be open at a time. Should perhaps be part of the component?
Hover on Chevron feels a bit weird, we should consider moving hover to the entire surface.

Response from @eirikbacker:

Agree - then think that Expandable is perhaps a better naming convention, as Accordion gives the expectation of grouping and one open at a time. I also think that Expandable can be used without any wrapper around it - it is entirely possible to get rounded edges etc. with pure CSS that looks for the previous and next element, so that:

<p>Some text before</p>
<Expandable>...<Expandable>
<Expandable>...<Expandable>
<p>Some text after</p>

will "connect with each other" and run as a group, while

<p>Some text before</p>
<Expandable>...<Expandable>
<p>Some text between</p>
<Expandable>...<Expandable>
<p>Some text after</p>

rendered separately. The only annoying thing is that you then have to color each Expandable:

<p>Some text before</p>
<Expandable color="brand1">...<Expandable>
<Expandable color="brand1">...<Expandable>
<p>Some text after</p>

Alternatively, we can offer an Expandable.Group to have a quick way to wrap everyone, but that it is optional. It can be nice, but also a little assessment of how much we should do for people, because they will anyway often loop over content when they generate such groupings, and then they can put props there immediately (a bit the same as we landed on in ToggleGroup).

Regarding one open Expandable at a time; If we implement on top of native <details>, we can offer name="..." to group - when several Expandables have the same name, they are automatically linked together - in exactly the same way as input type="radio" works :relaxed :

eirikbacker commented 2 months ago

mrosvik commented 2 months ago

ARIA skiller mellom "Accordion" og "Disclosure": https://www.w3.org/WAI/ARIA/apg/patterns/

eirikbacker commented 2 months ago

...og HTML kaller det details - "the details disclosure element" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details Se også første notis fra W3C spesifikasjonen: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element:the-details-element-2

digdir / designsystemet