WordPress.org

Make WordPress Core

Ticket #41872: 41872.6.diff

File 41872.6.diff, 26.0 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                        /*
    37853794                         * When the CodeMirror instance changes, mirror to the textarea,
    37863795                         * where we have our "true" change event handler bound.
    … …  
    59685977                                });
    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' );
    59745983
    … …  
    59765985                                section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
    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
    59835995                                // Reveal help text if setting is empty.
    … …  
    59845996                                if ( control && ! control.setting.get() ) {
    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                        });
    59916004                })();

  • 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>
     264        <?php
    259265        if ( is_plugin_active( $plugin ) ) {
    260266                if ( is_writeable( $real_file ) ) {
    261267                        /* translators: %s: plugin file name */
    … …  
    273279                        echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . esc_html( $file ) . '</strong>' );
    274280                }
    275281        }
    276         ?></big>
     282        ?>
     283</h2>
    277284</div>
    278285<div class="alignright">
    279286        <form action="plugin-editor.php" method="post">
    … …  
    321328</div>
    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 ) ) : ?>
    331340                <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        /* 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
    3743get_current_screen()->set_help_sidebar(
    … …  
    294300else : ?>
    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 ) ) : ?>
    304312                <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>',
    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
    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 */
    4197                                         __( '(opens in a new window)', 'default' )
     4198                                        __( '(opens in a new window)' )
    41984199                                )
    41994200                        );
    42004201                        $section_description .= '</p>';
    … …  
    42014202                }
    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
    42074208                $this->add_section( 'custom_css', array(
    … …  
    42184219                $this->add_setting( $custom_css_setting );
    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        }
    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                <textarea id="{{ elementIdPrefix }}_editor"
     103                        <# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
     104                                {{{ key }}}="{{ value }}"
     105                        <# }); #>
     106                        ></textarea>
    102107                <?php
    103108        }
    104109}

  • src/wp-includes/widgets/class-wp-widget-custom-html.php

     
    212212                <script type="text/html" id="tmpl-widget-custom-html-control-fields">
    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>
    223223
    … …  
    230230                                <?php if ( ! empty( $disallowed_html ) ) : ?>
    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>
    236236                                        <# } #>
    … …  
    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)' )
     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',