Skip to content

Latest commit

 

History

History
38 lines (22 loc) · 1.6 KB

README.md

File metadata and controls

38 lines (22 loc) · 1.6 KB

Demo

This Next.js app is an interactive demo for the @davidevmod/focus-trap package.

At the moment it's just a sketchy playground used to e2e test the package, you can visit it at: https://focus-trap-demo.vercel.app

There are a few HTML elements within which you can trap the focus by building a focus trap through the inputs on the right.

You can also modify properties of the button elements and see the focus trap acknowledge them in real time.

There are a couple of things to watch out for:

  • If a trap has lock enabled (the default) you won't be able to interact with any element outside of the trap, though you may break free of the trap by pressing the Esc key.

  • If a trap has lock enabled and escape disabled, the only way out is reloading the page.

An Escape button, always clickable, will be provided as an escape hatch eventually.
Tab and Shift-tab buttons will be added too, to make the demo accessible to devices missing the ability to fire the related events.

Run locally

Clone the monorepo to your local machine, it uses yarn berry workspaces so to install the project's dependencies you will need to enable corepack first:

git clone https://github.com/DaviDevMod/focus-trap.git

cd focus-trap

corepack enable

yarn install

Then you can start a server on http://localhost:3000 with:

yarn workspace demo dev