How can I configure Featherlight to support tabindex within the modal?

Question

My form (look at the demo fiddle here, and I've also pasted some code below) seems not to support tabindex inside the Featherlight modal.

I think it's because of this part of Featherlight here.

How can I display a form within a modal and still let a user press the TAB key to bounce to the next field?

It seems like I need to add a hack into the Featherlight library, which I'd rather not do.

Thanks!

---

<div style="display: none;">
  <div id="modal">
    My form NEEDS to support tabindex. If Featherlight is going to set tabindex to -1 for anything (even temporarily), it should only be for elements that aren't inside the modal.
    <div class="mainInputWrapper">
      <input type="text" name="fullname" placeholder="Your Name" required id="firstname" /><span class="forValidationDisplay"></span>
    </div>
    <div class="mainInputWrapper">
      <input type="email" name="email" placeholder="Your Best Email Address*" required id="email" /><span class="forValidationDisplay"></span>
    </div>
    <button>
      Submit
    </button>
  </div>
</div>
<a class="role-element leadstyle-link" href="#" data-featherlight="#modal">Click here if you're interested</a>

Answer 1

I found a way to override Featherlight and avoid editing its source code.

    $.featherlight._callbackChain.beforeOpen = function (event) {
        //http://stackoverflow.com/q/42234790/470749
        //By overriding this function, I can prevent the messing up of tabindex values done by: https://github.com/noelboss/featherlight/blob/master/src/featherlight.js#L559            
    };
    $.featherlight._callbackChain.afterClose = function (event) {
        //See note above in $.featherlight._callbackChain.beforeOpen
    };
    $.featherlight.defaults.afterContent = function (event) {
        var firstInput = $('.featherlight-content #firstname');
        console.log('Considering whether to focus on input depending on window size...', $(window).width(), $(window).height(), firstInput);
        if (Math.min($(window).width(), $(window).height()) > 736) {//if the smallest dimension of the device is larger than iPhone6+
            console.log('yes, focus');
            firstInput.attr('autofocus', true);
        }
    };

Answer 2

Unfortunately, the accepted answer breaks the disable scrolling functionality.

Luis Paulo Lohmann's answer is much better IMHO. Here is a slightly improved version of it:

afterContent: function () {
    $('.featherlight-content').find('a, input[type!="hidden"], select, textarea, iframe, button:not(.featherlight-close), iframe, [contentEditable=true]').each(function (index) {
        if (index === 0) {
            $(this).prop('autofocus', true);
        }
        $(this).prop('tabindex', 0);
    });
}

Improvements:

• Reset tabindex on all elements, which are handled by Featherlight.
• Use tabindex="0" for better accessibility and fewer order issues. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex for more details.