Summary:
Steps to reproduce:
- Create a modal with a fieldset inside, where the fieldset contains at least two radio inputs and there are no focusable elements after the fieldset in the modal.
- Open the modal and attempt using tab to navigate
- When focus is within the fieldset, tab will move focus outside the modal. If the modal contained the final focusable element in the DOM, this means the window will blur; if it was not, then focus will move to the next element outside of it.
Expected behavior:
Focus should stay within the modal.
Link to example of issue:
Behavior when final focusable element in DOM is in modal: https://codesandbox.io/s/q4lk918jww
Behavior when focusable elements in DOM follows modal: https://codesandbox.io/s/j2jjvljp7w
Additional notes:
Radio groups have tabbing behavior that is not being accounted for by the tab intercept logic in react-modal. That logic bails and defers to the default behavior except when the active element is the final focusable element in the modal. However, radio inputs within a fieldset have keyboard behavior for accessibility with a bit more nuance. When you tab into a radio group "from above", you land on the first input, and when you tab into a radio group "from below", you land on the last input, yet within the group, you navigate with arrow keys, not tab; instead, tab exits the whole group. So when the first input is focused and you press tab, react-modal sees correctly that it is not the final focusable element, but it assumes this also means that the native tab behavior will be to go to the next input element — which is not true. Natively, the next focusable element in this situation is whatever follows the whole group. So by bailing out at this point, focus is able to escape the modal.
Summary:
Steps to reproduce:
Expected behavior:
Focus should stay within the modal.
Link to example of issue:
Behavior when final focusable element in DOM is in modal: https://codesandbox.io/s/q4lk918jww
Behavior when focusable elements in DOM follows modal: https://codesandbox.io/s/j2jjvljp7w
Additional notes:
Radio groups have tabbing behavior that is not being accounted for by the tab intercept logic in react-modal. That logic bails and defers to the default behavior except when the active element is the final focusable element in the modal. However, radio inputs within a fieldset have keyboard behavior for accessibility with a bit more nuance. When you tab into a radio group "from above", you land on the first input, and when you tab into a radio group "from below", you land on the last input, yet within the group, you navigate with arrow keys, not tab; instead, tab exits the whole group. So when the first input is focused and you press tab, react-modal sees correctly that it is not the final focusable element, but it assumes this also means that the native tab behavior will be to go to the next input element — which is not true. Natively, the next focusable element in this situation is whatever follows the whole group. So by bailing out at this point, focus is able to escape the modal.