Accordion

npm install @a13y/angular

import { Component } from '@angular/core';
import { AccessibleAccordionComponent } from '@a13y/angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [AccessibleAccordionComponent],
  template: `
    <accessible-accordion
      [items]="items"
      [allowMultiple]="false"
      [defaultOpenItems]="['1']"
      (toggle)="onToggle($event)">
    </accessible-accordion>
  `
})
export class DemoComponent {
  items = [
    {
      id: '1',
      title: 'What is accessibility?',
      content: 'Accessibility ensures that people with disabilities can use your website.'
    },
    {
      id: '2',
      title: 'Why is it important?',
      content: 'It makes your content available to everyone, regardless of ability.'
    },
    {
      id: '3',
      title: 'How do I get started?',
      content: 'Start by using semantic HTML and ARIA attributes.',
      disabled: false
    }
  ];

  onToggle(event: { itemId: string; isOpen: boolean }) {
    console.log('Toggled:', event);
  }
}