Focus management: a practical example of focus loss in the Sidebar

[afercia]

There are already some issues (see for example #297 and #515) about focus management (that's of fundamental importance for accessibility) and also some discussions have already happened.

In this issue I'd like to clarify a bit the effect of a focus loss and what that does mean for users who don't use a pointing device. I've made a short video (22 seconds!) using the current Gutenberg plugin as of May 23rd: https://cloudup.com/c-ls4zlBvk0

A few notes:

• I'm using a custom plugin I use for debugging a11y, that adds borders and outlines to all the focusable elements: this breaks a bit the layout, please ignore the breakage
• once on the "Post Settings" button, there's no way to tab into the sidebar, so I'm using the mouse to move focus there
• then I tab to the "X" close button and press Enter or Spacebar to activate it
• at that point, the element that was focused gets removed from the DOM
• tab again, and the browser moves focus back to the document root: this happens even if Chrome has implemented a sort of "internal pointer" to try to keep focus in place since version 50 (Firefox always had a similar feature, Safari form version 10)

This focus loss actually forces to start navigating content from scratch, which is one of the worst thing can happen for users who don't use a pointing device.

To avoid this focus losses there's really the need of a "focus management" tool able to get references to DOM elements, even if they pertain to different components. This tool should give the ability to move focus back in a logical place when necessary, to evaluate on a case by case basis.