ngb- bootstrap ngbPanelHeader не открывает аккордеон

Question

Я ищу способ, чтобы ngbPanelHeader запускал содержимое внутри ngb-accordion для открытия / закрытия. Кажется, будто аккордеон требует, чтобы заголовок был триггером для открытия / закрытия контента.

Например, если <ng-template> в <ngb-panel> (что в <ngb-accordion>) учитывая атрибут ngbPanelTitle, он успешно запускает аккордеон, чтобы открывать / закрывать его содержимое. Однако, если тот же <ng-template> имеет атрибут ngbPanelHeader, он не будет.

Мой пример Stackblitz

Любые предложения по обходному пути будут с благодарностью!

Продолжение ответа от givenağrı

Я обнаружил, что его решение можно использовать с не кнопочными элементами, прикрепив обработчик события click к элементу, который выполняет переключение аккордеона. () и передает идентификатор элемента <ng-panel> в качестве аргумента этой функции. Я обновил Stackblitz, чтобы показать, как это можно реализовать.

Answer 1

https://stackblitz.com/edit/angular-te1eyn

ngbPanelTitle может сделать это по умолчанию для ng-bootsrap, для ваших пользовательских шаблонов вам необходимо добавить ngbPanelToggle к вашему элементу

 <button ngbPanelToggle >Panel Header That Doesn't Open Panel Content</button>

Answer 2

Продолжение не соответствует рекомендациям WCAG для аккордеона . Это означает, что это будет трудно использовать для пользователей программ чтения с экрана и некоторых других пользователей с необходимостью специальных возможностей.

Название каждого заголовка аккордеона содержится в элементе с кнопкой роли.

Когда focus находится на заголовке гармошки для свернутой панели, раскрывает связанную панель ...

Это как минимум две причины для использования элемента button. Скорее всего их больше.

Как правило - semanti c значение тегов всегда хорошее руководство при выборе того, какой элемент использовать.