Cannot move keyboard focus to TinyMCE controls

[joedolson]

With TinyMCE 4, it's not possible to move focus using only the keyboard into the TinyMCE controls. This may be related to use of role="presentation" or the hidefocus attribute; not sure yet.

Tested in Firefox latest and Chrome latest.

[azaozz]

Focus in the TinyMCE UI is handled with JS. To focus the toolbar (first button) you need to press Alt+F10 while in the editor. Then either tab or the arrow keys can be used to move to other buttons. Tabbing wraps so you won't leave the toolbar.

After a button is "clicked", it returns focus to the editor and the caret is at the same place where it was originally.

The only thing remaining is to devise a way to highlight the currently focused button somehow. Using :focus in CSS wouldn't be good as there shouldn't be highlighting when using the mouse. Perhaps we can add a class on the editor wrapper div when pressing Alt+F10 that adds outlines to the buttons.

[nacin]

Replying to azaozz:

The only thing remaining is to devise a way to highlight the currently focused button somehow. Using :focus in CSS wouldn't be good as there shouldn't be highlighting when using the mouse. Perhaps we can add a class on the editor wrapper div when pressing F10 that adds outlines to the buttons.

:focus should be fine. Mouse activity would be :active, no?

[azaozz]

In [27058]:

TinyMCE: add outline when a button is focused. Fixes #26931, see #24067.

[azaozz]

Generally :focus is triggered on clicking any "focusable" element (links, form elements), :active is for links and buttons while the mouse button is down. Focusing link or button by tabbing would also make it :active.

In the TinyMCE toolbar the active elements are <div tabindex="-1"> (focusable only with JS) so :focus can be used on them and it won't trigger on clicking.