Accordions component can be imported via the @bugcrowd/bc-elements package.

For example:

import { BcAccordion } from '@bugcrowd/bc-elements'

BcAccordion Props

Any extended types: No

BcAccordion.Item

Individual accordion item amongst many.

BcAccordion.Item Props

Any extended types: React.HTMLAttributes<HTMLDivElement>

BcAccordion.Header

Wrapper to hold header title for accordion.

Any extended types: React.AnchorHTMLAttributes<HTMLAnchorElement>

BcAccordion.Content

Wrapper to hold content like text or description.

Any extended types: React.HTMLAttributes<HTMLDivElement>

Add .bc-accordions ideally to a <ul> or <ol>. Nest accordions inside the list items.

Items

Accordions items receives the .bc-accordion and .bc-panel classes. This means you can in part style them as a group via .bc-panels plural class and its variants.

.bc-accordion--open: Add visual changes to indicate the accordion is currently open.

.bc-accordion__title: This element is an anchor; it toggles the accordion’s contents.

.bc-accordion__main It is toggled open by toggling the accordion title element. This block is hidden by default through aria-expanded and aria-hidden.

The default state for an accordion is a closed state.

Sections and accordions that start closed give the user an overview of all content.

You can set sections to start and stay open, if the user leaves then returns to the page.

Accordions must use semantic <ul> or <ol> markup. To make an accordion more accessible and to providing an inclusive user experience:

• Provide clear and descriptive headings for each accordion section.
• Use semantic HTML elements such as <a> for accordion headers and <div> for content panels. This aids in conveying the interactive nature of accordion elements to assistive technologies.
• Use ARIA roles and attributes, like aria-expanded, aria-hidden and aria-controls, to convey the state and relationship of accordion sections to screen readers.

For general help with accessibility, see the WAI Authoring Practices Guide.

Use accordions to hide some content in complex designs where the accordion’s content is important but not vital to be displayed initially.

⚠️ Title support: the accordion title content is currently built to rely on the padding offset of the Icon Component. If .bc-icon isn’t used the title will be out of alignment with the accordion main body content.

Guidance on multiple accordions

You can group accordions, ideally in a list. When doing so give your list container (the <ul> or <ol>) an ARIA role of tablist. Place the accordion component inside the list item (<li>).

Accordions receive the .bc-accordion and .bc-panel classes. This means you can in part style them as a group via .bc-panels plural class and its variants.

Remember to pass unique IDs to each accordion.

Users can open multiple accordions simultaneously (this component does not close other already open accordions).

Possible feature idea: it may be desirable to provide bulk open/close functionality for large groups of accordions.

Open accordions on initial load

Accordions can add friction to accessing information and navigating a user interface.

Accordions can be set to be open by default by providing the openOnLoad property.

It is important to retain discoverability when placing user interface controls within an accordion.

For example: when providing retry buttons to a list of events that have fired, consider having the most recent event’s data and controls already open upon page-load. This way the open accordion’s content allude to the respective controls within each of the subsequent events that are closed in the accordion list.

• Tabs (Navigation)