WordPress.org
Get WordPress

Make WordPress Core

Changeset 41586


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

Location:
trunk/src
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r41560 r41586  
    30363036}
    30373037
     3038#template label {
     3039    display: inline-block;
     3040    margin-bottom: 1em;
     3041    font-weight: 600;
     3042}
     3043
    30383044/* rtl:ignore */
    30393045#template textarea,

  • trunk/src/wp-admin/css/customize-controls.css

    r41558 r41586  
    551551    margin-bottom: 0;
    552552}
     553
    553554.customize-section-description ul {
    554555    margin-left: 1em;
    555556}
     557
    556558.customize-section-description ul > li {
    557559    list-style: disc;
    558560}
     561
    559562.section-description-buttons {
    560563    text-align: right;
    … …  
    11981201}
    11991202
     1203.customize-section-description-container + #customize-control-custom_css .customize-control-title {
     1204    margin-left: 12px;
     1205}
     1206
    12001207.customize-section-description-container + #customize-control-custom_css:last-child textarea {
    12011208    border-right: 0;
    … …  
    12041211    resize: none;
    12051212}
     1213
    12061214.customize-section-description-container + #customize-control-custom_css:last-child {
    12071215    margin-left: -12px;
    … …  
    12141222    height: calc( 100vh - 185px );
    12151223}
     1224
    12161225.CodeMirror-lint-tooltip,
    12171226.CodeMirror-hints {
    … …  
    12281237        margin-right: 0;
    12291238    }
     1239
    12301240    .customize-section-description-container + #customize-control-custom_css:last-child textarea {
    12311241        height: calc( 100vh - 140px );

  • trunk/src/wp-admin/js/customize-controls.js

    r41582 r41586  
    11771177                content.toggleClass( 'open' );
    11781178                content.slideToggle();
    1179                 content.attr( 'aria-expanded', function ( i, attr ) {
     1179                $( this ).attr( 'aria-expanded', function( i, attr ) {
    11801180                    return 'true' === attr ? 'false' : 'true';
    11811181                });
    … …  
    18891889            meta = panel.container.find( '.panel-meta:first' );
    18901890
    1891             meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    1892                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    1893                     return;
    1894                 }
    1895                 event.preventDefault(); // Keep this AFTER the key filter above
    1896 
     1891            meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
    18971892                if ( meta.hasClass( 'cannot-expand' ) ) {
    18981893                    return;
    … …  
    37813776
    37823777            control.editor = wp.codeEditor.initialize( $textarea, settings );
     3778
     3779            // Improve the editor accessibility.
     3780            $( control.editor.codemirror.display.lineDiv )
     3781                .attr({
     3782                    role: 'textbox',
     3783                    'aria-multiline': 'true',
     3784                    'aria-label': control.params.label,
     3785                    'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
     3786                });
     3787
     3788            // Focus the editor when clicking on its label.
     3789            control.container.find( 'label' ).on( 'click', function() {
     3790                control.editor.codemirror.focus();
     3791            });
    37833792
    37843793            /*
    … …  
    59695978            });
    59705979
    5971             // Set up the section desription behaviors.
     5980            // Set up the section description behaviors.
    59725981            sectionReady.done( function setupSectionDescription( section ) {
    59735982                var control = api.control( 'custom_css' );
    … …  
    59775986                    section.container.find( '.section-meta .customize-section-description:first' )
    59785987                        .removeClass( 'open' )
    5979                         .slideUp()
    5980                         .attr( 'aria-expanded', 'false' );
     5988                        .slideUp();
     5989
     5990                    section.container.find( '.customize-help-toggle' )
     5991                        .attr( 'aria-expanded', 'false' )
     5992                        .focus(); // Avoid focus loss.
    59815993                });
    59825994
    … …  
    59855997                    section.container.find( '.section-meta .customize-section-description:first' )
    59865998                        .addClass( 'open' )
    5987                         .show()
    5988                         .attr( 'aria-expanded', 'true' );
     5999                        .show();
     6000
     6001                    section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );
    59896002                }
    59906003            });

  • trunk/src/wp-admin/js/theme-plugin-editor.js

    r41376 r41586  
    8484        editor = wp.codeEditor.initialize( $( '#newcontent' ), codeEditorSettings );
    8585
     86        // Improve the editor accessibility.
     87        $( editor.codemirror.display.lineDiv )
     88            .attr({
     89                role: 'textbox',
     90                'aria-multiline': 'true',
     91                'aria-labelledby': 'theme-plugin-editor-label',
     92                'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
     93            });
     94
     95        // Focus the editor when clicking on its label.
     96        $( '#theme-plugin-editor-label' ).on( 'click', function() {
     97            editor.codemirror.focus();
     98        });
     99
    86100        component.instance = editor;
    87101    };

  • trunk/src/wp-admin/js/widgets/custom-html-widgets.js

    r41376 r41586  
    211211
    212212            control.editor = wp.codeEditor.initialize( control.fields.content, settings );
     213
     214            // Improve the editor accessibility.
     215            $( control.editor.codemirror.display.lineDiv )
     216                .attr({
     217                    role: 'textbox',
     218                    'aria-multiline': 'true',
     219                    'aria-labelledby': control.fields.content[0].id + '-label',
     220                    'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
     221                });
     222
     223            // Focus the editor when clicking on its label.
     224            $( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() {
     225                control.editor.codemirror.focus();
     226            });
     227
    213228            control.fields.content.on( 'change', function() {
    214229                if ( this.value !== control.editor.codemirror.getValue() ) {

  • trunk/src/wp-admin/plugin-editor.php

    r41560 r41586  
    196196        '<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>' .
    197197        '<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>' .
    198         '<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>' .
     198        '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
     199        '<ul>' .
     200        '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
     201        '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
     202        '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
     203        '</ul>' .
    199204        '<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>' .
    200205        ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
    … …  
    256261<div class="fileedit-sub">
    257262<div class="alignleft">
    258 <big><?php
     263<h2>
     264    <?php
    259265    if ( is_plugin_active( $plugin ) ) {
    260266        if ( is_writeable( $real_file ) ) {
    … …  
    274280        }
    275281    }
    276     ?></big>
     282    ?>
     283</h2>
    277284</div>
    278285<div class="alignright">
    … …  
    322329<form name="template" id="template" action="plugin-editor.php" method="post">
    323330    <?php wp_nonce_field('edit-plugin_' . $file) ?>
    324         <div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
    325         <input type="hidden" name="action" value="update" />
    326         <input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
    327         <input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
    328         <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
     331        <div>
     332            <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
     333            <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>
     334            <input type="hidden" name="action" value="update" />
     335            <input type="hidden" name="file" value="<?php echo esc_attr( $file ); ?>" />
     336            <input type="hidden" name="plugin" value="<?php echo esc_attr( $plugin ); ?>" />
     337            <input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
    329338        </div>
    330339        <?php if ( !empty( $docs_select ) ) : ?>

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

    r41399 r41586  
    2525'title'     => __('Overview'),
    2626'content'   =>
    27     '<p>' . __('You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.') . '</p>
    28     <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>
    29     <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>
    30     <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>
    31     <p>' . __('After typing in your edits, click Update File.') . '</p>
    32     <p>' . __('<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.') . '</p>
    33     <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>' .
    34     ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
     27    '<p>' . __( 'You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.' ) . '</p>' .
     28    '<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>' .
     29    '<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>' .
     30    '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
     31    '<ul>' .
     32    '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
     33    '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
     34    '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
     35    '</ul>' .
     36    '<p>' . __( 'After typing in your edits, click Update File.' ) . '</p>' .
     37    '<p>' . __( '<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.' ) . '</p>' .
     38    /* translators: placeholder is link to codex article about child themes */
     39    '<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>' .
     40    ( is_network_admin() ? '<p>' . __( 'Any edits to files from this screen will be reflected on all sites in the network.' ) . '</p>' : '' ),
    3541) );
    3642
    … …  
    295301    <form name="template" id="template" action="theme-editor.php" method="post">
    296302    <?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?>
    297         <div><textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
    298         <input type="hidden" name="action" value="update" />
    299         <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
    300         <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
    301         <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
     303        <div>
     304            <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
     305            <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>
     306            <input type="hidden" name="action" value="update" />
     307            <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
     308            <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
     309            <input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
    302310        </div>
    303311    <?php if ( ! empty( $functions ) ) : ?>

  • 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    }

  • trunk/src/wp-includes/class-wp-customize-panel.php

    r41390 r41586  
    364364                ?></span>
    365365                <# if ( data.description ) { #>
    366                     <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     366                    <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    367367                <# } #>
    368368            </div>

  • trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php

    r41558 r41586  
    7272        $json['code_type'] = $this->code_type;
    7373        $json['editor_settings'] = $this->editor_settings;
     74        $json['input_attrs'] = $this->input_attrs;
    7475        return $json;
    7576    }
    … …  
    99100        <# } #>
    100101        <div class="customize-control-notifications-container"></div>
    101         <textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
     102        <textarea id="{{ elementIdPrefix }}_editor"
     103            <# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
     104                {{{ key }}}="{{ value }}"
     105            <# }); #>
     106            ></textarea>
    102107        <?php
    103108    }

  • 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.