[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:  Awaiting Review
Component:  Editor         |    Version:
 Severity:  normal         |   Keywords:  has-screenshots
  Focuses:  accessibility  |
---------------------------+-----------------------------
 This appears to be a long standing bug in the Classic Editor. To
 reproduce:

 - edit a post in the Classic Editor
 - make sure in the Screen Options > "Enable full-height editor and
 distraction-free functionality" is ''not'' checked
 - click in the editor content
 - press Alt+F10 to move focus to the TinyMCE toolbar
 - navigate through the buttons either with the Tab key or the arrow keys
 - navigating forwards on the first buttons row: you're stuck on the Toggle
 Toolbar button
 - navigating backwards on the second buttons row: you're stuck on the
 Strikethrough button

 Go in the Screen Options again and check "Enable full-height editor and
 distraction-free functionality":
 - the "distraction-free" button appears in the toolbar top right
 - repeat the steps above: navigation through the buttons now works
 correctly
 - however, DOM order and visual/tab order mismatch

 TinyMCE implements its own mechanism to navigate through the buttons,
 meaning that's not the native browsers behavior. Turns the "distraction-
 free" button is hidden with `display: none` and the TinyMCE navigation
 mechanism doesn't like hidden buttons.

 Additionally, the "distraction-free" button is placed in the markup before
 the "Toggle Toolbar" button but visually it's the last one in the top
 right. For accessibility, DOM order and visual order must match when the
 navigation sequence "affects meaning or operation".

 To solve the broken keyboard navigation, I'd propose to just keep the
 button always visible:

 [[Image(http://cldup.com/-rcSqz7Owk.png)]]

 When the button is disabled, TinyMCE already handles what is necessary:
 the button is greyed-out, it does nothing, and has an `aria-disabled`
 attribute. This matches the standard style and behavior of all the other
 disabled buttons in TinyMCE (see Undo/Redo in the screenshot below):

 [[Image(http://cldup.com/GwFw2RGv0K.png)]]

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