How to avoid navigation in outside of the popped up drawer - html

Question

Hi I'm currently working on a reactjs web application and trying to provide accessibility features in web pages. In one page there's a drawer popping up once a button clicked, and I wanted to make sure the tab navigation only through the drawer without going outside of the drawer when it expanded. How can I do that?
Here I have attached the screen shot of the page including the expanded drawer.

Answer 1

I'd recommend writing a keyboard handler in JavaScript to restrict tab order to the pop-out "drawer" (or modal as I'd call it).
Hidde de Vries wrote an excellent short tutorial on this, see here.
I adapted this very slightly:
// Function to trap tab movement to a specific container element
trapFocusInArtworkModal = function (el) {
// Gather all focusable elements in a list
var query = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='email']:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]), [tabindex='0']"
var focusableEls = el.querySelectorAll(query);
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
// Add the key listener to the modal container to listen for Tab,
// Left Arrow, Right Arrow, Enter and Escape
el.addEventListener('keydown', function(e) {
var isTabPressed = (e.key === "Tab" || e.keyCode === KEYCODE_TAB);
var isEscPressed = (e.key === "Escape" || e.keyCode === KEYCODE_ESCAPE);
// Define behaviour for Tab or Shift+Tab
if (isTabPressed) {
// Shift+Tab
if (e.shiftKey) {
if (document.activeElement === firstFocusableEl) {
// Move keyboard focus to the last focusable element in the container
lastFocusableEl.focus();
e.preventDefault();
}
}
// Tab
else {
if (document.activeElement === lastFocusableEl) {
// Move keyboard focus to the first focusable element in the container
firstFocusableEl.focus();
e.preventDefault();
}
}
}
// Define behaviour for Escape
if (isEscPressed) {
// This will close out the modal when the Escape key is pressed
// by clicking the modal's close link/button
el.querySelector("a").click();
}
});
};
// Find the modal
var modal = document.querySelector("[role='dialog']");
// Attach the trap keyboard function to the modal
trapFocusInArtworkModal(modal);
You can then attach the code to run when the page has loaded.