EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

main
Dani Palou 2019-03-15 10:00:05 +01:00
parent 0f7fe1e8c2
commit a7bd0d2f0c
3 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/tabs/core-tabs.html
View File

@ -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>

24
src/components/tabs/tab.ts
View File

@ -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);
}
}
}

19
src/components/tabs/tabs.ts
View File

@ -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.
*/