EVOgeek
/
Vmeda.Online
1
0
Fork 0
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 loadingHeight = false;
protected pageDidEnterListener?: EventListener;
protected keyUpListener?: EventListener;
protected page?: HTMLElement;
constructor(el: ElementRef, protected ionContent: IonContent) {
@ -83,7 +84,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
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')) {
return;
}
@ -185,6 +186,17 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
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) {
this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
}
if (this.keyUpListener) {
this.content.removeEventListener('keyup', this.keyUpListener);
}
}
if (this.page && this.pageDidEnterListener) {