Modal: Missing focus trap
omaxel opened this issue · comments
When the user clicks on a button that triggers the modal opening, he's still able to move the focus around the page using the tab key.
Instead, the focus should be trapped inside the modal and its controls.
Looking forward to this solution:
the parent dialog element should have role="dialog" to indicate this is a dialog. In your case, you're also missing the aria-modal="true" which should tell the browser and screen readers that the focus should stay only within the modal.
Using aria-modal="true" replaces the need to add aria-hidden="true" for elements that should be hidden from screen readers and not receive keyboard focus outside the modal while the modal is open.
If the above method does not work, you may still want to use aria-hidden="true" for the parent element outside the modal to prevent keyboard from leaving the modal.
If for some reason that still does not work and you need manual control over keyboard focus, you can check which elements receive keyboard focus outside the modal and then set their tabindex attribute to tabindex="-1", meaning they can still receive focus but not from the keyboard. In this approach you need to be careful, because when the modal closes you'll want to restore the functionality by either removing the tabindex="-1" from those elements or by setting it back to tabindex="0"
Source: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
This CSS approach requires JS anyway
https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
@omaxel I did some research and apparently focus trap requires Javascript. Do you have any other idea?
I'm looking forward to block page scroll when modal is open, but...without toggling class on <body> is pretty hard :)
Resolved issue in 69b5b7c