ngx-bootstrap carousel - 如何修改指標，提高可訪問性

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>

通過這種方式，您可以完全控制指標，您可以根據需要設置任何樣式，並且可以對其進行修改，使其易於訪問。