-
+
@@ -15,7 +15,7 @@
-
+
diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
index e65068f8f..e47563acc 100644
--- a/src/components/tabs/tab.ts
+++ b/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);
+ }
+ }
}
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 042f727fd..d15eec81a 100644
--- a/src/components/tabs/tabs.ts
+++ b/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.
*/