[wp-trac] [WordPress Trac] #30450: Focus V2: Seperate out the DFW button from the rest of the TinyMCE editor buttons

[WordPress Trac]

#30450: Focus V2: Seperate out the DFW button from the rest of the TinyMCE editor
buttons
-------------------------------+-----------------------------
 Reporter:  sharonaustin       |      Owner:
     Type:  enhancement        |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Editor             |    Version:
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Using 4.1-beta2-30490 Firefox 30.0 Also related to  #29838
 Post editing area: keyboard accessibility, tab order and focus

 I was working with a friend who has multiple disabilities, who relies on
 both Dragon Naturally Speaking (version 12.5) and his poor vision in order
 to navigate around the editor.

 We went into the Distraction Free Mode to work.  As he has vision
 problems, I saw that it was easier for him to concentrate on the task at
 hand because only the essential screen was presented to him (kudos to
 Focus V2). The problem came when he tried to "save/publish" his work.

 When he first got onto the page, he instructed Dragon Naturally Speaking
 to tab through the page--the Distraction Free Writing button never
 received focus.

 He considered using "mouse grid" but this is a painful, slow process to go
 through all the buttons in the TinyMCE bar. He would have had to do this
 because his vision is poor, the icons were blurry and had little meaning
 to him.  All the icons carried the same "weight" in significance to him.
 Rather than face the daunting task of going through each of the icons, he
 chose to try to save/publish his work by going to the browser bar.


 Recommendations:

 Make the DFW button focusable.  Move the Distraction Free Writing button
 up out, and away, from the rest of the editing buttons in the TinyMCE
 editor bar (but before the editor, so that there is a logical sequence in
 the tab order).  Make the DFW button much different, visually speaking,
 than the other buttons in the TinyMCE, because all those other buttons
 function INSIDE the editor--the DFW has a different function in allowing
 one to see the components of the interface OUTSIDE the editor.  This will
 provide stonger visual cues to those with poor vision that this button
 does something "different" than the rest of them, and allow them to target
 their limited resources to working the editor.

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