ngx-bootstrap carousel - how to modify indicators, improve accessibility

Question

I'm using "ngx-bootstrap": "^3.1.3", carousel component. I'd like to make my website more accessible for people with disabilities. Unfortunately I can't find a way to modify slide indicators so that they could be accessible using keyboard. Is there a way to do it?

Here's what I got:

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

And what I want:

<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

I found a workaround. Basically I did hide original indicators and created my own.

<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>

This way you got total control over indicators and you can style it whatever you want and you can modify it way it will be accessible.