Accordeon Optimization

[wueestd]

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=9989%3A50310&t=siEMKepaonFnEEmr-1

[wueestd]

pleas review @Cian77

[Cian77]

Feedback:

• Check accessibility, strokes are below 3:1
• Remove disabled states

[wueestd]

@oliverschuerch ready for frontend review!

I changed top boarder, so that we have a smooth animation in Figma, don't see this as a Frontend requirement: https://www.figma.com/proto/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?page-id=42%3A358&node-id=10293-49227&viewport=2924%2C1265%2C0.75&scaling=min-zoom

[oliverschuerch]

@wueestd Looks pretty nice to me! There is one issue I like to talk about... disabled border styles. Do we really need to set them to a light gray? Because the border has to be part of one of the accordion items (toggle-button and content-area), it's hard to tell if the upper border belongs to the item before or the disabled item itself when it's closed. Same if there is a enabled item after the disabled one.

To make my point clear: Create an accordion with 3 items, disable the second item and show me how it would look then. My suggestion: The upper border of the first item is black, the upper border of the second (disabled) item is gray, the upper border of the third item is gray and the lower border of the third item is black again.

[wueestd]

• [x] Ajust Figma implementation
• [ ] read aria disabled and discuss https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled
• [x] decied over removing disabled state

[wueestd]

@oliverschuerch I have deleted the disabled state and rearanged the stacking of the component. The element on the top will now always be on top which means the line on the bottom belongs to the element above

[oliverschuerch]

@alizedebray are you working on the accordion and do you see the possibility to add those styling changes as well?