New Component: Accordion

[richardtape]

• I have performed the cursory search

Problem description
One of the most used components in the current CLF, the accordion allows content editors to create collapsible content regions.

The accordion component allows for progressive disclosure of content that is intentionally triggered by the user and allows the content editor to display critical content first.

Proposed solution
Accordions can come in two varieties:

• Standalone; each accordion acts independently from other accordions
• Grouped; Only one accordion is open at a time

The proposed solution is keyboard accessible. If the requisite JavaScript fails(or is slow) to load, the content will default to be visible - i.e. all accordions on the page will be in their 'open' state.

Consideration for responsive behaviour
There is no special responsive behaviour considerations as the width of the accordion is the width of its containing element.

The proposed solution uses class-based triggers. There will need to be extra considerations made to allow for unique IDs to be passed in a URL to be able to link to a specific accordion (and open it).

The entire title-containing element - a heading tag - should be a trigger to open/close its attached content container. The proposed solution incorporates a button element within the title element in order to provide as accessible a component as possible.

Tabbing to an accordion title will give that title focus and pressing the space bar or return will trigger the accordion.

Content within an accordion should not be focusable without the accordion being in its active state.

The accordion components allows for nested accordions with recommendations for the nested accordion titles to be one level of heading tag lower than its parent.

Consideration for accessibility
aria-expanded on the button(within the heading) is toggled depending on the state of the accordion.

The hidden attribute on the accordion content container is toggled depending on the state of the accordion. For browsers that do not support this attribute, display: none; is toggled via CSS.

In terms of visual indicator, a plus/minus icon is appended to each accordion's title. This is done via CSS and is therefore override-able by developers using this component.

Alternatives considered
Using https://github.com/matthiasott/a11y-accordion-tabs as a homogenous component which would work across tabs (which condense to accordions on smaller screens) and the two accordion scenarios outlined above was considered.

However, a11y-accordion-tabs enforces a grouped behaviour which was considered a blocker for this component.

Additional context

For demo, please see: https://codepen.io/richardtape/pen/abOEyWw

Feature Review Checklist:

• HTML Markup
• CSS
• JS (if applicable)
• Responsive Behaviour
• UX
• Design
• Web Accessibility
• Documentation