Skip to content

Instantly share code, notes, and snippets.

@rajeshbosak

rajeshbosak/trap_focus.js

Forked from myogeshchavan97/trap_focus.js
Created August 24, 2020 09:37
Show Gist options
  • Save rajeshbosak/c7b69fb5219c4920a39e64601b91e0c8 to your computer and use it in GitHub Desktop.
Save rajeshbosak/c7b69fb5219c4920a39e64601b91e0c8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @myogeshchavan97 myogeshchavan97 revised this gist Apr 6, 2020. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions trap_focus.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,9 @@ const focusableElements =
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    const modal = document.querySelector('#exampleModal'); // select the modal by it's id

    const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]); // get first element to be focused inside modal
    const focusableContent = modal.querySelectorAll(focusableElements));
    const lastFocusableElement = focusableContent[focusableContent.length - 1]); // get last element to be focused inside modal
    const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
    const focusableContent = modal.querySelectorAll(focusableElements);
    const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal


    document.addEventListener('keydown', function(e) {
    @@ -17,12 +17,12 @@ document.addEventListener('keydown', function(e) {

    if (e.shiftKey) { // if shift key pressed for shift + tab combination
    if (document.activeElement === firstFocusableElement) {
    lastFocusableElement.focus();
    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();
    firstFocusableElement.focus(); // add focus for the first focusable element
    e.preventDefault();
    }
    }
  2. @myogeshchavan97 myogeshchavan97 created this gist Apr 6, 2020.
    31 changes: 31 additions & 0 deletions trap_focus.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    // add all the elements inside modal which you want to make focusable
    const focusableElements =
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    const modal = document.querySelector('#exampleModal'); // select the modal by it's id

    const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]); // get first element to be focused inside modal
    const focusableContent = modal.querySelectorAll(focusableElements));
    const lastFocusableElement = focusableContent[focusableContent.length - 1]); // get last element to be focused inside modal


    document.addEventListener('keydown', function(e) {
    let 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();
    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();
    e.preventDefault();
    }
    }
    });

    firstFocusableElement.focus();