MOBILE-2819 tabs: Fix wrong aria-hidden in core-tabs

Author: dpalou

src/components/tabs/core-tabs.html

@@ -1,7 +1,7 @@
 <core-loading [hideUntil]="hideUntil" class="core-loading-center">
     <div class="core-tabs-bar" #topTabs [hidden]="!tabs || numTabsShown < 2" id="core-tabs-bar">
         <ion-row>
-            <ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-1 aria-hidden="true">
+            <ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-1>
                 <ion-icon *ngIf="showPrevButton" name="arrow-back" md="ios-arrow-back"></ion-icon>
             </ion-col>
             <ion-col no-padding col-10>
@@ -15,7 +15,7 @@
                     </ng-container>
                 </ion-slides>
             </ion-col>
-            <ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-1 aria-hidden="true">
+            <ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-1>
                 <ion-icon *ngIf="showNextButton" name="arrow-forward" md="ios-arrow-forward"></ion-icon>
             </ion-col>
         </ion-row>

src/components/tabs/tab.ts

@@ -55,9 +55,7 @@ export class CoreTabComponent implements OnInit, OnDestroy {
 
             if (this.initialized && hasChanged) {
                 this.tabs.tabVisibilityChanged();
-
-                this.tabElement = document.getElementById(this.id + '-tab');
-                this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
+                this.updateAriaHidden();
             }
         }
     }
@@ -96,8 +94,7 @@ export class CoreTabComponent implements OnInit, OnDestroy {
         this.initialized = true;
 
         setTimeout(() => {
-            this.tabElement = document.getElementById(this.id + '-tab');
-            this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
+            this.updateAriaHidden();
         }, 1000);
     }
 
@@ -116,8 +113,8 @@ export class CoreTabComponent implements OnInit, OnDestroy {
 
         this.tabElement = this.tabElement || document.getElementById(this.id + '-tab');
 
+        this.updateAriaHidden();
         this.tabElement && this.tabElement.setAttribute('aria-selected', true);
-        this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
 
         this.loaded = true;
         this.ionSelect.emit(this);
@@ -137,8 +134,8 @@ export class CoreTabComponent implements OnInit, OnDestroy {
      * Unselect tab.
      */
     unselectTab(): void {
+        this.updateAriaHidden();
         this.tabElement && this.tabElement.setAttribute('aria-selected', false);
-        this.tabElement && this.tabElement.setAttribute('aria-hidden', true);
 
         this.element.classList.remove('selected');
         this.showHideNavBarButtons(false);
@@ -176,4 +173,17 @@ export class CoreTabComponent implements OnInit, OnDestroy {
             instances[i].forceHide(!show);
         }
     }
+
+    /**
+     * Update aria hidden attribute.
+     */
+    updateAriaHidden(): void {
+        if (!this.tabElement) {
+            this.tabElement = document.getElementById(this.id + '-tab');
+        }
+
+        if (this.tabElement) {
+            this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
+        }
+    }
 }

src/components/tabs/tabs.ts

@@ -327,6 +327,8 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
             // Current tab has changed, don't slide to initial anymore.
             this.shouldSlideToInitial = false;
         }
+
+        this.updateAriaHidden(); // Sliding resets the aria-hidden, update it.
     }
 
     /**
@@ -354,11 +356,18 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
                     if (this.shouldSlideToInitial) {
                         this.slides.slideTo(this.selected, 0);
                         this.shouldSlideToInitial = false;
+                        this.updateAriaHidden(); // Slide's slideTo() sets aria-hidden to true, update it.
                     }
                 }, 400);
+
+                return;
             } else if (this.selected) {
                 this.hasSliddenToInitial = true;
             }
+
+            setTimeout(() => {
+                this.updateAriaHidden(); // Slide's update() sets aria-hidden to true, update it.
+            }, 400);
         });
     }
 
@@ -458,6 +467,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 
         if (this.selected) {
             this.slides.slideTo(index);
+            this.updateAriaHidden(); // Slide's slideTo() sets aria-hidden to true, update it.
         }
 
         this.selectHistory.push(index);
@@ -491,6 +501,15 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
         this.calculateSlides();
     }
 
+    /**
+     * Update aria-hidden of all tabs.
+     */
+    protected updateAriaHidden(): void {
+        this.tabs.forEach((tab, index) => {
+            tab.updateAriaHidden();
+        });
+    }
+
     /**
      * Component destroyed.
      */