Modal: implement focus trap

[bastaware]

Modal should not let focus leave the components inside the dialog. Also it should autofocus the first component in the dialog (if no autofocus was specified).

More on Modals and keyboard traps: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

Steps

1) Open any modal on the example page: https://react.semantic-ui.com/modules/modal 2) Press tab multiple times

Expected Result

Focus should never enter the dimmed components below

Actual Result

Focus does enter the dimmed components below

Version

Current Tested in Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Testcase

https://react.semantic-ui.com/modules/modal

[layershifter]

Yes, we should impliment focus trap on modal, here is good example. However, it's a low priority enchantment. Contributions are welcome.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[binkley]

How would I have the priority of this raised?

One consequence of this issue is that Confirm and Modal are not useful in our project.

Thanks!

[fracmak]

I think this is a priority, reopening. Thoughts on adding this to the project dependencies?

https://github.com/theKashey/react-focus-lock

We've had luck using it in a few projects at my company.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[mjnaderi]

@fracmak Is there any plan to implement this? This is essential for addressing accessibility issues.

[brennanyoung]

semantic-ui-react devs may find this helpful: https://github.com/WICG/inert/blob/master/explainer.md - note that inert, after some to-and-fro is becoming part of the HTML5 spec. See https://caniuse.com/?search=inert for progress on implementations.

<dialog> (the most correct semantic choice for HTML dialogs) has had better luck, with some support on all major browsers today. https://caniuse.com/?search=dialog

[ant100]

This is a very important accessibility feature, also found this other dependency that could help: https://github.com/focus-trap/focus-trap