Когда использовать
Implement interactive controls with keyboard and assistive-technology support.
Решения для реализации
- Use buttons for actions and links for navigation. Prefer native details, dialog and form controls when suitable.
- For a modal label it, move focus inside, contain focus, support Escape and restore focus to the trigger.
- Keep a live region mounted and update its text.
- Associate validation errors with fields and respect motion preferences.
Как проверить результат
- The primary flow works with keyboard only.
- Icon-only buttons have accessible names.
- Error messages identify the affected field.
Работающий пример
Good questions.
Что входит в компонент?
Семантическая разметка, видимый фокус и нативное раскрытие. Для этой задачи достаточно HTML details и summary.
Нужен ли JavaScript?
Нет. Нативный аккордеон работает с клавиатурой и без JavaScript. Атрибут name связывает элементы в группу.
Как адаптировать стиль?
Измените цвета и отступы. Сохраните видимый индикатор, контраст и область нажатия.