Make WordPress Core

Changeset 48233


Ignore:
Timestamp:
06/30/2020 01:24:12 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Site Health: Improve the "Copy site info" button accessibility.

  • avoids a focus loss when clicking the "Copy site info" button
  • uses setTimeout() and clearTimeout() to properly handle the "Copied!" text
  • minor JavaScript coding standards

Props audrasjb, Clorith, afercia.
See #48463, #50335.
Fixes #50322.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/site-health.js

    r47122 r48233  
    1111    var __ = wp.i18n.__,
    1212        _n = wp.i18n._n,
    13         sprintf = wp.i18n.sprintf;
    14 
    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' );
     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;
    1919
    2020    // Debug information copy section.
    2121    clipboard.on( 'success', function( e ) {
    22         var $wrapper = $( e.trigger ).closest( 'div' );
    23         $( '.success', $wrapper ).addClass( 'visible' );
    24 
    25         wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
     22        var triggerElement = $( e.trigger ),
     23            successElement = $( '.success', triggerElement.closest( 'div' ) );
     24
     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
  • trunk/src/wp-admin/css/site-health.css

    r48144 r48233  
    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;
    214 }
    215 
    216 .site-health-copy-buttons .success.visible {
    217     display: inline-block;
    218     height: 30px;
    219     line-height: 2.30769231;
    220214}
    221215
     
    457451        font-weight: 600;
    458452    }
     453
     454    .wp-core-ui .site-health-copy-buttons .copy-button {
     455        margin-bottom: 0;
     456    }
    459457}
    460458
  • trunk/src/wp-admin/site-health-info.php

    r47198 r48233  
    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>
Note: See TracChangeset for help on using the changeset viewer.