0

I have a button which reads fine in Mozilla but in Chrome it is not working.

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

Button addSeatButton id should read but is not working,Can someone please suggest what am I missing here.

poojagupta
  • 982
  • 2
  • 12
  • 26

1 Answers1

0

I suspect the biggest problem is your role="presentation" on the button. That tells the screen reader that the button is no longer a button. It removes the semantics and essentially becomes a <span>. Try removing the role.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Can it add more details on how you are navigating? Are you tabbing through the elements or using the NVDA browse mode keys? – slugolicious Oct 19 '18 at 14:09