Different focus behavior when clicking the toolbar buttons

[afercia]

Splitting this out from #3003

When clicking or pressing Enter on some buttons, for example the alignment buttons, focus stays on that button. Instead, when activating other buttons, for example bold/italic/strikethrough, focus is moved back to the editing area.

This is inconsistent: all buttons should behave the same. It's also different from what TinyMCE does in the classic editor, where focus is always moved back to the editing area.

[afercia]

Discussed during today's accessibility bug-scrub: focus should be moved consistently. When activating these buttons, either focus should always be moved back to the content or it should say on the buttons. We're open to discuss which of the two behaviors would be better for usability and accessibility.
Note: in the Classic Editor, focus is always moved back to the content.

[tofumatt]

Not really convinced this needs design feedback, and I agree with you; this is bad for accessibility but beyond that is bad usability. This should be consistent, and always return focus to the content.

[tofumatt]

I'm having a bit of trouble following the code path for these controls and where the reset happens.

It seems like the reset of focus is a by-product/side-effect of https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/rich-text/index.js#L448, so I'm not exactly clear on how to get the alignment controls (which are located elsewhere with different onChange events) to focus the control after being clicked.

@iseulde or someone else with more RichText knowledge than me: any chance you'd know off the top-of-your-head how to get the alignment controls to focus the block's content after interaction?

[gziolo]

@ellatrix - is this something you have planned to work on?

[mtias]

Related #18534

[youknowriad]

Related #17617