FocusScope

The FocusScope helps you manage the focus when opening any overlay. If you want to create a custom overlay, you can wrap the content of your overlay in the FocusScope to help you make the overlay accessible and handle focus appropriately.

Import

import { FocusScope } from '@dynatrace/strato-components-preview/core';

Use cases

⚠️ If you build custom overlays, make sure to adhere to accessibility guidelines for overlays. Only using the FocusScope does not mean the overlay is fully accessible.
You also have to take care of positioning the overlay accordingly yourself.

⚠️ We advise against building your own overlays, but encourage you to use the components we provide.

If you don't set any props on the FocusScope, it will only add a wrapper around its children, without adding more functionality.

CodeSandbox

Auto focus

To automatically focus the first focusable element inside the overlay, you can set the autoFocus prop of the FocusScope to true. The FocusScope will then try to focus the first focusable child. If no focusable children are contained in the overlay, the focus will remain on the trigger, unless the contain prop is set to true as well.

CodeSandbox

Contain focus

Use the contain prop of the FocusScope to keep the focus trapped inside the overlay. A FocusScope containing the focus will move the focus inside the overlay, regardless of the autoFocus prop.

Make sure the user always has the possibility to dismiss the overlay again. If there is no focusable element in the container, the focus will move to the document, making it impossible for the user to dismiss the overlay using the keyboard.

To trap the focus, the AppRoot is set to inert (see HTMLElement.inert). To avoid a keyboard trap, you must make sure that the overlay is moved outside of the AppRoot using a portal. Otherwise, the user wouldn't be able to dismiss the overlay, since any user input on the inert element is ignored by the browser. You're also responsible yourself for positioning the overlay accordingly.

CodeSandbox

Props

FocusScopeProps

extends

Name	Type	Default	Description
autoFocus?		false	If set to true, the focus scope automatically focuses the first focusable element inside.
contain?		false	If set to true, the focus scope traps the focus inside.