fix(module:tabs): aria controls have wrong value (#8237)

Author: Nicoss54

components/tabs/style/patch.less

@@ -4,6 +4,11 @@
   position: relative;
 }
 
+.ant-tabs-tab-btn {
+  border: none;
+  background-color: unset;
+}
+
 .ant-tabs-tab a[nz-tab-link] {
   &::before {
     position: absolute;
@@ -88,10 +93,12 @@ nz-tabs-nav {
       }
     }
   }
+
   &-tab-disabled a {
     pointer-events: none;
     color: @disabled-color;
   }
+
   > .@{tab-prefix-cls}-nav,
   > div > .@{tab-prefix-cls}-nav {
     .@{tab-prefix-cls}-nav-add {

components/tabs/tab-nav-bar.component.ts

@@ -6,7 +6,7 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW, hasModifierKey } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, ENTER, hasModifierKey, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW } from '@angular/cdk/keycodes';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import {
@@ -30,7 +30,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject, animationFrameScheduler, asapScheduler, merge, of } from 'rxjs';
+import { animationFrameScheduler, asapScheduler, merge, of, Subject } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -68,9 +68,17 @@ const CSS_TRANSFORM_TIME = 150;
         nzTabScrollList
         (offsetChange)="onOffsetChange($event)"
         (tabScroll)="tabScroll.emit($event)"
+        role="tablist"
       >
         <ng-content></ng-content>
-        <button *ngIf="showAddButton" nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
+        <button
+          role="tab"
+          [attr.tabindex]="-1"
+          *ngIf="showAddButton"
+          nz-tab-add-button
+          [addIcon]="addIcon"
+          (click)="addClicked.emit()"
+        ></button>
         <div nz-tabs-ink-bar [hidden]="hideBar" [position]="position" [animated]="inkBarAnimated"></div>
       </div>
     </div>
@@ -86,7 +94,6 @@ const CSS_TRANSFORM_TIME = 150;
     </div>
   `,
   host: {
-    role: 'tablist',
     class: 'ant-tabs-nav',
     '(keydown)': 'handleKeydown($event)'
   },

components/tabs/tabset.component.ts

@@ -94,8 +94,9 @@ let nextId = 0;
         (contextmenu)="contextmenuNavItem(tab, $event)"
         *ngFor="let tab of tabs; let i = index"
       >
-        <div
+        <button
           role="tab"
+          [id]="getTabContentId(i)"
           [attr.tabIndex]="getTabIndex(tab, i)"
           [attr.aria-disabled]="tab.nzDisabled"
           [attr.aria-selected]="nzSelectedIndex === i && !nzHideAll"
@@ -114,7 +115,7 @@ let nextId = 0;
             [closeIcon]="tab.nzCloseIcon"
             (click)="onClose(i, $event)"
           ></button>
-        </div>
+        </button>
       </div>
     </nz-tabs-nav>
     <div class="ant-tabs-content-holder">
@@ -129,6 +130,9 @@ let nextId = 0;
         [style.margin-right]="getTabContentMarginRight()"
       >
         <div
+          role="tabpanel"
+          [id]="getTabContentId(i)"
+          [attr.aria-labelledby]="getTabContentId(i)"
           nz-tab-body
           *ngFor="let tab of tabs; let i = index"
           [active]="nzSelectedIndex === i && !nzHideAll"
@@ -495,8 +499,8 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
     });
   }
 
-  private isLinkActive(router: Router): (link?: RouterLink | RouterLink) => boolean {
-    return (link?: RouterLink | RouterLink) =>
+  private isLinkActive(router: Router): (link?: RouterLink) => boolean {
+    return (link?: RouterLink) =>
       link
         ? router.isActive(link.urlTree || '', {
             paths: this.nzLinkExact ? 'exact' : 'subset',