-
Notifications
You must be signed in to change notification settings - Fork 93
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix modal focus trap with additional elements and arrow navigation #4406
Conversation
There is one more problem: when the next or prev slide is a video, then tab navigation goes to visually hidden video controls. But this should be fixed in Viewer (I'll make a PR later) |
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
ca40299
to
5d809f6
Compare
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
5d809f6
to
d7410b7
Compare
PR is updated. Only arrow navigation ignores elements outside (which is the problem in mentioned issue), while ESC still closes the modal as it was before, regardless of focus. It is a problem for elements that uses ESC itself. For example, closing |
// Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap. | ||
// Focus trap is deactivated on modal close anyway. | ||
escapeDeactivates: false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap. | |
// Focus trap is deactivated on modal close anyway. | |
escapeDeactivates: false, |
Not used anymore?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm... I'm not sure if it is required, I need to re-check.
But disabling escapeDeactivates
is definitely safe:
- If a modal is closed by ESC, trap is deactivated anyway
- If a modal is not closed by ESC, the focus trap should also not be deactivated.
☑️ Resolves
Two problems with focus trap break navigation with modal.
Problem 1: When Viewer is opened with sidebar, focus on the sidebar is not possible
Source:
additionalTrapElements
are not used on init but only on change.Problem 2:
NcModal
intercept arrow navigation for slider (next/prev)🖼️ Screenshots
🏚️ Before
before-1.mp4
before-2.mp4
🏡 After
after.mp4
🚧 Tasks
additionalTrapElements
on initadditionalTrapElements
🏁 Checklist