feat(tabs/bottomNav): moving aria attributes to code (instead of template) #4297

Author: rmkrmk

projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html

@@ -3,12 +3,7 @@
 </div>
 <div #tablist class="{{itemStyle}}__menu {{itemStyle}}__menu--bottom" role="tablist" aria-orientation="horizontal">
     <ng-container *ngIf="!hasContentTabs">    
-        <igx-tab *ngFor="let panel of panels" [id]="'igx-tab-' + panel.index" [attr.aria-label]="panel.label" [attr.aria-disabled]="panel.disabled"
-            [attr.aria-selected]="panel.isSelected" [attr.aria-controls]="'igx-tab-panel-'+ panel.index" [ngClass]="{
-                    'igx-bottom-nav__menu-item': !panel.isSelected && !panel.disabled,
-                    'igx-bottom-nav__menu-item--selected': panel.isSelected,
-                    'igx-bottom-nav__menu-item--disabled': panel.disabled
-                }" [relatedPanel]="panel" (click)="panel.select()" role="tab">
+        <igx-tab *ngFor="let panel of panels" [relatedPanel]="panel" (click)="panel.select()">
         </igx-tab>
     </ng-container>
     <ng-content select="igx-tab"></ng-content>

projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts

@@ -462,6 +462,36 @@ export class IgxTabComponent {
     @HostBinding('attr.role')
     public role = 'tab';
 
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.id')
+    public id = 'igx-tab-' + this.index;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-label')
+    public ariaLabel = this.label;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-disabled')
+    public ariaDisabled = this.disabled;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-selected')
+    public ariaSelected = this.isSelected;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-controls')
+    public ariaControls = 'igx-tab-panel-' + this.index;
+
     /**
      * Gets the panel associated with the tab.
      * ```typescript

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -103,17 +103,47 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     }
 
     /**
-     * @hidden
+     * @hidden @internal
      */
     @HostBinding('attr.role')
     public role = 'tab';
 
     /**
-     * @hidden
+     * @hidden @internal
      */
     @HostBinding('attr.tabindex')
     public tabindex;
 
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.id')
+    public id = 'igx-tab-item-' + this.index;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-label')
+    public ariaLabel = this.label;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-disabled')
+    public ariaDisabled = this.disabled;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-selected')
+    public ariaSelected = this.isSelected;
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.aria-controls')
+    public ariaControls = 'igx-tab-item-group-' + this.index;
+
     /**
      * @hidden
      */
@@ -225,7 +255,9 @@ export class IgxTabItemComponent implements IgxTabItemBase {
      * @hidden
      */
     get index(): number {
-        return this._tabs.tabs.toArray().indexOf(this);
+        if (this._tabs.tabs) {
+            return this._tabs.tabs.toArray().indexOf(this);
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/tabs/tabs.component.html

@@ -7,12 +7,7 @@
         <div class="igx-tabs__header-wrapper-fixed" #viewPort>
             <div #itemsContainer class="igx-tabs__header-wrapper-fluid">
                 <ng-container *ngIf="!hasContentTabs">
-                    <igx-tab-item igxRipple *ngFor="let group of groups" [id]="'igx-tab-item-' + group.index" [attr.aria-label]="group.label"
-                        [attr.aria-disabled]="group.disabled" [attr.aria-selected]="group.isSelected" [attr.aria-controls]="'igx-tab-item-group-'+ group.index"
-                        [ngClass]="{
-                    'igx-tabs__header-menu-item': !group.isSelected && !group.disabled,
-                    'igx-tabs__header-menu-item--selected': group.isSelected,
-                    'igx-tabs__header-menu-item--disabled': group.disabled }" [relatedGroup]="group" role="tab">
+                    <igx-tab-item igxRipple *ngFor="let group of groups" [relatedGroup]="group">
                     </igx-tab-item>
                 </ng-container>
                 <ng-content select="igx-tab-item"></ng-content>