Reading child element when parent is focused - accessability - angular-material

Question

I am using the mat-tab-group from https://material.angular.io/components/tabs/overview.(used complex labels approach with ng-template)
The tab contains a name of the tab and a button to close the tab.
Whenever i focus the tab, it reads both aria-labels of name and a button. When tab is focused, it should read only the name but not the close button aria label. When tab is focused currently and then clicking on tab will focus the close button, at this time it should read the close button aria label.
How to do this ?
Code:
<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}}").

Answer 1

Do you need to use aria-label at all?
The WAI-ARIA Practices document has this at the top of its "Read Me First" section:
No ARIA is better than Bad ARIA
The mat-tab-group examples simply use a text node inside the tab (which is a button with role="tab") for the accessible name. That should be adequate. Let the visual label be the accessible name, if possible.
The only reason you should use aria-label on a button is if the accessible name should be different from the button label. e.g. in cases where only an icon or unicode glyph is used as the visual label, in place of human-readable text.
In all other cases, just put the accessible name in a text node inside the button. (You may of course wrap it in span or other inline elements - as the mat-tab-group example does, if you need more refined styling).
This is true of other GUI controls too, although the visual label mechanism differs between element types. (e.g. The <input> element needs a corresponding <label>, which is both visible and understood by screenreaders because of the for attribute.)
If you must use aria-label, make sure it is on the element that gets focus, otherwise the screen readers will each try to guess what you want the accessible name to be, with unpredictable results. I suspect this is what you are experiencing.
Also, if I am not mistaken, you are adding the 'body' of the tab (including the close box) to the focusable tab itself. This is not the correct structure. Again, let the mat-tab-group example be your guide.

Answer 2

You should be able to overwrite what is read on focusing the entire tab, if you add an aria-label="Your preferred text here" to the tab element.