How to set the focus on a javascript modal window?

Question

Our website involves some javascript that produces overlay modal windows.

There is one accessibility problem with this though, once the modal is triggered, the focus is still on the trigger element and not on the modal itself.

These modals can include all sorts of html elements, headings, paragraphs and form controls. What I would like is the focus to begin on the first element within the modal, so most likely to be a h4 tag.

I have explored using the focus() function however this does not work with a number of html elements.

One thought was to add an empty a tag in the window which could gain the focus, but I am unsure about this method.

score 11 · Answer 1 · answered Oct 07 '15 at 15:32

very late to the party, but the existing answers do not respect accessibility.

The W3C wiki page on accessible modals offers more insight than what's asked in the OP, the relevant part is having tabindex=-1 on the modal container (which should also have an aria-dialog attribute) so it can get :focus.

This is the most accessible way of setting the focus on the modal, there is also more documentation about keeping it in the modal only - and returning it to the element that triggered the modal - quite a lot to be explained here, so I suggest anyone interested to check the link above.

score 0 · Answer 2 · answered Nov 16 '10 at 15:25

0

You can append textbox to the beginning of the modal HTML, set focus then hide the textbox. Should have the desired effect as far as I understand your needs.

answered Nov 16 '10 at 15:25

Shadow The GPT Wizard

66,030
26
140
208

1

thats one way, though I would prefer not to add empty textboxes in code, both for accessibility and cleanliness of code – user502014 Nov 16 '10 at 16:13
@user502014 the textbox won't be visible so accessibility shouldn't be an issue. If you find cleaner code feel free to use it, just keep in mind you have "Plan B" ready.. – Shadow The GPT Wizard Nov 16 '10 at 20:16

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

You could try to blur() the element that has the focus.

edited May 23 '17 at 12:01

Community

1
1

answered Nov 16 '10 at 15:27

Gipsy King

1,549
9
15

user08 · Answer 4 · 2021-10-07T12:27:06.630

to trap focus inside the modal I have used this approach. So the basic idea behind it is exactly to trap the focus in the modal HTML elements and not allowing it to go out of the modal.

  // 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(); // 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();

you can find it here trap focus inside the modal

How to set the focus on a javascript modal window?

4 Answers4