diff --git a/src/components/tabs/core-tabs.html b/src/components/tabs/core-tabs.html index 977b8899e..ec8a460a4 100644 --- a/src/components/tabs/core-tabs.html +++ b/src/components/tabs/core-tabs.html @@ -1,7 +1,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. */