javascriptangularaccessibilityngx-bootstrap

How to modify NGX Bootstrap carousel indicators to improve accessibility?


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>

Solution

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