Focus Trap

Focus Trap keeps the focus within its focusable children elements.

install	yarn add @clayui/core
version
use	`import {FocusTrap} from '@clayui/core';`

Introduction

Focus Trap is a component that wraps elements in the DOM and prevents focus from escaping from its child components when the user navigates with Tab or Shift + Tab.

It definitely is used when trying to build accessible components, blocking all interactions outside of it while Focus Trap is active.

It’s the responsibility of the user to add an escape method for the focus trap, either with a button or the escape key.

Example

Open Sandbox

import {Provider, Button, FocusTrap} from '@clayui/core';
import React, {useEffect, useRef, useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [active, setActive] = useState(false);
	const activateButtonRef = useRef(null);

	useEffect(() => {
		if (active) {
			return () => activateButtonRef.current?.focus();
		}
	}, [active]);

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Button onClick={() => setActive(true)} ref={activateButtonRef}>
					Activate trap
				</Button>
				{active && (
					<FocusTrap active={active}>
						<div className="sheet c-mt-2 c-p-4">
							<Button displayType="link">Button 1</Button>
							<Button displayType="link">Button 2</Button>
							<div className="c-mt-4">
								<Button onClick={() => setActive(false)}>
									Leave trap
								</Button>
							</div>
						</div>
					</FocusTrap>
				)}
			</div>
		</Provider>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Introduction
Example