Component

Accordion

SCSS Location: /styles/scss/partial/_accordion.scss

Status: Design
Status: Development
Status: Documentation

Description

Displays a condensed list of content with specific titles and descriptions grouped together. All accordion panels are closed by default - expanding when the user clicks one of the accordion section titles.

Guidelines

An accordion can be expanded or collapsed by clicking the entire header area or plus/minus icon.
Users may have multiple accordions open at once.

Usage

Accordions deliver large amounts of content in a small space through progressive disclosure, and work especially well whenever vertical space is at premium. All accordion panels are closed by default – expanding when the user clicks one of the accordion section titles.

This accordion comes with a configuration attribute, data-accordion-config-single that enables you to decide whether you want the accordion panel siblings to close or remain opened when selecting another panel. The example above is set to true.

Labelling Expectations

Each accordion header title is contained in an element with role="button".
If the accordion panel is visible, the header button element should have aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.

Focus Expectations

Headers should have visible keyboard focus state
All keyboard interactions relate to when headers are focused

Tab = Move to next focusable element
Enter or Space = Expand/Collapse Panel
Shift + Tab = Move to previous focusable element
↑ ↓ = Cycle headers when header focused
Control + Option ← → = Navigate through accordion content with screen reader

Screen Reader Expectations

When interacting with accordions, screen readers should announce the following information:

Headers
Button (or other actionable element)
Current state of Button - expanded or collapsed
Panel content will be read if navigated to

Tab Order Expectations

When navigating through an accordion, the following tab order is expected:

The next tab keypress will advance to the next Header text.
When expanded and focused, all focusable elements inside the Accordion Panel are included in the tab order.

Integrating Life & Work at Vertex

This text is for placement only. This text is for placement only. This text is for placement only.

Our Total Rewards philosophy articulates the value of a career at Vertex. It represents the broad spectrum of programs we’ve designed to reward you throughout your career.

We demonstrate our commitment to Total Rewards through:

Corporate Culture. We maintain a collaborative, friendly, and fun work environment that fosters outstanding performance, continual innovation, and a passion for understanding and addressing our customers’ needs.
Work/Life Balance. We support work/life balance, helping you manage your time and energy between work and other aspects of your life.
Career Opportunities. In both formal and informal ways, we offer opportunities for our people to learn, develop, and contribute.