3 ms·
Assuming your modal is an element lacking native focus (eg a div) and you're using jQuery: modal.attr('tabindex','1').style('outline','0'); modal.focus(); Tha
by harlanlewis 14y ago
Assuming your modal is an element lacking native focus (eg a div) and you're using jQuery:
modal.attr('tabindex','1').style('outline','0');
modal.focus();
That:
1 - enables focus on the modal div
2 - hides focus visual indicator on the modal (because it's not an interactive element, just a wrapper)
3 - sets focus on the modal
The user's next tab keypress will select the first focusable element inside the modal.
Restricting tab keypress to just elements inside the modal (ie cycling through only modal content) doesn't return significant benefit and it's a whole lot more work. It's easy for a user to error-correct by simply clicking back inside the modal, but it's hard for a developer to manage enabled/disabled states for native behavior.