WordPress.org
Get WordPress

Make WordPress Core

Changeset 48418


Ignore:
Timestamp:
07/10/2020 06:16:06 AM (4 years ago)
Author:
whyisjake
Message:

Upgrade/Install: Use ARIA button class on plugin and theme auto-updates action links

According to the [accesability guidelines](​https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/#semantics-for-controls), the control should be a link when JavaScript is not available and a button the rest of the time.

In addition, handlers were added for spacebar usage, and some changes to the a11y speak verbiage.

Fixes #50516.
Props ryokuhi, audrasjb, afercia, whyisjake/

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/wp/updates.js

    r48168 r48418  
    26782678
    26792679        /**
    2680          * Click handler for enabling and disabling plugin and theme auto-updates.
     2680         * Prevents the page form scrolling when activating auto-updates with the Spacebar key.
    26812681         *
    26822682         * @since 5.5.0
    26832683         */
    2684         $document.on( 'click', '.column-auto-updates a.toggle-auto-update, .theme-overlay a.toggle-auto-update', function( event ) {
    2685             var data, asset, type, $parent;
    2686             var $anchor = $( this ),
    2687                 action = $anchor.attr( 'data-wp-action' ),
    2688                 $label = $anchor.find( '.label' );
     2684        $document.on( 'keydown', '.column-auto-updates .toggle-auto-update, .theme-overlay .toggle-auto-update', function( event ) {
     2685            if ( 32 === event.which ) {
     2686                event.preventDefault();
     2687            }
     2688        } );
     2689
     2690        /**
     2691         * Click and keyup handler for enabling and disabling plugin and theme auto-updates.
     2692         *
     2693         * These controls can be either links or buttons. When JavaScript is enabled,
     2694         * we want them to behave like buttons. An ARIA role `button` is added via
     2695         * the JavaScript that targets elements with the CSS class `aria-button-if-js`.
     2696         *
     2697         * @since 5.5.0
     2698         */
     2699        $document.on( 'click keyup', '.column-auto-updates .toggle-auto-update, .theme-overlay .toggle-auto-update', function( event ) {
     2700            var data, asset, type, $parent,
     2701                $toggler = $( this ),
     2702                action = $toggler.attr( 'data-wp-action' ),
     2703                $label = $toggler.find( '.label' );
     2704
     2705            if ( 'keyup' === event.type && 32 !== event.which ) {
     2706                return;
     2707            }
    26892708
    26902709            if ( 'themes' !== pagenow ) {
    2691                 $parent = $anchor.closest( '.column-auto-updates' );
     2710                $parent = $toggler.closest( '.column-auto-updates' );
    26922711            } else {
    2693                 $parent = $anchor.closest( '.theme-autoupdate' );
     2712                $parent = $toggler.closest( '.theme-autoupdate' );
    26942713            }
    26952714
    … …  
    26972716
    26982717            // Prevent multiple simultaneous requests.
    2699             if ( $anchor.attr( 'data-doing-ajax' ) === 'yes' ) {
     2718            if ( $toggler.attr( 'data-doing-ajax' ) === 'yes' ) {
    27002719                return;
    27012720            }
    27022721
    2703             $anchor.attr( 'data-doing-ajax', 'yes' );
     2722            $toggler.attr( 'data-doing-ajax', 'yes' );
    27042723
    27052724            switch ( pagenow ) {
    … …  
    27072726                case 'plugins-network':
    27082727                    type = 'plugin';
    2709                     asset = $anchor.closest( 'tr' ).attr( 'data-plugin' );
     2728                    asset = $toggler.closest( 'tr' ).attr( 'data-plugin' );
    27102729                    break;
    27112730                case 'themes-network':
    27122731                    type = 'theme';
    2713                     asset = $anchor.closest( 'tr' ).attr( 'data-slug' );
     2732                    asset = $toggler.closest( 'tr' ).attr( 'data-slug' );
    27142733                    break;
    27152734                case 'themes':
    27162735                    type = 'theme';
    2717                     asset = $anchor.attr( 'data-slug' );
     2736                    asset = $toggler.attr( 'data-slug' );
    27182737                    break;
    27192738            }
    … …  
    27292748            }
    27302749
    2731             $anchor.find( '.dashicons-update' ).removeClass( 'hidden' );
     2750            $toggler.find( '.dashicons-update' ).removeClass( 'hidden' );
    27322751
    27332752            data = {
    … …  
    27412760            $.post( window.ajaxurl, data )
    27422761                .done( function( response ) {
    2743                     var $enabled, $disabled, enabledNumber, disabledNumber, errorMessage;
    2744                     var href = $anchor.attr( 'href' );
     2762                    var $enabled, $disabled, enabledNumber, disabledNumber, errorMessage,
     2763                        href = $toggler.attr( 'href' );
    27452764
    27462765                    if ( ! response.success ) {
    … …  
    27852804
    27862805                    if ( 'enable' === action ) {
    2787                         href = href.replace( 'action=enable-auto-update', 'action=disable-auto-update' );
    2788                         $anchor.attr( {
    2789                             'data-wp-action': 'disable',
    2790                             href: href
    2791                         } );
     2806                        // The toggler control can be either a link or a button.
     2807                        if ( $toggler[ 0 ].hasAttribute( 'href' ) ) {
     2808                            href = href.replace( 'action=enable-auto-update', 'action=disable-auto-update' );
     2809                            $toggler.attr( 'href', href );
     2810                        }
     2811                        $toggler.attr( 'data-wp-action', 'disable' );
    27922812
    27932813                        $label.text( __( 'Disable auto-updates' ) );
    27942814                        $parent.find( '.auto-update-time' ).removeClass( 'hidden' );
    2795                         wp.a11y.speak( __( 'Enable auto-updates' ), 'polite' );
     2815                        wp.a11y.speak( __( 'Auto-updates enabled' ) );
    27962816                    } else {
    2797                         href = href.replace( 'action=disable-auto-update', 'action=enable-auto-update' );
    2798                         $anchor.attr( {
    2799                             'data-wp-action': 'enable',
    2800                             href: href
    2801                         } );
     2817                        // The toggler control can be either a link or a button.
     2818                        if ( $toggler[ 0 ].hasAttribute( 'href' ) ) {
     2819                            href = href.replace( 'action=disable-auto-update', 'action=enable-auto-update' );
     2820                            $toggler.attr( 'href', href );
     2821                        }
     2822                        $toggler.attr( 'data-wp-action', 'enable' );
    28022823
    28032824                        $label.text( __( 'Enable auto-updates' ) );
    28042825                        $parent.find( '.auto-update-time' ).addClass( 'hidden' );
    2805                         wp.a11y.speak( __( 'Auto-updates disabled' ), 'polite' );
     2826                        wp.a11y.speak( __( 'Auto-updates disabled' ) );
    28062827                    }
    28072828
    … …  
    28172838                } )
    28182839                .always( function() {
    2819                     $anchor.removeAttr( 'data-doing-ajax' ).find( '.dashicons-update' ).addClass( 'hidden' );
     2840                    $toggler.removeAttr( 'data-doing-ajax' ).find( '.dashicons-update' ).addClass( 'hidden' );
    28202841                } );
    28212842            }

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

    r48373 r48418  
    15001500}
    15011501
     1502.theme-overlay .theme-autoupdate .dashicons-update.spin {
     1503    margin-right: 3px;
     1504}
     1505
    15021506/* Updated icon (check mark). */
    15031507.updated-message p:before,

  • trunk/src/wp-admin/css/themes.css

    r48390 r48418  
    683683.theme-overlay .theme-autoupdate a {
    684684    text-decoration: none;
     685}
     686
     687.theme-overlay .toggle-auto-update {
     688    /* Better align spin icon and text. */
     689    display: inline-flex;
     690    align-items: center;
     691    /* Prevents content after the auto-update toggler from jumping down and up. */
     692    min-height: 20px; /* Same height as the spinning dashicon. */
     693    vertical-align: top;
    685694}
    686695

  • trunk/src/wp-admin/includes/class-wp-ms-themes-list-table.php

    r48109 r48418  
    745745
    746746        $html[] = sprintf(
    747             '<a href="%s" class="toggle-auto-update" data-wp-action="%s">',
     747            '<a href="%s" class="toggle-auto-update aria-button-if-js" data-wp-action="%s">',
    748748            wp_nonce_url( $url, 'updates' ),
    749749            $action

  • trunk/src/wp-admin/includes/class-wp-plugins-list-table.php

    r48377 r48418  
    10771077
    10781078                    $html[] = sprintf(
    1079                         '<a href="%s" class="toggle-auto-update" data-wp-action="%s">',
     1079                        '<a href="%s" class="toggle-auto-update aria-button-if-js" data-wp-action="%s">',
    10801080                        wp_nonce_url( $url, 'updates' ),
    10811081                        $action

  • trunk/src/wp-admin/themes.php

    r48115 r48418  
    563563        <div class="theme-autoupdate">
    564564            <# if ( data.autoupdate ) { #>
    565                 <a href="{{{ data.actions.autoupdate }}}" class="toggle-auto-update" data-slug="{{ data.id }}" data-wp-action="disable">
    566                     <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span>
    567                     <span class="label">' . __( 'Disable auto-updates' ) . '</span>
    568                 </a>
     565                <button type="button" class="toggle-auto-update button-link" data-slug="{{ data.id }}" data-wp-action="disable">
     566                    <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span><span class="label">' . __( 'Disable auto-updates' ) . '</span>
     567                </button>
    569568            <# } else { #>
    570                 <a href="{{{ data.actions.autoupdate }}}" class="toggle-auto-update" data-slug="{{ data.id }}" data-wp-action="enable">
    571                     <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span>
    572                     <span class="label">' . __( 'Enable auto-updates' ) . '</span>
     569                <button type="button" class="toggle-auto-update button-link" data-slug="{{ data.id }}" data-wp-action="enable">
     570                    <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span><span class="label">' . __( 'Enable auto-updates' ) . '</span>
    573571                </a>
    574572            <# } #>
Note: See TracChangeset for help on using the changeset viewer.