Implement accessible focus handling when closing stuff like modals and dropdowns

[adrianschmidt]

Here's an amazingly snarky issue I found on the Flatpickr repo, that, among all the snark, explains how to properly handle focus when closing stuff like modals and dropdowns 😅

flatpickr/flatpickr#1357

Here's the content, in case anything happens to the original issue:

Utilizing applications which implement accessibility may have focus listening apparatus which actually does stuff on focus movement.

It's never valid for a subsidiary component such as a date picker to unilaterally throw focus up to document.body.

So you cannot process the TAB key like you do.

You must let it proceed naturally if tabbing within your DOM. But if focus is leaving, you must trap it, and keep it in. Because the user thinks he's tabbing out of a form field to the next field.

Your component, not knowing completely where it is rendered cannot let TAB proceed.

You can use focus traps at the start and end of your DOM and a focusin listener to see when they are hit, and then a TreeWalker to focus the opposite focus trap and walk forwards or backwards to the next focusable element in your DOM. See below where I have wrapped your DOM and fixed it. Once you dive into your calendarContainer, tabbing is contained.

You should also implement automatic focus reversion. Capture the focusIn event's relatedTarget, and revert focus to that on close. So if your outermost el is focused and you get TAB keydown, just revert focus and hide. And the default action of the impending TAB keypress will take place on the owning inout field.

Really. This should be basic.