[wp-trac] [WordPress Trac] #12423: Include Ace (or similar) as default code editor

[WordPress Trac]

#12423: Include Ace (or similar) as default code editor
-----------------------------+----------------------------
 Reporter:  scribu           |       Owner:  afercia
     Type:  feature request  |      Status:  assigned
 Priority:  normal           |   Milestone:  4.8
Component:  Editor           |     Version:  3.0
 Severity:  normal           |  Resolution:
 Keywords:                   |     Focuses:  accessibility
-----------------------------+----------------------------

Comment (by afercia):

 Just to confirm what was discussed on Slack yesterday (see link to the
 Slack logs above), here's a couple screenshots. Worth noting these kind of
 editors should be tested on Windows with NVDA or JAWS or other Windows
 screen readers, since VoiceOver uses a different interaction model.

 As @westonruter pointed out, CodeMirror
 [http://codemirror.net/doc/internals.html does not use contentEditable
 internally]. Also, it "decouples" the underlying textarea from the
 presentation of the content. Basically the textarea is almost always
 empty.

 Using a screen reader, when navigating content in "browse mode" (e.g.
 using the arrow keys): the textarea is hidden just visually so screen
 readers announce it and it's empty. After the textarea, the presentation
 of the editor content is announced as it was normal text in the page:

 [[Image(https://cldup.com/PwxwgTpEkD.png)]]

 When entering "forms mode" to operate inside the textarea, there's no
 content at all. As said, the textarea is initially empty and screen
 readers just announce "blank":

 [[Image(https://cldup.com/byJgt9dNxW.png)]]

 It is possible to enter content in the textarea, and the visual
 presentation gets updated with the new content but when trying to read out
 what you just entered, the textarea is empty again. This is because, in
 non-technical terms, CodeMirror clears out the textarea as soon as the
 arrows keys or Enter get pressed, since it needs to move the cursor in the
 visual presentation of the content.

 Quick video where I've made the CodeMirror textarea visible to illustrate
 what happens under the hood: https://cloudup.com/iQRX47naOxY

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