Divergent behavior observed with Bootstrap modal focus trap on official documentation website

Question

Divergent behavior observed with Bootstrap modal focus trap on official documentation website

Having an issue with Bootstrap modal not trapping focus inside the modal. Surprisingly, it works as expected on the official Bootstrap webpage here.

I've used the exact code from the Bootstrap website but for some reason, it's not working in my implementation. Any thoughts or suggestions would be greatly appreciated.

If you'd like to take a look at the code, you can find it on JS Bin: here

$('#exampleModalCenter').modal();

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba4bba6">[email protected]</a>/dist/css/bootstrap.min.css">
  <title>JS Bin</title>
</head>

<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d7c8d7d7c2d589cdd4e7968996938994">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd8c2ddc2df">[email protected]</a>/dist/js/bootstrap.min.js"></script>
</body>

</html>

javascript bootstrap-4 bootstrap-modal accessibility

Answer 1

Answer №1

Regrettably, I have faced the same issue before. Finding a neat solution proves to be challenging, leading me to resort to implementing a workaround that forces things to function as intended.

const handleTabEvent = (lastFocusableElement, firstFocusableElement) => {
  return (event) => {
    const isTabPressed = event.key === 'Tab' || event.keyCode === 9;

    if (!isTabPressed) {
      return;
    }

    if (event.shiftKey) {
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus();
        event.preventDefault();
      }
    } else if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      event.preventDefault();
    }
  };
};

const addTrapHandler = (modal) => {
  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
  const firstFocusableElement = modal.querySelector(focusableElements);
  const focusableContent = modal.querySelectorAll(focusableElements);
  const lastFocusableElement = focusableContent[focusableContent.length - 1];

  document.addEventListener('keydown', handleTabEvent(lastFocusableElement, firstFocusableElement));
};

const initTrap = (modals) => {
  modals.forEach((modal) => {
    addTrapHandler(modal);
  });
};

document.addEventListener('DOMContentLoaded', () => {
  const modals = document.querySelectorAll('.modal');
  initTrap(modals);
});

Answer 2

Regrettably, I have faced the same issue before. Finding a neat solution proves to be challenging, leading me to resort to implementing a workaround that forces things to function as intended.

const handleTabEvent = (lastFocusableElement, firstFocusableElement) => {
  return (event) => {
    const isTabPressed = event.key === 'Tab' || event.keyCode === 9;

    if (!isTabPressed) {
      return;
    }

    if (event.shiftKey) {
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus();
        event.preventDefault();
      }
    } else if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      event.preventDefault();
    }
  };
};

const addTrapHandler = (modal) => {
  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
  const firstFocusableElement = modal.querySelector(focusableElements);
  const focusableContent = modal.querySelectorAll(focusableElements);
  const lastFocusableElement = focusableContent[focusableContent.length - 1];

  document.addEventListener('keydown', handleTabEvent(lastFocusableElement, firstFocusableElement));
};

const initTrap = (modals) => {
  modals.forEach((modal) => {
    addTrapHandler(modal);
  });
};

document.addEventListener('DOMContentLoaded', () => {
  const modals = document.querySelectorAll('.modal');
  initTrap(modals);
});

Answer 3

Answer №2

While I may not know the exact reason behind this issue, I managed to find a workaround by adjusting the placement of my modal HTML code in the markup. When the modal was positioned just above the closing body tag, I encountered the same problem. However, after moving it to a higher position, the focus trap in the modal started functioning properly. This issue is briefly mentioned in the modal documentation.

Modals utilize position: fixed, which can be finicky with rendering at times. It is advisable to place your modal HTML in a top-level position whenever feasible to prevent potential conflicts with other elements. Problems are likely to arise if you nest a .modal within another fixed element.

Answer 4

While I may not know the exact reason behind this issue, I managed to find a workaround by adjusting the placement of my modal HTML code in the markup. When the modal was positioned just above the closing body tag, I encountered the same problem. However, after moving it to a higher position, the focus trap in the modal started functioning properly. This issue is briefly mentioned in the modal documentation.

Modals utilize position: fixed, which can be finicky with rendering at times. It is advisable to place your modal HTML in a top-level position whenever feasible to prevent potential conflicts with other elements. Problems are likely to arise if you nest a .modal within another fixed element.

Divergent behavior observed with Bootstrap modal focus trap on official documentation website

Answer №1

Answer №2

Similar questions

Tips for aligning a website logo and header vertically with the navbar

Next.js sends requests before the component is actually rendered on the screen

Change web page in JavaScript using post data

Utilize esbuild to load Bootstrap JavaScript libraries

Attempting to iterate over the array of objects in order to discover a match

Creating a responsive database using an Express application and Socket.IO

Finding the most recent instance of a deeply buried value based on a specific property

"You have an undefined error with 'Navigator.' Check out the JSHint before using the forecast API that utilizes JSON

What could be causing the lack of response from PHP Ajax?

Type Error in Node.js Form Submission: Unable to define 'userId' property due to undefined value

Having trouble setting the CSS width to 100%

Converting this HTML/PHP code into JavaScript: A step-by-step guide

What is the best way to find information in a multi-page table?

I am looking to update the appearance of a button dynamically in Vue.js based on changes to an

Dropdown colorization

Error message saying 'Callback has already been invoked' returned by an async waterfall function

Encountered an error with the POST request - TypeError: Unable to access the 'name' property as it is undefined

Unable to populate HTML dropdown using AJAX

Running the test suite in another tab is causing it to fail

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event