NVDA не читает контент в Chrome для угловых материалов

Question

У меня есть кнопка, которая хорошо читается в Mozilla, но в Chrome она не работает.

 <div *ngFor="let product of products; let pIndex=index">
    <mat-card [ngClass]="{'disablesidebar':showOverlay}">
      <img mat-card-image (click)="onClickAddOn(product)" src="{{IMAGE_PATH}}/products/{{product.imageURL}}" alt="seat selection">
      <mat-card-content>
        <p>
          {{ product.productName }}
        </p>
      </mat-card-content>
      <button id="addSeatButton" mat-mini-fab color role="presentation" aria-label="'Seat Selection'" (click)="onClickAddOn(product)"
        tabindex="6" class="rbtn-floating">
        <i class="material-icons">add</i>
      </button>
    </mat-card>
  </div>

Кнопка addSeatButton id должна читать, но не работает, Может кто-нибудь подсказать, что мне здесь не хватает.

Answer 1

Я подозреваю, что самая большая проблема - ваша role="presentation" на кнопке.Это говорит программе чтения с экрана, что кнопка больше не является кнопкой.Он удаляет семантику и по существу становится <span>.Попробуйте удалить role.