WordPress.org

Make WordPress Core

Ticket #41872: 41872.3.diff

File 41872.3.diff, 24.3 KB (added by afercia, 4 years ago)
  • src/wp-admin/css/common.css

     
    30353035        height: calc( 100vh - 220px );
    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,
    30403046#docs-list {
  • src/wp-admin/css/customize-controls.css

     
    550550        margin-top: 22px;
    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;
    561564}
     
    11971200        height: 500px;
    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;
    12021209        border-left: 0;
     
    12031210        height: calc( 100vh - 185px );
    12041211        resize: none;
    12051212}
     1213
    12061214.customize-section-description-container + #customize-control-custom_css:last-child {
    12071215        margin-left: -12px;
    12081216        width: 299px;
     
    12131221.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
    12141222        height: calc( 100vh - 185px );
    12151223}
     1224
    12161225.CodeMirror-lint-tooltip,
    12171226.CodeMirror-hints {
    12181227        z-index: 500000 !important;
     
    12271236        .customize-section-description-container + #customize-control-custom_css:last-child {
    12281237                margin-right: 0;
    12291238        }
     1239
    12301240        .customize-section-description-container + #customize-control-custom_css:last-child textarea {
    12311241                height: calc( 100vh - 140px );
    12321242        }
  • src/wp-admin/js/customize-controls.js

     
    11761176                                content = meta.find( '.customize-section-description:first' );
    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                                });
    11821182                        });
     
    18881888
    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;
    18991894                                }
     
    37813776
    37823777                        control.editor = wp.codeEditor.initialize( $textarea, settings );
    37833778
     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                        });
     3792
    37843793                        // Refresh when receiving focus.
    37853794                        control.editor.codemirror.on( 'focus', function( codemirror ) {
    37863795                                codemirror.refresh();
     
    59735982                                });
    59745983                        });
    59755984
    5976                         // Set up the section desription behaviors.
     5985                        // Set up the section description behaviors.
    59775986                        sectionReady.done( function setupSectionDescription( section ) {
    59785987                                var control = api.control( 'custom_css' );
    59795988
     
    59815990                                section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
    59825991                                        section.container.find( '.section-meta .customize-section-description:first' )
    59835992                                                .removeClass( 'open' )
    5984                                                 .slideUp()
    5985                                                 .attr( 'aria-expanded', 'false' );
     5993                                                .slideUp();
     5994
     5995                                        section.container.find( '.customize-help-toggle' )
     5996                                                .attr( 'aria-expanded', 'false' )
     5997                                                .focus(); // Avoid focus loss.
    59865998                                });
    59875999
    59886000                                // Reveal help text if setting is empty.
     
    59896001                                if ( control && ! control.setting.get() ) {
    59906002                                        section.container.find( '.section-meta .customize-section-description:first' )
    59916003                                                .addClass( 'open' )
    5992                                                 .show()
    5993                                                 .attr( 'aria-expanded', 'true' );
     6004                                                .show();
     6005
     6006                                        section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );
    59946007                                }
    59956008                        });
    59966009                })();
  • src/wp-admin/js/theme-plugin-editor.js

     
    8383
    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        };
    88102
  • src/wp-admin/js/widgets/custom-html-widgets.js

     
    210210                        });
    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() ) {
    215230                                        control.editor.codemirror.setValue( this.value );
  • src/wp-admin/plugin-editor.php

     
    195195                '<p>' . __('You can use the editor to make changes to any of your plugins&#8217; individual PHP files. Be aware that if you make changes, plugins updates will overwrite your customizations.') . '</p>' .
    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>' : '' )
    201206        ) );
     
    255260
    256261<div class="fileedit-sub">
    257262<div class="alignleft">
    258 <big><?php
     263<h2><?php
    259264        if ( is_plugin_active( $plugin ) ) {
    260265                if ( is_writeable( $real_file ) ) {
    261266                        /* translators: %s: plugin file name */
     
    273278                        echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . esc_html( $file ) . '</strong>' );
    274279                }
    275280        }
    276         ?></big>
     281        ?></h2>
    277282</div>
    278283<div class="alignright">
    279284        <form action="plugin-editor.php" method="post">
     
    321326</div>
    322327<form name="template" id="template" action="plugin-editor.php" method="post">
    323328        <?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; ?>" />
     329                <div>
     330                        <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
     331                        <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>
     332                        <input type="hidden" name="action" value="update" />
     333                        <input type="hidden" name="file" value="<?php echo esc_attr( $file ) ?>" />
     334                        <input type="hidden" name="plugin" value="<?php echo esc_attr( $plugin ) ?>" />
     335                        <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
    329336                </div>
    330337                <?php if ( !empty( $docs_select ) ) : ?>
    331338                <div id="documentation" class="hide-if-no-js"><label for="docs-list"><?php _e('Documentation:') ?></label> <?php echo $docs_select ?> <input type="button" class="button" value="<?php esc_attr_e( 'Look Up' ) ?> " onclick="if ( '' != jQuery('#docs-list').val() ) { window.open( 'https://api.wordpress.org/core/handbook/1.0/?function=' + escape( jQuery( '#docs-list' ).val() ) + '&amp;locale=<?php echo urlencode( get_user_locale() ) ?>&amp;version=<?php echo urlencode( get_bloginfo( 'version' ) ) ?>&amp;redirect=true'); }" /></div>
  • src/wp-admin/theme-editor.php

     
    2424'id'            => 'overview',
    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        '<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>' .
     39        ( is_network_admin() ? '<p>' . __( 'Any edits to files from this screen will be reflected on all sites in the network.' ) . '</p>' : '' )
    3540) );
    3641
    3742get_current_screen()->set_help_sidebar(
     
    294299else : ?>
    295300        <form name="template" id="template" action="theme-editor.php" method="post">
    296301        <?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; ?>" />
     302                <div>
     303                        <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
     304                        <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>
     305                        <input type="hidden" name="action" value="update" />
     306                        <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
     307                        <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
     308                        <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
    302309                </div>
    303310        <?php if ( ! empty( $functions ) ) : ?>
    304311                <div id="documentation" class="hide-if-no-js">
  • src/wp-includes/class-wp-customize-manager.php

     
    41684168
    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>',
    41744174                        esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
     
    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
    41874188                if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
     
    41884189                        $section_description .= '<p>';
    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 */
    41974198                                        __( '(opens in a new window)', 'default' )
    41984199                                )
     
    42184219                $this->add_setting( $custom_css_setting );
    42194220
    42204221                $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
     4222                        'label'    => __( 'CSS code' ),
    42214223                        'section'  => 'custom_css',
    42224224                        'settings' => array( 'default' => $custom_css_setting->id ),
    42234225                        '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        }
    42264231
  • src/wp-includes/class-wp-customize-panel.php

     
    363363                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
    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>
    369369                        <# if ( data.description ) { #>
  • src/wp-includes/customize/class-wp-customize-code-editor-control.php

     
    7171                $json = parent::json();
    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        }
    7677
     
    9899                        <span class="description customize-control-description">{{{ data.description }}}</span>
    99100                <# } #>
    100101                <div class="customize-control-notifications-container"></div>
    101                 <textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
     102                <# if ( data.input_attrs['aria-describedby'] ) { #>
     103                        <textarea id="{{ elementIdPrefix }}_editor" class="code" aria-describedby="{{ data.input_attrs['aria-describedby'] }}"></textarea>
     104                <# } else { #>
     105                        <textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
     106                <# } #>
    102107                <?php
    103108        }
    104109}
  • src/wp-includes/widgets/class-wp-widget-custom-html.php

     
    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:', 'default' ); ?></label>
    221221                                <textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
    222222                        </p>
    223223
     
    254254                $content .= __( 'Use the Custom HTML widget to add arbitrary HTML code to your widget areas.' );
    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>';
     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)', 'default' )
     268                                )
     269                        );
     270                        $content .= '</p>';
    262271
    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>';
     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(
    278281                        'id' => 'custom_html_widget',