Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#26931 closed defect (bug) (fixed)

Cannot move keyboard focus to TinyMCE controls

Reported by: joedolson's profile 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)

#1 @nacin
10 years ago

  • Milestone changed from Awaiting Review to 3.9

#2 follow-up: @azaozz
10 years ago

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.

Last edited 10 years ago by azaozz (previous) (diff)

#3 in reply to: ↑ 2 @nacin
10 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?

#4 @azaozz
10 years ago

In [27058]:

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

#5 @azaozz
10 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

Version 1, edited 10 years ago by azaozz (previous) (next) (diff)
Note: See TracTickets for help on using tickets.