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