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

[WordPress Trac]

#41872: Code Editor: Minor accessibility improvements to the CodeMirror editing
areas
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  high                     |   Milestone:  4.9
Component:  Customize                |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots                        |  administration
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-patch has-screenshots needs-refresh => has-patch has-
     screenshots


Comment:

 [attachment:41872.3.diff] tries to refactor the patch to keep the help
 text with the unordered list. Things to check:
 - please check how `input_attrs` is passed to the JS template
 - added a third item to the "keyboard trap" help text list and reviewed
 the pre-existing text to make it a bit shorter and more clear; feedback
 for better wording/English welcome
 - the "keyboard trap" help text is now the same in all the 4 places where
 it is used; maybe it could use a function to avoid repetition. Not sure
 where the function should go to be available both in the admin screens and
 in the Customizer
 - Custom HTML widget: some help text should be displayed only when
 CodeMirror is enabled, made some changes accordingly
 - Additional CSS: focus issue when clicking on the label, see comment
 above
 - removed the URL fragment identifier used for the link to the profile
 page `profile.php#syntax_highlighting` because in the profile page the
 related control stays hidden behind the admin toolbar (see screenshot
 below)
 - does `get_edit_profile_url()` needs to be escaped? see `esc_url(
 get_edit_profile_url() )`

 About translations: the "keyboard trap" help text is now composed by 4
 strings. As mentioned before, not sure this is so ideal for translation
 and I'd like to have some feedback. /cc @ocean90 @SergeyBiryukov

 Screenshot of the profile page with the `Syntax Highlighting` control
 hidden by the admin bar:

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

 Screenshot of the keyboard trap help text in the Customizer > Additional
 CSS:

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

 (the same text is used in the plugin/theme editors and targeted by aria-
 describedby for the Custom HTML widget)

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