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

MOBILE-4065 a11y: Display tabbed element if behind collapsible footer

main
Dani Palou 2022-11-18 13:09:59 +01:00
parent 16e137bf57
commit d66effda8e
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/core/directives/collapsible-footer.ts
View File

@ -54,6 +54,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
protected viewportPromise?: CoreCancellablePromise<void>; protected viewportPromise?: CoreCancellablePromise<void>;
protected loadingHeight = false; protected loadingHeight = false;
protected pageDidEnterListener?: EventListener; protected pageDidEnterListener?: EventListener;
protected keyUpListener?: EventListener;
protected page?: HTMLElement; protected page?: HTMLElement;
constructor(el: ElementRef, protected ionContent: IonContent) { constructor(el: ElementRef, protected ionContent: IonContent) {
@ -83,7 +84,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
this.calculateHeight(); this.calculateHeight();
}); });
this.listenScrollEvents(); this.listenEvents();
} }
/** /**
@ -120,9 +121,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
} }
/** /**
* Setup scroll event listener. * Setup event listeners.
*/ */
protected async listenScrollEvents(): Promise<void> { protected async listenEvents(): Promise<void> {
if (!this.content || this.content?.classList.contains('has-collapsible-footer')) { if (!this.content || this.content?.classList.contains('has-collapsible-footer')) {
return; return;
} }
@ -185,6 +186,17 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
this.calculateHeight(); this.calculateHeight();
}, },
); );
// Handle scroll when navigating using tab key and the selected element is behind the footer.
this.content.addEventListener('keyup', this.keyUpListener = (ev: KeyboardEvent) => {
if (ev.key !== 'Tab' || !document.activeElement) {
return;
}
if (document.activeElement.getBoundingClientRect().bottom > this.element.getBoundingClientRect().top) {
document.activeElement.scrollIntoView({ block: 'center' });
}
});
} }
/** /**
@ -259,6 +271,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
if (this.endContentScrollListener) { if (this.endContentScrollListener) {
this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener); this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
} }
if (this.keyUpListener) {
this.content.removeEventListener('keyup', this.keyUpListener);
}
} }
if (this.page && this.pageDidEnterListener) { if (this.page && this.pageDidEnterListener) {