Accessibility: CodeMirror editing areas minor improvements.

- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled
- adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea
- standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability
- use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors
- fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle
- moves focus to the CodeMirror editing area when clicking on the associated label
- in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen
- also, removes a few textdomain leftovers, see `better-code-editing` and `default`

Props westonruter, melchoyce, afercia.
Fixes #41872.


git-svn-id: https://develop.svn.wordpress.org/trunk@41586 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2017-09-24 15:59:56 +00:00
parent be2166126d
commit 8b16d8976f
11 changed files with 159 additions and 71 deletions
+1 -1
View File
@@ -363,7 +363,7 @@ class WP_Customize_Panel {
echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
?></span>
<# if ( data.description ) { #>
<button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
<# } #>
</div>
<# if ( data.description ) { #>