open(): void {
this.isActivate = true;
document.body.appendChild(this.element);
this.element.style.display = 'block';
document.body.classList.add('tfb-modal-open', 'body--no-scroll');
setTimeout(() => {
const focusableElements =
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modal = document.querySelector('#tfb-modal'); // select the modal by it's id
console.log("modal", modal);
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0] as HTMLInputElement;
console.log("firstFocusableElement", firstFocusableElement);
// get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements);
console.log("focusableContent", focusableContent);
let lastFocusableElement: any;
if (focusableContent.length <= 2) {
lastFocusableElement = focusableContent[focusableContent.length - 2] as HTMLInputElement;
console.log("lastFocusableElement_if", lastFocusableElement);
// get last element to be focused inside modal
} else {
lastFocusableElement = focusableContent[focusableContent.length - 1] as HTMLInputElement;
console.log("lastFocusableElement_else", lastFocusableElement);
// get last element to be focused inside modal
}
document.addEventListener('keydown', (e) => {
// tslint:disable-next-line: deprecation
const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
if (!isTabPressed) {
return;
}
if (e.shiftKey) { // if shift key pressed for shift + tab combination
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus(); // add focus for the last focusable element
e.preventDefault();
}
} else { // if tab key is pressed
if (document.activeElement === lastFocusableElement) {
// if focused has reached to last focusable element then focus first focusable
// element after pressing tab
firstFocusableElement.focus(); // add focus for the first focusable element
e.preventDefault();
}
}
});
firstFocusableElement.focus();
}, (1000));
}
Top comments (0)