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 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 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 button elements are <div tabindex="-1"> (focusable only with JS) so :focus can be used on them and it won't trigger on clicking.