Control menu navigation with keyboard

[LukasHirt]

Description

It is not possible to operate the off-canvas navigation with keyboard

[DeepDiver1975]

More general task: keyboard control of all in phoenix

[marcus-herrmann]

I agree on that keyboard navigability/focus management being bigger task.

Regarding this issue:

Problem (abstract)

The off canvas menu follows the concept of a Disclosure Widget (that is: a thing appearing, but that thing not being modal). Triggering button ("Menu") and appearing container are not close in the DOM to each other (although they are visibly close) - therefore there aren't close in focus order! So when a user interacts with "Menu" by keyboard only they have to go to a large amount of tab stops to reach the open menu. Because close to no one tries to hit the "Tab" key a hundred times I phrased this as being inaccessible by the keyboard (though it actually is - but unbearably hard/complicated).

Solution (abstract)

In cases like this, where triggering button in controlled content is not directly adjacent in the DOM, therefore adjacent in the tab order one has to actively manage focus. Sequence:

1. User interacts with menu button
2. Focus sent to a reasonable place inside the controlled content, for example the first navigation item "All files", or the close button, or the controlled content container itself (in this case said container has to be made programmatically focusable by adding tabindex=-1) (Example: my own website)
3. Once the user interacts with a navigation item and it's a route, focus should be sent to a reasonable place in the newly loaded content (focus managent after route transition is a whole new topic!).
4. But once the user decides to close the menu, once they interact with the close button, focus should be sent back to where they started, in this case "Menu".

Solution in phoenix

See PR #2101