This text is for placement only. This text is for placement only. This text is for placement only.
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 elementEnter
orSpace
= Expand/Collapse PanelShift + Tab
= Move to previous focusable element↑
↓
= Cycle headers when header focusedControl + 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
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.
This text is for placement only. This text is for placement only. This text is for placement only.