[wp-trac] [WordPress Trac] #46640: Classic Editor: the distraction-free button breaks keyboard navigation

WordPress Trac noreply at wordpress.org
Thu Apr 11 18:18:57 UTC 2019

#46640: Classic Editor: the distraction-free button breaks keyboard navigation
 Reporter:  afercia                    |       Owner:  (none)
     Type:  defect (bug)               |      Status:  new
 Priority:  normal                     |   Milestone:  5.3
Component:  Editor                     |     Version:
 Severity:  normal                     |  Resolution:
 Keywords:  has-screenshots has-patch  |     Focuses:  accessibility

Comment (by azaozz):

 @afercia thanks for the patches! :)

 I think 46640.diff handles this better. The current logic there is:
 1. If on mobile device, do not add either the `dfw` or the `fullscreen`
 2. If not on mobile device, add `dfw` if it is in the settings, otherwise
 add `fullscreen`.
 3. Always add the `wp_adv` button to the end.

 46640.diff reorders the buttons so the "visual" order matches the DOM
 order, i.e. `wp_adv` before `dfw` or after `fullscreen` depending on which
 is used.

 What I'm uncomfortable with is not hiding the `dfw` button (when DFW mode
 is disabled) but instead letting MCE to set it to disabled. Then the users
 will see an always disabled button (with tooltip, shortcut, etc.) and most
 will have no idea how to enable it. That also makes the behaviour
 inconsistent with the Text tab where the `dfw` button is hidden.

 I agree, it's a bit "hacky" to hide that button with css. This was done to
 maintain the behaviour in both Visual and Text tabs when turning DFW
 on/off "dynamically" by clicking the "Enable full-height editor..."
 checkbox in the screen options.

 For 5.2 I'm thinking we should fix at least the DOM ordering problem. It
 may be possible to add and remove the `dfw` button "dynamically" instead
 of hide it with css. Can look at this again but if I remember right last
 time we checked, it had some issues in TinyMCE.

 The other option is use only the Text tab `dfw` button (yep, there are two
 of them) and completely remove the one in TinyMCE. Then we will still need
 to show it "visually" on the MCE toolbar despite that it's at completely
 different place in the DOM.

Ticket URL: <https://core.trac.wordpress.org/ticket/46640#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform

More information about the wp-trac mailing list