[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):

 As mentioned [https://wordpress.slack.com/archives/core/p1487193774008984
 in the last dev meeting on Slack] this should be extensively tested with
 assistive technologies. We'll discuss during next accessibility team
 meeting and probably ask the a11y testers group to test the current patch
 or the Codepen. In the meanwhile, I've done some first testing with screen
 readers and, although it's a bit early to make any judgment, first
 impressions are not so great. Seems navigating through content in the
 editor is extremely hard and I'd say it's a regression compared to the
 native textarea.

 By the way, will limit to some first considerations about keyboard
 accessibility and semantics for now.

 '''With keyboard only:'''
 1
 Usual known issue: since the tab key is used to enter tab characters,
 there's no way to tab-away from the editor. Keyboard users are "trapped"
 inside the editor. In the current Plugin and Theme editors, and in the
 Customizeer CSS textarea, WordPress allows to use the Escape key to tab-
 away. A similar solution should be implemented here too, not sure if this
 would require to hack CodeMirror.

 2
 Once the cursor is within the editor, some operating system-specific
 keyboard shortcuts are broken. Just a couple examples: on Windows, using
 Firefox, the shortcut Alt+D to move to the browser address bar doesn't
 work. On a Mac, `Cmd+[` or `Cmd+]` to navigate to the previous/next pages
 don't work. I guess there are also other ones that are broken.

 '''Semantics:'''
 1
 The editor is just a div. It should at least use `role="textbox" aria-
 multiline="true"` and an `aria-label` attribute with a proper value.

 2
 The autocomplete functionality:
 [[Image(https://cldup.com/3NLnDarDoL.png)]]
 it can be used with a keyboard but it's completely not accessible for
 screen readers. The drop-down list is just an unordered list without any
 ARIA treatment and nothing gets announced by screen readers.

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