Changeset 41586 for trunk/src/wp-includes/class-wp-customize-manager.php

Timestamp:

09/24/2017 03:59:56 PM (8 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-includes/class-wp-customize-manager.php (modified) (4 diffs)

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -4169 +4169 @@
         /* Custom CSS */
         $section_description = '<p>';
-        $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
+        $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' );
         $section_description .= sprintf(
             ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
-            esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
-            __( 'Learn more about CSS', 'default' ),
+            esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
+            __( 'Learn more about CSS' ),
             /* translators: accessibility text */
-            __( '(opens in a new window)', 'default' )
+            __( '(opens in a new window)' )
         );
         $section_description .= '</p>';
 
-        $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
+        $section_description .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
         $section_description .= '<ul>';
-        $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
-        $section_description .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.', 'better-code-editing' ) . '</li>';
+        $section_description .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
+        $section_description .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
+        $section_description .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
         $section_description .= '</ul>';
 
@@ -4189 +4190 @@
             $section_description .= sprintf(
                 /* translators: placeholder is link to user profile */
-                __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
+                __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
                 sprintf(
                     ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
-                    esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
-                    __( 'user profile', 'better-code-editing' ),
+                    esc_url( get_edit_profile_url() ),
+                    __( 'user profile' ),
                     /* translators: accessibility text */
-                    __( '(opens in a new window)', 'default' )
+                    __( '(opens in a new window)' )
                 )
             );
@@ -4202 +4203 @@
 
         $section_description .= '<p class="section-description-buttons">';
-        $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
+        $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close' ) . '</button>';
         $section_description .= '</p>';
 
@@ -4219 +4220 @@
 
         $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
-            'section'  => 'custom_css',
-            'settings' => array( 'default' => $custom_css_setting->id ),
-            'code_type' => 'text/css',
+            'label'       => __( 'CSS code' ),
+            'section'     => 'custom_css',
+            'settings'    => array( 'default' => $custom_css_setting->id ),
+            'code_type'   => 'text/css',
+            'input_attrs' => array(
+                'aria-describedby' => 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4',
+            ),
         ) ) );
     }