[wp-trac] [WordPress Trac] #41872: Minor accessibility improvements to the CodeMirror editing areas

[WordPress Trac]

#41872: Minor accessibility improvements to the CodeMirror editing areas
-----------------------------------------------+-------------------
 Reporter:  afercia                            |      Owner:
     Type:  defect (bug)                       |     Status:  new
 Priority:  normal                             |  Milestone:  4.9
Component:  Customize                          |    Version:  trunk
 Severity:  normal                             |   Keywords:
  Focuses:  ui, accessibility, administration  |
-----------------------------------------------+-------------------
 The CodeMirror-powered code editor areas recently introduced in [41376]
 can be improved a bit with some minor accessibility enhancements.

 First of all, the CodeMirror editing area needs a proper ARIA role and
 `aria-multiline` attribute to be exposed to assistive technologies as
 equivalent to a native HTML textarea. This was mentioned in the original
 ticket, see https://core.trac.wordpress.org/ticket/12423#comment:49

 Further improvements:
 - all the editing areas need to be labeled, whether using a `<label>`
 element, an `aria-label`, or an `aria-labelledby` attribute.
 - all the underlying textarea elements need to be labeled, this is
 particularly important when CodeMirror is disabled in the user profile and
 the textarea are actually used
 - worth noting the Custom HTML widget used to have a "Content:" label that
 was removed, it should be restored also for consistency with all the other
 widgets
 - the Additional CSS textarea in the Customizer needs a label
 - the Plugin and Theme editors miss a label since forever (I guess), this
 is a good opportunity to add it
 - the help text with instructions to escape from the keyboard trap related
 to the Tab key needs to be consistently used as target for `aria-
 describedby` on both the textarea elements and the CodeMirror editing
 areas
 - this is a nice opportunity to improve the help text and make it
 consistent, users and translators will be happy
 - the Additional CSS help toggle and panel `aria-expanded` attribute needs
 to be fixed, see https://github.com/WordPress/better-code-
 editing/issues/89

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