This is an implementation of a modal that is always focused when it is opened, preventing the Keyboard Trap.
- Create the modal button
- Create the modal itself
- Maintain a variable to keep track of the focused element before the modal opens
- Focus on the modal
- Keep track of the candidates to be the next focusable element (use querySelectorAll)
- Get the first and the last one of the above list
- If the user is on the last element and press tab, focus back to the first one
- If the user is on the first element and press shift + tab, focus to the last one
- If the user press esc, close the modal
- If the user clicks on the background, also close the modal
- Create the React version of it