NVDA не читает содержимое в Chrome для Angular Material

У меня есть кнопка, которая отлично читается в 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 должен читаться, но не работает. Может кто-нибудь предложить, что мне здесь не хватает.


angular-material screen-readers nvda
person poojagupta    schedule 18.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

person slugolicious    schedule 19.10.2018
comment
Может ли он добавить более подробную информацию о том, как вы ориентируетесь? Вы перемещаетесь по элементам с помощью табуляции или используете клавиши режима просмотра NVDA? - person slugolicious; 19.10.2018