Make WordPress Core

Ticket #50322: 50322.2.diff

File 50322.2.diff, 3.6 KB (added by afercia, 5 years ago)
  • src/js/_enqueues/admin/site-health.js

     
    1010
    1111        var __ = wp.i18n.__,
    1212                _n = wp.i18n._n,
    13                 sprintf = wp.i18n.sprintf;
     13                sprintf = wp.i18n.sprintf,
     14                data,
     15                clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ),
     16                isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length,
     17                pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ),
     18                successTimeout;
    1419
    15         var data;
    16         var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
    17         var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length;
    18         var pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' );
    19 
    2020        // Debug information copy section.
    2121        clipboard.on( 'success', function( e ) {
    22                 var $wrapper = $( e.trigger ).closest( 'div' );
    23                 $( '.success', $wrapper ).addClass( 'visible' );
     22                var triggerElement = $( e.trigger ),
     23                        successElement = $( '.success', triggerElement.closest( 'div' ) );
    2424
    25                 wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
     25                // Clear the selection and move focus back to the trigger.
     26                e.clearSelection();
     27                // Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
     28                triggerElement.focus();
     29
     30                // Show success visual feedback.
     31                clearTimeout( successTimeout );
     32                successElement.removeClass( 'hidden' );
     33
     34                // Hide success visual feedback after 3 seconds since last success.
     35                successTimeout = setTimeout( function() {
     36                        successElement.addClass( 'hidden' );
     37                        // Remove the visually hidden textarea so that it isn't perceived by assistive technologies.
     38                        if ( clipboard.clipboardAction.fakeElem && clipboard.clipboardAction.removeFake ) {
     39                                clipboard.clipboardAction.removeFake();
     40                        }
     41                }, 3000 );
     42
     43                // Handle success audible feedback.
     44                wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) );
    2645        } );
    2746
    2847        // Accordion handling in various areas.
  • src/wp-admin/css/site-health.css

     
    203203}
    204204
    205205.site-health-copy-buttons .copy-button-wrapper {
     206        display: inline-flex;
     207        align-items: center;
    206208        margin: 0.5rem 0 1rem;
    207209}
    208210
    209211.site-health-copy-buttons .success {
    210         display: none;
    211212        color: #40860a;
    212         line-height: 1.8;
    213213        margin-left: 0.5rem;
    214214}
    215215
    216 .site-health-copy-buttons .success.visible {
    217         display: inline-block;
    218         height: 30px;
    219         line-height: 2.30769231;
    220 }
    221 
    222216.site-status-has-issues.hide {
    223217        display: none;
    224218}
     
    452446                padding-bottom: 0;
    453447                font-weight: 600;
    454448        }
     449
     450        .wp-core-ui .site-health-copy-buttons .copy-button {
     451                margin-bottom: 0;
     452        }
    455453}
    456454
    457455/* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
  • src/wp-admin/site-health-info.php

     
    9999                        <button type="button" class="button copy-button" data-clipboard-text="<?php echo esc_attr( WP_Debug_Data::format( $info, 'debug' ) ); ?>">
    100100                                <?php _e( 'Copy site info to clipboard' ); ?>
    101101                        </button>
    102                         <span class="success" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
     102                        <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
    103103                </div>
    104104        </div>
    105105