search

db-ui / mono

DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs
https://db-ui.github.io/mono/review/main/
Apache License 2.0
39 stars 6 forks source link

Accordion use input(type=radio/checkbox) instead of details/summary #2402

Open nmerget opened 3 months ago

nmerget commented 3 months ago

We should consider switching to details/summary for accordion to get rid of the JS implementation for Accordion.

Initially saw it here: https://daisyui.com/components/accordion/ (working with CSS only)

^----- Current idea from my side:

<ul class="db-accordion">
<li class="db-accordion-item">
<label><input type="checkbox" name="acc"/>Title</label>
... Slot ...
</li>
<li class="db-accordion-item">
<label><input type="checkbox" name="acc"/>Title</label>
... Slot ...
</li>
</ul>

In case of using this, we would need to further enhance it via aria--attributes. Or keep the existing details/summary, if we know the timeline regarding Firefox's name-attribute support.

mfranzke commented 3 months ago

@nmerget could you please provide a link to an article, gist or whatever, if a ressource like this already exists?

bruno-sch commented 3 months ago

Behaviour multiple can be implemented with checkboxes. Behaviour single requires radio buttons.

A pure CSS solution unfortunately seems limited to me: Since radio buttons cannot be unchecked without JS, there is no way to close the opened item by clicking on it (behaviour single).

Both variants can be seen here: https://codepen.io/alvarotrigo/pen/dyJbqpd