Next tab keyboard entry does not go to the open modal
Issue:
Revealing content: Activating a component that reveals hidden content must move input focus into the revealed content
Why it matters:
When a keyboard user activates a control (such as a button) that reveals previously hidden content (such as a menu or dialog), they must be able to navigate quickly and easily into the revealed content.
How to fix:
When the user reveals hidden content, move input focus into the revealed content. In most cases, focus should move to the first focusable element in the dialog.
However, if the revealed content is a dialog, certain circumstances might warrant moving focus to a different element:
If focusing the first interactive element in a dialog causes the beginning of the dialog to scroll out of view, add tabindex="-1" to a static element at the top of the dialog (such as the dialog's title) and use scripting to move focus to that element.
If a dialog allows the user to complete a process that is not easily reversible, consider setting focus on a button that simply dismisses the dialog (such as 'Cancel').
If a dialog is intended to allow users to review their own input before committing to an action, consider setting focus on the dialog's commit button (such as 'Save' or 'Delete').
Steps to replicate:
Issue: Revealing content: Activating a component that reveals hidden content must move input focus into the revealed content
Why it matters: When a keyboard user activates a control (such as a button) that reveals previously hidden content (such as a menu or dialog), they must be able to navigate quickly and easily into the revealed content.
How to fix: When the user reveals hidden content, move input focus into the revealed content. In most cases, focus should move to the first focusable element in the dialog.
However, if the revealed content is a dialog, certain circumstances might warrant moving focus to a different element:
W3 reference: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html