WordPress.org
Get WordPress

Make WordPress Core

Ticket #41872: 41872.5.diff

File 41872.5.diff, 24.9 KB (added by westonruter, 6 years ago)

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

    diff --git src/wp-admin/css/common.css src/wp-admin/css/common.css
index d22368d637..2d67f34f9b 100644
    img { 
    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 

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
index cc5a37f08c..f2f36739e5 100644
    p.customize-section-description { 
    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}
    … … p.customize-section-description { 
    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;
    … … p.customize-section-description { 
    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;
    … … p.customize-section-description { 
    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 

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
index c80ef86e52..b91777d142 100644
     
    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 

    diff --git src/wp-admin/js/theme-plugin-editor.js src/wp-admin/js/theme-plugin-editor.js
index f43363b0c7..8e016c3837 100644
    wp.themePluginEditor = (function( $ ) { 
    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 

    diff --git src/wp-admin/js/widgets/custom-html-widgets.js src/wp-admin/js/widgets/custom-html-widgets.js
index 5f49b79279..53be441eda 100644
    wp.customHtmlWidgets = ( function( $ ) { 
    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 

    diff --git src/wp-admin/plugin-editor.php src/wp-admin/plugin-editor.php
index 239316ae2b..8925a5b8dd 100644
    if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { 
    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        ) );
    … … if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { 
    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 */
    … … if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { 
    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">
    … … foreach ( $plugin_files as $plugin_file ) : 
    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 

    diff --git src/wp-admin/theme-editor.php src/wp-admin/theme-editor.php
index cefe25648f..f5f1be8fc3 100644
    get_current_screen()->add_help_tab( array( 
    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(
    … … if ( $allowed_files ) : 
    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 $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 

    diff --git src/wp-includes/class-wp-customize-manager.php src/wp-includes/class-wp-customize-manager.php
index 648740df18..4118412d2d 100644
    final class WP_Customize_Manager { 
    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' ) ),
    … … final class WP_Customize_Manager { 
    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                                )
    … … final class WP_Customize_Manager { 
    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 

    diff --git src/wp-includes/class-wp-customize-panel.php src/wp-includes/class-wp-customize-panel.php
index 53b90bde65..731dd2080a 100644
    class WP_Customize_Panel { 
    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 

    diff --git src/wp-includes/customize/class-wp-customize-code-editor-control.php src/wp-includes/customize/class-wp-customize-code-editor-control.php
index b3a3c99eeb..1b2be4d57d 100644
    class WP_Customize_Code_Editor_Control extends WP_Customize_Control { 
    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
    … … class WP_Customize_Code_Editor_Control extends WP_Customize_Control { 
    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 

    diff --git src/wp-includes/widgets/class-wp-widget-custom-html.php src/wp-includes/widgets/class-wp-widget-custom-html.php
index 30e524bf35..595a668f5b 100644
    class WP_Widget_Custom_HTML extends WP_Widget { 
    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
    … … class WP_Widget_Custom_HTML extends WP_Widget { 
    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',