#26931 closed defect (bug) (fixed)
Cannot move keyboard focus to TinyMCE controls
Reported by: | joedolson | Owned by: | |
---|---|---|---|
Milestone: | 3.9 | Priority: | normal |
Severity: | normal | Version: | 3.9 |
Component: | TinyMCE | Keywords: | |
Focuses: | accessibility | Cc: |
Description
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.
Change History (6)
#3
in reply to:
↑ 2
@
11 years ago
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?
#6
@
11 years ago
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.
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.