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/widgets/class-wp-widget-custom-html.php

    r41558 r41586  
    213213            <# var elementIdPrefix = 'el' + String( Math.random() ).replace( /\D/g, '' ) + '_' #>
    214214            <p>
    215                 <label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:', 'default' ); ?></label>
     215                <label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
    216216                <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
    217217            </p>
    218218
    219219            <p>
    220                 <label for="{{ elementIdPrefix }}content" class="screen-reader-text"><?php esc_html_e( 'Content:', 'default' ); ?></label>
     220                <label for="{{ elementIdPrefix }}content" id="{{ elementIdPrefix }}content-label"><?php esc_html_e( 'Content:' ); ?></label>
    221221                <textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
    222222            </p>
     
    231231                    <# if ( data.codeEditorDisabled ) { #>
    232232                        <p>
    233                             <?php _e( 'Some HTML tags are not permitted, including:', 'default' ); ?>
     233                            <?php _e( 'Some HTML tags are not permitted, including:' ); ?>
    234234                            <code><?php echo join( '</code>, <code>', $disallowed_html ); ?></code>
    235235                        </p>
     
    255255        $content .= '</p>';
    256256
    257         $content .= '<p>' . __( 'When using a keyboard to navigate:' ) . '</p>';
    258         $content .= '<ul>';
    259         $content .= '<li>' . __( 'In the HTML edit field, Tab enters a tab character.' ) . '</li>';
    260         $content .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.' ) . '</li>';
    261         $content .= '</ul>';
    262 
    263         $content .= '<p>';
    264         $content .= sprintf(
    265             /* translators: placeholder is link to user profile */
    266             __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plan text mode.' ),
    267             sprintf(
    268                 ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
    269                 esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
    270                 __( 'user profile' ),
    271                 /* translators: accessibility text */
    272                 __( '(opens in a new window)', 'default' )
    273             )
    274         );
    275         $content .= '</p>';
     257        if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
     258            $content .= '<p>';
     259            $content .= sprintf(
     260                /* translators: placeholder is link to user profile */
     261                __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
     262                sprintf(
     263                    ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
     264                    esc_url( get_edit_profile_url() ),
     265                    __( 'user profile' ),
     266                    /* translators: accessibility text */
     267                    __( '(opens in a new window)' )
     268                )
     269            );
     270            $content .= '</p>';
     271
     272            $content .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
     273            $content .= '<ul>';
     274            $content .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
     275            $content .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
     276            $content .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
     277            $content .= '</ul>';
     278        }
    276279
    277280        $screen->add_help_tab( array(
Note: See TracChangeset for help on using the changeset viewer.