I have a problem with CKEditor4, where when traversing through the focusable elements in the modal it's in with Firefox, after tabbing out of the editor the focus shifts to the modal body instead of the next focusable element. When testing the same with Chrome, the tab navigation works as it should.

I've tried capturing the key events from the editor instance and then manually moving the focus to the next focusable element, and while it recognizes that the tab key was pressed inside the editor and being aware of the next focusable element, it still just moves the focus to the modal body. Does anyone have any idea what the problem might be?

Here's the code I tried for handling the focus manually, which didn't solve the problem:

$.each(CKEDITOR.instances, function(i, instance) {
  var focusableTags = 'button, [href]:not([tabindex="-1"]), input, select, textarea :not([display="none"]), [tabindex]:not([tabindex="-1"])';
  instance.on('key', function(e) {
    var activeElement = document.activeElement;
    var modal = document.querySelector(".modal");
    var modal = parent.window.document.querySelector(".modal");
    var focusableContent = modal.querySelectorAll(focusableTags);
    var activeIndex = 0;
    Array.prototype.forEach.call(focusableContent, function(element, i) {
      if(element === activeElement) {
        activeIndex = i;
      }
    })
    var prevFocusable = focusableContent[activeIndex-1];
    var nextFocusable = focusableContent[activeIndex+1];
    var keyEvent = e.data.domEvent.$;
    
    var isTabPressed = keyEvent.key === "Tab" || keyEvent.keyCode === 9;
    if (!isTabPressed) {
      return;
    }
    if (keyEvent.shiftKey) { // if shift key pressed for shift + tab combination
      keyEvent.preventDefault();
      prevFocusable.focus();
    } else { // if tab key is pressed
      keyEvent.preventDefault();
      nextFocusable.focus();
    }
  })
})