liqd / a4-meinberlin

The central participation platform of the city of Berlin, Germany
https://mein.berlin.de
GNU Affero General Public License v3.0
40 stars 6 forks source link

meinberlin_cms/blocks: wagtail accordion redesign #5695

Closed hom3mad3 closed 2 months ago

hom3mad3 commented 2 months ago

Redesign wagtail accordion element

In this PR, I'm setting the <details> HTML element as our go-to for accordions in the codebase, which i already used in moderator_notes.html. The BO styleguide’s accordion is overloaded with JavaScript and does a lot of complicated things just to create a simple component and improve accessibility (which the <details> element already does by default). Their accordion animation is a really nice touch, but it needs JS to work.

The new details element version is not animated, as I made the choice to forego the use of JavaScript here, though I'm open to find a compromise and try some progressive enhancement for the animation.

I've adopted a functional naming for the new Wagtail block to maintain flexibility and clarity (and consistency with the template names)

The ck-editor element is importing the BO styles, and I’m not sure if we should unify them. The issue is that ck-editor isn’t generating accessible children anyways, so I wonder if it’s more trouble than it’s worth to adapt the <details> element in there. We’d also need to figure out how to turn it into a list of accordions for better semantics.

I would tackle the ck-editor in a different PR

Screenshot 2024-09-03 at 17-26-30 meinBerlin — meinBerlin

Tasks

hom3mad3 commented 2 months ago

Looks good to me, just some remarks about translations and a general question on the process: With this pr all existing watgtail accordions will be wiped, we should check with PMs if that's ok (if not done already), otherwise I'd suggest we keep the old document block and just add the accordion block(s) as new ones, that way they can copy the old content into the new blocks more easily and once that's done we remove the old block entirely.

@CarolingerSeilchenspringer i renamed the old Docs Block in the wagtail panel to Accordion Block, which would cause all the content to be deleted. Do you still need the old blocks in there for reference? Would be lovely to get rid of it now to keep things clean and avoid having to tackle it later, so I'm also fine with adding all the content manually myself. Let me know what works for you, thanks!

hom3mad3 commented 2 months ago

@goapunk re-requesting your review on this. spoke to @CarolingerSeilchenspringer and we can merge, she will make sure we have the content backed up