From 791b8dfbc72652e3ea81c710351227d56df7bb34 Mon Sep 17 00:00:00 2001 From: Anton Korzunov Date: Sun, 27 Jan 2019 10:52:03 +1100 Subject: [PATCH] update focus managing section --- content/docs/accessibility.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index d387921cac5..da13a8219d4 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -232,14 +232,15 @@ this.inputElement.current.focus(); When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback. -A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on -the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that -initially triggered the modal. - >Note: > >While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how ->users want to use applications. +>users want to use applications. + +There are just a few situations, when you have to manage your focus - _autofocus_ or when you have to apply _restrictions_; Modal Dialog is a great example. +You need to manage a focus, to prevent a user from leaving a Modal, or any other _focused_ task. Or else: a user will be "lost" in the partially disabled application; which could be suspended while modal is active. + +To resolve situations like this you have to use _Focus Traps_, to bound focus to a specific location, and not let user to _tab-out_. For example - [react-focus-lock](https://github.com/theKashey/react-focus-lock). ## Mouse and pointer events