Early Access: Keyboard Trap

A keyboard trap is a bad UI pattern in which a user can get into a component or element of our application using the keyboard, but it is impossible getting out of it just by using the keyboard. Not to be confused with a focus trap, which is basically the same, but with a keyboard exit (it may be a close button, or pressing Esc, or something like that.)

As you may imagine, a keyboard trap is a HUGE accessibility issue. In contrast, a focus trap can be extremely helpful and positive for usability and accessibility (e.g., a modal in which the focus is trapped until the user presses a button.)

I've had the idea of drawing a trap for keyboards for a while, but I didn't know if it would be clear what it was. I'm still not 100% convinced about it. I still like the idea, but I'm not 100% sold on this implementation.

You can find the code and a live demo at this private CodePen.