Changeset 41586 for trunk/src/wp-admin/theme-editor.php

Timestamp:

09/24/2017 03:59:56 PM (9 years ago)

Author:

afercia

Message:

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.

File:

• trunk/src/wp-admin/theme-editor.php (modified) (2 diffs)

trunk/src/wp-admin/theme-editor.php

@@ -25 +25 @@
 'title'     => __('Overview'),
 'content'   =>
-    '<p>' . __('You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.') . '</p>
-    <p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme&#8217;s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p>
-    <p>' . __('For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material 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>' . __('After typing in your edits, click Update File.') . '</p>
-    <p>' . __('<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.') . '</p>
-    <p>' . sprintf( __('Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.'), __('https://codex.wordpress.org/Child_Themes') ) . '</p>' .
-    ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
+    '<p>' . __( 'You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.' ) . '</p>' .
+    '<p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme&#8217;s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p>' .
+    '<p>' . __( 'For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.' ) . '</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>' . __( 'After typing in your edits, click Update File.' ) . '</p>' .
+    '<p>' . __( '<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.' ) . '</p>' .
+    /* translators: placeholder is link to codex article about child themes */
+    '<p>' . sprintf( __( 'Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.' ), __( 'https://codex.wordpress.org/Child_Themes' ) ) . '</p>' .
+    ( is_network_admin() ? '<p>' . __( 'Any edits to files from this screen will be reflected on all sites in the network.' ) . '</p>' : '' ),
 ) );
 
@@ -295 +301 @@
     <form name="template" id="template" action="theme-editor.php" method="post">
     <?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?>
-        <div><textarea cols="70" rows="30" 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( $relative_file ); ?>" />
-        <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
-        <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="30" 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( $relative_file ); ?>" />
+            <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
+            <input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
         </div>
     <?php if ( ! empty( $functions ) ) : ?>