Карусель ngx-bootstrap - как изменить индикаторы, улучшить доступность

Question

Я использую "ngx-bootstrap": "^3.1.3", компонент карусели.Я хотел бы сделать мой сайт более доступным для людей с ограниченными возможностями.К сожалению, я не могу найти способ изменить индикаторы слайдов, чтобы они были доступны с клавиатуры.Есть ли способ сделать это?

Вот что я получил:

<ol class="carousel-indicators ng-star-inserted">
    <li class="ng-star-inserted"></li>
    <li class="ng-star-inserted active"></li>
</ol>

И что я хочу:

<ol class="carousel-indicators ng-star-inserted">
  <li class="ng-star-inserted" tabindex="0" role="button" aria-pressed="false"></li>
  <li class="ng-star-inserted active" tabindex="0" role="button" aria-pressed="true"></li>
</ol>

Answer 1

Я нашел обходной путь.По сути, я скрыл исходные индикаторы и создал свои собственные.

<carousel [noPause]="false" [(activeSlide)]="activeSlide" [showIndicators]="false">
      <slide *ngFor="let item of items">
      ...
      </slide>
  <!-- add this -->
  <div class="indicators">
    <button *ngFor="let item of items; let i = index" type="button" class="indicator"
            [class.active]="i === activeSlide" [attr.aria-pressed]="i === activeSlide"
            (click)="switchSlide(i)"></button>
  </div>
 <!-- /add this -->
</carousel>

Таким образом, вы получили полный контроль над индикаторами, вы можете стилизовать их так, как хотите, и можете изменять их так, чтобы они были доступны.