DEV Community

Discussion on: Building Components in React: Modals

Collapse
larsejaas profile image
Lars Ejaas • Edited on

Nice article! You should probably also trap focus inside the modal. Otherwise users will be able to tab outside the modal using the keyboard. This is usually not desirable.

You can do this by mapping over all focusable elements in the modal, and once the user tab from the last element, the first element should gain focus. Furthermore shift-tab from first element should give focus to last element.

I just finished of a project written in React with a lot of different modals. Check it out at bruce-willis.rocks/en/ - there is even a url to the sourceCode at github 😊

Collapse
faisalpathan profile image
faisal khan Author

@larsejaas , completely agree trapping focus inside the modal is another important point to improve accessibility. Thanks for the solution as well. :)