vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-05 21:24:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: CodeMirror editing areas minor improvements.

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

25
src/wp-admin/plugin-editor.php
View File

@@ -195,7 +195,12 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {
'<p>' . __('You can use the editor to make changes to any of your plugins&#8217; individual PHP files. Be aware that if you make changes, plugins updates will overwrite your customizations.') . '</p>' .
'<p>' . __('Choose a plugin to edit from the dropdown menu and click the Select button. Click once on any file name to load it in the editor, and make your changes. Don&#8217;t forget to save your changes (Update File) when you&#8217;re finished.') . '</p>' .
'<p>' . __('The Documentation menu below the editor lists the PHP functions recognized in the plugin file. Clicking Look Up takes you to a web page about that particular function.') . '</p>' .
'<p id="newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>' .
'<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
'<ul>' .
'<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
'<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
'<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
'</ul>' .
'<p>' . __('If you want to make changes but don&#8217;t want them to be overwritten when the plugin is updated, you may be ready to think about writing your own plugin. For information on how to edit plugins, write your own from scratch, or just better understand their anatomy, check out the links below.') . '</p>' .
( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
) );
@@ -255,7 +260,8 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {
<div class="fileedit-sub">
<div class="alignleft">
<big><?php
<h2>
<?php
if ( is_plugin_active( $plugin ) ) {
if ( is_writeable( $real_file ) ) {
/* translators: %s: plugin file name */
@@ -273,7 +279,8 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {
echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . esc_html( $file ) . '</strong>' );
}
}
?></big>
?>
</h2>
</div>
<div class="alignright">
<form action="plugin-editor.php" method="post">
@@ -321,11 +328,13 @@ foreach ( $plugin_files as $plugin_file ) :
</div>
<form name="template" id="template" action="plugin-editor.php" method="post">
<?php wp_nonce_field('edit-plugin_' . $file) ?>
<div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
<input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
<input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
<div>
<label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
<textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"><?php echo $content; ?></textarea>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="file" value="<?php echo esc_attr( $file ); ?>" />
<input type="hidden" name="plugin" value="<?php echo esc_attr( $plugin ); ?>" />
<input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
</div>
<?php if ( !empty( $docs_select ) ) : ?>
<div id="documentation" class="hide-if-no-js"><label for="docs-list"><?php _e('Documentation:') ?></label> <?php echo $docs_select ?> <input type="button" class="button" value="<?php esc_attr_e( 'Look Up' ) ?> " onclick="if ( '' != jQuery('#docs-list').val() ) { window.open( 'https://api.wordpress.org/core/handbook/1.0/?function=' + escape( jQuery( '#docs-list' ).val() ) + '&amp;locale=<?php echo urlencode( get_user_locale() ) ?>&amp;version=<?php echo urlencode( get_bloginfo( 'version' ) ) ?>&amp;redirect=true'); }" /></div>