Does Paste have Accordion usage guidelines?

[Porlin]

Hey all, do you have any rules you can share on accordions? Have attached mockups on how I want to use it inside Flex

[corinne-nagel]

Hi @Porlin , We suggest that chevrons that denote expansion are positioned to the left of text. I also think it's a good idea to surface the action outside of the expanded content. From an accessibility perspective, if the entire row is clickable to expand, then you can’t have nested focusable elements / actions. If only the text is clickable, then additional actions are technically accessible but not ideal.

[Porlin]

Thanks Corinne. I have moved the chevron to the left of the text and the 'Redeploy' button in example 1440_Bulk Plugins Releases (1b).png inside the expanded content. What are your thoughts on the discoverability of the button now?

When the default behavior is having the active configuration expanded and other content closed, I worry the customer won’t discover the ability to redeploy older releases.

Is it wise to have an option to have the latest two entries expanded?

[corinne-nagel]

Hey Porlin! I think in this case it's ok to have it not open since there isn't any action you can take otherwise, it is inherent that I would need to expand the accordion to take action. As someone who isn't familiar with this page I would find it kind of confusing why one was open already.

Maybe you could add some icon indicator in the unexpanded accordion? But feel free to test this out; let me know if you have any other questions, thanks!