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.

Non-FAQ Accordion (default)

This text is for placement only. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.

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.

Blockchain has given rise to new markets and new ways of connecting buyers and sellers -- such as value exchange and payments options based on general-purpose cryptocurrencies (Bitcoin) or in special-purpose tokens exchangeable for goods and services (utility and stablecoin tokens). Central bank interest, the rapid emergence of these global digital assets, and the digitization of global trade have challenged existing jurisdictional approaches to regulation including taxation.

We are at the forefront of these trends exploring how Blockchain can be utilized to help implement and comply with regulation.

FAQ Accordion

Visually identical to the standard accordion, but includes FAQPage microdata for structured data support.