💡 Proposal - Accordion Component
See original GitHub issueForma 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 />
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
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:10 (9 by maintainers)
Top GitHub Comments
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 🚀
@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!