Checklist(Check off all the items before submitting)
[x] The build process is done without errors. All tests pass in the /lib directory.
[x] Self-reviewed the code before submitting.
[x] Meets accessibility standards.
[x] Added/updated documentation to /website as needed.
[x] Added/updated tests as needed.
Description
Fixed the auto-scroll problem when the focus was moving within the dialog. The FocusLock wraps its child component between two colliding divs that prevent the focus from moving out of it. The scroll when tabbing is caused by those divs that gain the focus momentarily because they are placed at the very beginning of the page. As we are using a React Portal, they have been placed there, outside of the main flow, but not with the positioning of their children (in this case, the Dialog).
The fix is moving the FocusLock inside the main dialog container since we want to keep the focus locked in between the elements inside the Dialog, so it makes total sense.
Checklist (Check off all the items before submitting)
/libdirectory./websiteas needed.Description Fixed the auto-scroll problem when the focus was moving within the dialog. The
FocusLockwraps its child component between two colliding divs that prevent the focus from moving out of it. The scroll when tabbing is caused by those divs that gain the focus momentarily because they are placed at the very beginning of the page. As we are using a React Portal, they have been placed there, outside of the main flow, but not with the positioning of their children (in this case, the Dialog).The fix is moving the
FocusLockinside the main dialog container since we want to keep the focus locked in between the elements inside the Dialog, so it makes total sense.Closes #1532