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

[WordPress Trac]

#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 afercia):

 @azaozz thanks for looking into this.

 The main issue is the broken keyboard navigation. The button hidden with
 `display: none` breaks basic accessibility: users who use the keyboard or
 technologies that emulate the keyboard can hardly navigate the toolbar
 buttons. Fixing only the order won't help so much if users can't use the
 toolbar to start with :)

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

 After all, this is the default behavior in TinyMCE.

 > 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 tend to see this more as a design issue. However, breaking keyboard
 accessibility to address a design issue is far from ideal.

 If there's a better way to fix keyboard navigation, I'm all for it :)

 Unless I've messed up something, [attachment:"46640.diff"] and
 [attachment:"46640.2.diff"] do basically the same thing. They both unhide
 the button. In [attachment:"46640.2.diff"] I've just tried to avoid nested
 if/else.

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