WordPress.org

Make WordPress Core

Ticket #41872: 41872.2.diff

File 41872.2.diff, 20.2 KB (added by westonruter, 4 years ago)

Use editor.codemirror.display.lineDiv for obtaining .CodeMirror-code

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

    diff --git src/wp-admin/css/common.css src/wp-admin/css/common.css
    index 6fe50ac93c..9df2a9827b 100644
    img { 
    30273027        height: calc( 100vh - 220px );
    30283028}
    30293029
     3030#template label {
     3031        display: inline-block;
     3032        margin-bottom: 1em;
     3033        font-weight: 600;
     3034}
     3035
    30303036/* rtl:ignore */
    30313037#template textarea,
    30323038#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 fd272d849e..bcf308f03e 100644
    p.customize-section-description { 
    550550        margin-top: 22px;
    551551        margin-bottom: 0;
    552552}
    553 .customize-section-description ul {
    554         margin-left: 1em;
    555 }
    556 .customize-section-description ul > li {
    557         list-style: disc;
    558 }
     553
    559554.section-description-buttons {
    560555        text-align: right;
    561556}
    p.customize-section-description { 
    11551150        tab-size: 4;
    11561151}
    11571152
     1153.customize-section-description-container + #customize-control-custom_css .customize-control-title {
     1154        margin-left: 12px;
     1155}
     1156
    11581157.customize-section-description-container + #customize-control-custom_css:last-child textarea {
    11591158        border-right: 0;
    11601159        border-left: 0;
    11611160        height: calc( 100vh - 185px );
    11621161        resize: none;
    11631162}
     1163
    11641164.customize-section-description-container + #customize-control-custom_css:last-child {
    11651165        margin-left: -12px;
    11661166        width: 299px;
    p.customize-section-description { 
    11711171.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
    11721172        height: calc( 100vh - 185px );
    11731173}
     1174
    11741175.CodeMirror-lint-tooltip,
    11751176.CodeMirror-hints {
    11761177        z-index: 500000 !important;
    p.customize-section-description { 
    11851186        .customize-section-description-container + #customize-control-custom_css:last-child {
    11861187                margin-right: 0;
    11871188        }
     1189
    11881190        .customize-section-description-container + #customize-control-custom_css:last-child textarea {
    11891191                height: calc( 100vh - 140px );
    11901192        }
  • src/wp-admin/js/customize-controls.js

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
    index f72110fce1..425eef4268 100644
     
    11591159                                content = meta.find( '.customize-section-description:first' );
    11601160                                content.toggleClass( 'open' );
    11611161                                content.slideToggle();
    1162                                 content.attr( 'aria-expanded', function ( i, attr ) {
     1162                                $( this ).attr( 'aria-expanded', function ( i, attr ) {
    11631163                                        return 'true' === attr ? 'false' : 'true';
    11641164                                });
    11651165                        });
     
    18711871
    18721872                        meta = panel.container.find( '.panel-meta:first' );
    18731873
    1874                         meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    1875                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    1876                                         return;
    1877                                 }
    1878                                 event.preventDefault(); // Keep this AFTER the key filter above
    1879 
     1874                        meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function( event ) {
    18801875                                if ( meta.hasClass( 'cannot-expand' ) ) {
    18811876                                        return;
    18821877                                }
     
    56565651
    56575652                        ready = $.when( sectionReady, controlReady );
    56585653
    5659                         // Set up the section desription behaviors.
     5654                        // Set up the section description behaviors.
    56605655                        ready.done( function setupSectionDescription( section, control ) {
    56615656
    56625657                                // Close the section description when clicking the close button.
    56635658                                section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
    56645659                                        section.container.find( '.section-meta .customize-section-description:first' )
    56655660                                                .removeClass( 'open' )
    5666                                                 .slideUp()
    5667                                                 .attr( 'aria-expanded', 'false' );
     5661                                                .slideUp();
     5662                                        section.container.find( '.customize-help-toggle' )
     5663                                                .attr( 'aria-expanded', 'false' )
     5664                                                .focus(); // Avoid focus loss.
    56685665                                });
    56695666
    56705667                                // Reveal help text if setting is empty.
    56715668                                if ( ! control.setting.get() ) {
    56725669                                        section.container.find( '.section-meta .customize-section-description:first' )
    56735670                                                .addClass( 'open' )
    5674                                                 .show()
    5675                                                 .attr( 'aria-expanded', 'true' );
     5671                                                .show();
     5672                                        section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );
    56765673                                }
    56775674                        });
    56785675
     
    57605757
    57615758                                        control.editor = wp.codeEditor.initialize( $textarea, settings );
    57625759
     5760                                        // Improve the editor accessibility.
     5761                                        $( control.editor.codemirror.display.lineDiv )
     5762                                                .attr({
     5763                                                        role: 'textbox',
     5764                                                        'aria-multiline': 'true',
     5765                                                        'aria-label': control.params.label,
     5766                                                        'aria-describedby': 'editor-keyboard-trap-help'
     5767                                                });
     5768
    57635769                                        // Refresh when receiving focus.
    57645770                                        control.editor.codemirror.on( 'focus', function( codemirror ) {
    57655771                                                codemirror.refresh();
  • 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..55ed2b5374 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'
     93                        });
     94
    8695                component.instance = editor;
    8796        };
    8897
  • 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..a6d3074d39 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'
     221                                });
     222
    213223                        control.fields.content.on( 'change', function() {
    214224                                if ( this.value !== control.editor.codemirror.getValue() ) {
    215225                                        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 9816a5d48c..4c593be0dc 100644
    if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { 
    178178                '<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>' .
    179179                '<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>' .
    180180                '<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>' .
    181                 '<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>' .
     181                '<p id="editor-keyboard-trap-help">' . __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' ) . '</p>' .
    182182                '<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>' .
    183183                ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
    184184        ) );
    if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { 
    238238
    239239<div class="fileedit-sub">
    240240<div class="alignleft">
    241 <big><?php
     241<h2><?php
    242242        if ( is_plugin_active( $plugin ) ) {
    243243                if ( is_writeable( $real_file ) ) {
    244244                        /* translators: %s: plugin file name */
    if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { 
    256256                        echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . $file . '</strong>' );
    257257                }
    258258        }
    259         ?></big>
     259        ?></h2>
    260260</div>
    261261<div class="alignright">
    262262        <form action="plugin-editor.php" method="post">
    foreach ( $plugin_files as $plugin_file ) : 
    304304</div>
    305305<form name="template" id="template" action="plugin-editor.php" method="post">
    306306        <?php wp_nonce_field('edit-plugin_' . $file) ?>
    307                 <div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
    308                 <input type="hidden" name="action" value="update" />
    309                 <input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
    310                 <input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
    311                 <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
     307                <div>
     308                        <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
     309                        <textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help"><?php echo $content; ?></textarea>
     310                        <input type="hidden" name="action" value="update" />
     311                        <input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
     312                        <input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
     313                        <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
    312314                </div>
    313315                <?php if ( !empty( $docs_select ) ) : ?>
    314316                <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 2fb8d20de5..1d910d19d5 100644
    get_current_screen()->add_help_tab( array( 
    2727        '<p>' . __('You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.') . '</p>
    2828        <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>
    2929        <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>
     30        <p id="editor-keyboard-trap-help">' . __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' ) . '</p>
    3131        <p>' . __('After typing in your edits, click Update File.') . '</p>
    3232        <p>' . __('<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.') . '</p>
    3333        <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>' .
    if ( $allowed_files ) : 
    292292else : ?>
    293293        <form name="template" id="template" action="theme-editor.php" method="post">
    294294        <?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?>
    295                 <div><textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
    296                 <input type="hidden" name="action" value="update" />
    297                 <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
    298                 <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
    299                 <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
     295                <div>
     296                        <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
     297                        <textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help"><?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; ?>" />
    300302                </div>
    301303        <?php if ( ! empty( $functions ) ) : ?>
    302304                <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 cead2d0ce9..21987055ef 100644
    final class WP_Customize_Manager { 
    42024202
    42034203                /* Custom CSS */
    42044204                $section_description = '<p>';
    4205                 $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
     4205                $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' );
    42064206                $section_description .= sprintf(
    42074207                        ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
    42084208                        esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
    final class WP_Customize_Manager { 
    42124212                );
    42134213                $section_description .= '</p>';
    42144214
    4215                 $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
    4216                 $section_description .= '<ul>';
    4217                 $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
    4218                 $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>';
    4219                 $section_description .= '</ul>';
     4215                $section_description .= '<p id="editor-keyboard-trap-help">';
     4216                $section_description .= __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' );
     4217                $section_description .= '</p>';
    42204218
    42214219                if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
    42224220                        $section_description .= '<p>';
    42234221                        $section_description .= sprintf(
    42244222                                /* translators: placeholder is link to user profile */
    4225                                 __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
     4223                                __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
    42264224                                sprintf(
    42274225                                        ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
    42284226                                        esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
    4229                                         __( 'user profile', 'better-code-editing' ),
     4227                                        __( 'user profile' ),
    42304228                                        /* translators: accessibility text */
    42314229                                        __( '(opens in a new window)', 'default' )
    42324230                                )
    final class WP_Customize_Manager { 
    42524250                $this->add_setting( $custom_css_setting );
    42534251
    42544252                $this->add_control( 'custom_css', array(
     4253                        'label'    => __( 'CSS code' ),
    42554254                        'type'     => 'textarea',
    42564255                        'section'  => 'custom_css',
    42574256                        'settings' => array( 'default' => $custom_css_setting->id ),
    42584257                        'input_attrs' => array(
    4259                                 'class' => 'code', // Ensures contents displayed as LTR instead of RTL.
     4258                                'class'            => 'code', // Ensures contents displayed as LTR instead of RTL.
     4259                                'aria-describedby' => 'editor-keyboard-trap-help'
    42604260                        ),
    42614261                ) );
    42624262        }
  • 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 de839f5ce0..2cfce8ccfe 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/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 7e382960fc..3958565913 100644
    class WP_Widget_Custom_HTML extends WP_Widget { 
    213213                        </p>
    214214
    215215                        <p>
    216                                 <label for="{{ elementIdPrefix }}content" class="screen-reader-text"><?php esc_html_e( 'Content:', 'default' ); ?></label>
    217                                 <textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
     216                                <label for="{{ elementIdPrefix }}content" id="{{ elementIdPrefix }}content-label"><?php esc_html_e( 'Content:', 'default' ); ?></label>
     217                                <textarea id="{{ elementIdPrefix }}content" aria-describedby="editor-keyboard-trap-help" class="widefat code content" rows="16" cols="20"></textarea>
    218218                        </p>
    219219
    220220                        <?php if ( ! current_user_can( 'unfiltered_html' ) ) : ?>
    class WP_Widget_Custom_HTML extends WP_Widget { 
    250250                $content .= __( 'Use the Custom HTML widget to add arbitrary HTML code to your widget areas.' );
    251251                $content .= '</p>';
    252252
    253                 $content .= '<p>' . __( 'When using a keyboard to navigate:' ) . '</p>';
    254                 $content .= '<ul>';
    255                 $content .= '<li>' . __( 'In the HTML edit field, Tab enters a tab character.' ) . '</li>';
    256                 $content .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.' ) . '</li>';
    257                 $content .= '</ul>';
     253                $content .= '<p id="editor-keyboard-trap-help">';
     254                $content .= __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' );
     255                $content .= '</p>';
    258256
    259257                $content .= '<p>';
    260258                $content .= sprintf(
    261259                        /* translators: placeholder is link to user profile */
    262                         __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plan text mode.' ),
     260                        __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
    263261                        sprintf(
    264262                                ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
    265263                                esc_url( get_edit_profile_url() . '#syntax_highlighting' ),