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 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.

Version 0, edited 10 years ago by azaozz (next)

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

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