WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/24/2017 03:59:56 PM (4 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r41558 r41586  
    41694169        /* Custom CSS */
    41704170        $section_description = '<p>';
    4171         $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
     4171        $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' );
    41724172        $section_description .= sprintf(
    41734173            ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
    4174             esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
    4175             __( 'Learn more about CSS', 'default' ),
     4174            esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
     4175            __( 'Learn more about CSS' ),
    41764176            /* translators: accessibility text */
    4177             __( '(opens in a new window)', 'default' )
     4177            __( '(opens in a new window)' )
    41784178        );
    41794179        $section_description .= '</p>';
    41804180
    4181         $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
     4181        $section_description .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
    41824182        $section_description .= '<ul>';
    4183         $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
    4184         $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>';
     4183        $section_description .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
     4184        $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>';
     4185        $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>';
    41854186        $section_description .= '</ul>';
    41864187
     
    41894190            $section_description .= sprintf(
    41904191                /* translators: placeholder is link to user profile */
    4191                 __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
     4192                __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
    41924193                sprintf(
    41934194                    ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
    4194                     esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
    4195                     __( 'user profile', 'better-code-editing' ),
     4195                    esc_url( get_edit_profile_url() ),
     4196                    __( 'user profile' ),
    41964197                    /* translators: accessibility text */
    4197                     __( '(opens in a new window)', 'default' )
     4198                    __( '(opens in a new window)' )
    41984199                )
    41994200            );
     
    42024203
    42034204        $section_description .= '<p class="section-description-buttons">';
    4204         $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
     4205        $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close' ) . '</button>';
    42054206        $section_description .= '</p>';
    42064207
     
    42194220
    42204221        $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
    4221             'section'  => 'custom_css',
    4222             'settings' => array( 'default' => $custom_css_setting->id ),
    4223             'code_type' => 'text/css',
     4222            'label'       => __( 'CSS code' ),
     4223            'section'     => 'custom_css',
     4224            'settings'    => array( 'default' => $custom_css_setting->id ),
     4225            'code_type'   => 'text/css',
     4226            'input_attrs' => array(
     4227                'aria-describedby' => 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4',
     4228            ),
    42244229        ) ) );
    42254230    }
Note: See TracChangeset for help on using the changeset viewer.