Disable tabbing on modal content when hidden

I know that the recommendation is to have this css:

[aria-hidden="true"] {
  display: none;
}

However that solution leaves much to be desired in terms of in-out transitions using CSS.

Since the modal code already implements the ability to disable focus on elements, as used on the modals siblings, would it be possible to do the same thing for the modal content when closing the modal?

This would enable the ability to use other means of hiding the visual side of the dialog when closing it, which includes transitions in and out.

[Munter]

I thought it might be a useful addition so the default unstyled version did the correct thing with tabbing, and so it could avoid forcing a styling on the users.

I thought it wouldn’t be a big addition, since the modal is already dealing with toggling tabindexes, so it would probably be a smaller implementation in the library itself than if someone would have to to it themselves.

I’m comfortable with implementing this in my own code, but should you decide to full a functionality like this into the core I’d be happy to contribute with test cases

[KittyGiraudel]

For the record, here is how I would write it:

  var FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];

  function getFocusableElements (el) {
    return Array.prototype.slice.call(
      el.querySelectorAll(FOCUSABLE_ELEMENTS.join(','))
    )
  }

  function makeTabbable (el) {
    if (el.hasAttribute('data-tabindex')) {
      el.setAttribute('tabindex', el.getAttribute('data-tabindex'));
    } else {
      el.removeAttribute('tabindex');
    }
  }

  function makeUntabbable (el) {
    if (el.hasAttribute('tabindex')) {
      el.setAttribute('data-tabindex', el.getAttribute('tabindex'));
    }

    el.setAttribute('tabindex', -1);
  }

  function toggleTabIndex (parent, focusable) {
    var els = getFocusableElements(parent)
    
    focusable
      ? els.forEach(makeTabbable)
      : els.forEach(makeUntabbable)
  }

  dialog.on('hide', function (dialog) {
    toggleTabIndex(dialog, false);
  });

  dialog.on('show', function (dialog) {
    toggleTabIndex(dialog, true);
  });