Build an Interactive UI Element: Implement an Accessible Accordion Component
Question Details
Problem
Build a reusable Accordion component in vanilla JavaScript (or React). Each section has a header and collapsible content. Only one section can be open at a time. Clicking an open header collapses it.
Requirements:
- Toggle open/closed state on header click.
- Only one panel open at a time (single-expand mode).
- Keyboard accessible: Enter/Space opens/closes; Arrow keys navigate between headers.
- Animate expand/collapse with CSS transitions on max-height.
html
<!-- Expected DOM structure -->
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">Section 1</button>
<div class="accordion-panel" hidden>Content 1</div>
</div>
...
</div>
javascript
function initAccordion(container) {
// wire up event listeners and ARIA attributes
}
Example behavior:
Click "Section 1" -> panel 1 opens, aria-expanded=true
Click "Section 2" -> panel 2 opens, panel 1 closes
Click "Section 2" again -> panel 2 closes
Follow-ups
- How would you support multi-expand mode as a configuration option?
- What ARIA attributes are required for full screen reader compatibility?
- How do you handle dynamic content added to panels after initialization?
- How would you write a unit test for the keyboard navigation behavior?
Full Details
Problem
Build a reusable Accordion component in vanilla JavaScript (or React). Each section has a header and collapsible content. Only one section can be open at a time. Clicking an open header collapses it.
Requirements:
- Toggle open/closed state on header click.
- Only one panel open at a time (single-expand mode).
- Keyboard accessible: Enter/Space opens/closes; Arrow keys navigate between headers.
- Animate expand/collapse with CSS transitions on max-height.
html
<!-- Expected DOM structure -->
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">Section 1</button>
<div class="accordion-panel" hidden>Content 1</div>
</div>
...
</div>
javascript
function initAccordion(container) {
// wire up event listeners and ARIA attributes
}
Example behavior:
Click "Section 1" -> panel 1 opens, aria-expanded=true
Click "Section 2" -> panel 2 opens, panel 1 closes
Click "Section 2" again -> panel 2 closes
Follow-ups
- How would you support multi-expand mode as a configuration option?
- What ARIA attributes are required for full screen reader compatibility?
- How do you handle dynamic content added to panels after initialization?
- How would you write a unit test for the keyboard navigation behavior?