mat paginator: Cypress accessibility Automation

[prudhvinani]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hi All,

We are currently doing accessibility testing in cypress for MatPaginator component while doing this in local accessibility is getting passed but in the CI/CD pipeline accessibility it is failing for few scenarios. It's throwing error for matselect panel which is internal function of matpaginator saying "Ensures every id attribute value of active elements is unique" even though I have given unique Id for matpaginator it's giving error

content-details.ts file pageSize: 10; pageSizeOptions = [10, 20];

content-details.html file

   <table
    [ngClass]="{
      'min-width-table': goodsItems.length > 10
    }"
    id="table-exchange-rate"
    mat-table
    [dataSource]="goodsItemsDataSource"
    #goodsItemsSort="matSort"
    matSort
    (matSortChange)="handleProgress(constantEnum.Goods_Items, null)"
    matSortActive="Item"
    matSortDirection="asc"
    aria-describedby="shipment goods reference table"
  >
    <ng-container matColumnDef="goodsItemProgressBar">
      <td
        mat-header-cell
        [attr.colspan]="goodsItemsDisplayedColumns.length"
        *matHeaderCellDef
      >
        <mat-progress-bar
          mode="indeterminate"
          aria-label="progress bar"
        ></mat-progress-bar>
      </td>
    </ng-container>

    <ng-container matColumnDef="Item">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        arrowPosition="before"
        scope="col"
      >
        {{ 'shipmentGoodsItems.C080' | translate }}
      </th>

      <td mat-cell *matCellDef="let element; let i = index">
        <app-highlight-difference
          [valueAlign]="'right'"
          [marginTop]="'0px'"
          [width]="'60px'"
          [data1]="element"
          [key1]="'Item'"
        ></app-highlight-difference>
      </td>
    </ng-container>
    <ng-container matColumnDef="Commodity_code">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        arrowPosition="after"
        scope="col"
      >
        {{ 'shipmentGoodsItems.C026' | translate }}
      </th>

      <td mat-cell *matCellDef="let element" appShowIfTruncated>
        <app-highlight-difference
          [marginTop]="'0px'"
          [width]="'50px'"
          [data1]="element"
          [key1]="'Commodity_code'"
        ></app-highlight-difference>
      </td>
    </ng-container>

    <ng-container matColumnDef="shipmentGoodsPaginatorContainer">
      <td
        mat-mat-footer-cell
        [attr.colspan]="goodsItemsDisplayedColumns.length"
        *matFooterCellDef
      >
        <mat-paginator
          class="table-mat-paginator"
          #shipmentGoodsPaginator
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          [id]="pageSize + 1"
          [length]="goodsItems.length"
          [pageIndex]="currentPage"
          (page)="handlePageEventshipmentGoods($event)"
        ></mat-paginator>
      </td>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="goodsItemsDisplayedColumns; sticky: true"
    ></tr>

    <tr
      mat-row
      class="progress-bar"
      [hidden]="!progressBar.goodsItems.showProgress"
      *matHeaderRowDef="['goodsItemProgressBar']"
    ></tr>
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="9999">No data matching the filter</td>
    </tr>
    <tr
      mat-row
      *matRowDef="let row; columns: goodsItemsDisplayedColumns"
      (click)="routeTo(row)"
    ></tr>
    <tr
      mat-footer-row
      *matFooterRowDef="['shipmentGoodsPaginatorContainer']; sticky: true"
      [hidden]="goodsItems.length <= 10"
    ></tr>
  </table>

Reproduction

NA

Expected Behavior

No error

Actual Behavior

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):