Я использую группу mat-tab-group из https://material.angular.io/components/tabs/overview.(used комплексный подход к меткам с ng-template)
Вкладка содержит имя вкладки и кнопку закрытия вкладки.
Всякий раз, когда я фокусирую вкладку, она читает как метки арии имени, так и кнопку. Когда вкладка находится в фокусе, она должна читать только имя, но не метку арии кнопки закрытия. Когда вкладка в данный момент находится в фокусе, а затем щелчок по вкладке будет фокусировать кнопку закрытия, в это время он должен прочитать метку aria кнопки закрытия.
Как это сделать?
Код:
<mat-tab-group dynamicHeight [(selectedIndex)]="activeTabIndex" (selectedTabChange)="changetab($event)">
<mat-tab *ngFor="let tab of Tabs; let i = index" [label]="tab.name" [attr.sortColumn]="tab.sortBy" [attr.sortOrder]="tab.sortOrder"
[attr.viewId]="tab.id" [attr.viewObjectID]="tab.viewObjectId" attr.aria-label="{{tab.name}}">
<ng-template mat-tab-label>
<div class="tab-container">
<div class="somestyle">
<span class="tab-name" [matTooltip]="tab.name">{{tab.name}}</span>
</div>
<button mat-icon-button tabindex="0" id="{{tab.id}}" class="close-btn" (keyup)="closeTab($event,view)" (click)="closeTab($event,view)" attr.aria-label="{{closetab}}">
<mat-icon class="material-icons">cancel</mat-icon>
</button>
</div>
</ng-template>
</mat-tab>
The output of this : I am using "jaws" for screen reading tool. When we focus on tab, it reads tab name and close button label ( attr.aria-label="{{tab.name}}" and attr.aria-label="{{closetab}}").
