From 1dace00d21bbcc0fa7c53aa81f8eca5af0d84e05 Mon Sep 17 00:00:00 2001 From: PutziSan Date: Sun, 1 Dec 2019 12:14:23 +0100 Subject: [PATCH] Document the 'Focus trap' limitation for modals --- docs/src/pages/components/dialogs/dialogs.md | 4 ++++ docs/src/pages/components/modal/modal.md | 13 +++++++++++++ 2 files changed, 17 insertions(+) diff --git a/docs/src/pages/components/dialogs/dialogs.md b/docs/src/pages/components/dialogs/dialogs.md index f31decd80c93c5..9910b72296182f 100644 --- a/docs/src/pages/components/dialogs/dialogs.md +++ b/docs/src/pages/components/dialogs/dialogs.md @@ -121,6 +121,10 @@ Try the demo below to see what we mean: {{"demo": "pages/components/dialogs/ScrollDialog.js"}} +## Limitations + +Follow the [Modal limitations section](/components/modal/#limitations). + ## Accessibility Follow the [Modal accessibility section](/components/modal/#accessibility). diff --git a/docs/src/pages/components/modal/modal.md b/docs/src/pages/components/modal/modal.md index f2c3b19c819b4c..a618a76b714eb3 100644 --- a/docs/src/pages/components/modal/modal.md +++ b/docs/src/pages/components/modal/modal.md @@ -62,6 +62,19 @@ In order to display the modal, you need to disable the portal feature with the ` {{"demo": "pages/components/modal/ServerModal.js"}} +## Limitations + +### Focus trap + +The modal moves the focus back to the body of the component if the focus tries to escape it. + +This is done for accessibility purposes, however, it might create issues. +In the event the users need to interact with another part of the page, e.g. with a chatbot window, you can disable the behavior: + +```jsx + +``` + ## Accessibility (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#dialog_modal)