💡 Proposal - Accordion Component

Forma 36 contribution proposal

The problem

In the feature that I’m working on we had to create a FAQ section for a page. But the content of around 6 questions is quite long to be always on the page, also a user may want to know about one thing only so scrolling over the other 5 questions would be annoying or make the user miss what they a looking for.

The proposed solution

Let’s create an Accordion component. It would also need an <AcordionHeader /> and an <AcordionPanel />

prototype

Accordion Header: Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content. Accordion Panel: Section of content associated with an accordion header. (taken from WAI-ARIA)

Chevron variation

We could have a prop to define two different alignments for the chevron

Hover/Focus state

For hover and focus state we can use the same styles we use in the naked button

Considering the case where the accordion has a gray background, this is how it would look

Usage

The component allows other components to be passed as a title for the accordion, but it is better to avoid abusing this feature. In most cases, a Heading or Subheading component will be enough. It’s worth to point out that there is a case in Contentful’s webapp where we have a ... button in an accordion header. I propose that his pattern should not be supported because it harms the accessibility of the component. The reason for this can be checked in the W3 docs for accordions

• The title of each accordion header is contained in an element with role button.
• Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
  • If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.
  • The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element.

Important requirements

• Accessibility following WAI-ARIA
• Possibility to pass other components to the Accordion Header

Breaking changes

Uhmmm I don’t think there is any breaking change, but maybe we would release it as an alpha component first

[joaoramos]

Good one! I advise against collapsing sections automatically when one section gets selected, if you ever consider introducing that behaviour. Otherwise, I’d move forward 🚀

[gui-santos]

@mshaaban0 oh I used I bunch of aria attributes, let me open my PR and then you point me where I can use summary and detail, thanks a lot!