WordPress.org

Make WordPress Core

Changeset 40646


Ignore:
Timestamp:
05/11/2017 11:50:01 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Change the "Show details" links in the update core screen to buttons.

These controls toggle the visibility of the update progress: they perform an action
therefore they should be buttons. Also:

  • uses aria-expanded to communicate the toggle button state
  • removes some inline JavaScript
  • when clicking the toggle buttons, the progress details get moved with JavaScript after the button: this helps users of assistive technologies in finding them and makes the UI a bit more intuitive

Props Cheffheid, afercia.
See #26504.
Fixes #40453.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-bulk-upgrader-skin.php

    r38023 r40646  
    4444        $this->upgrader->strings['skin_update_failed'] = __('The update of %1$s failed.');
    4545        /* translators: 1: Title of an update */
    46         $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' ) . ' <a onclick="%2$s" href="#" class="hide-if-no-js"><span>' . __( 'Show Details' ) . '</span><span class="hidden">' . __( 'Hide Details' ) . '</span></a>';
     46        $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' );
    4747        $this->upgrader->strings['skin_upgrade_end'] = __('All updates have been completed.');
    4848    }
     
    129129        printf( '<h2>' . $this->upgrader->strings['skin_before_update_header'] . ' <span class="spinner waiting-' . $this->upgrader->update_current . '"></span></h2>', $title, $this->upgrader->update_current, $this->upgrader->update_count );
    130130        echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').css("display", "inline-block");</script>';
     131        // This progress messages div gets moved via JavaScript when clicking on "Show details.".
    131132        echo '<div class="update-messages hide-if-js" id="progress-' . esc_attr($this->upgrader->update_current) . '"><p>';
    132133        $this->flush_output();
     
    149150        }
    150151        if ( $this->result && ! is_wp_error( $this->result ) ) {
    151             if ( ! $this->error )
    152                 echo '<div class="updated"><p>' . sprintf($this->upgrader->strings['skin_update_successful'], $title, 'jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').toggle();jQuery(\'span\', this).toggle(); return false;') . '</p></div>';
     152            if ( ! $this->error ) {
     153                echo '<div class="updated js-update-details" data-update-details="progress-' . esc_attr( $this->upgrader->update_current ) . '">' .
     154                    '<p>' . sprintf( $this->upgrader->strings['skin_update_successful'], $title ) .
     155                    ' <button type="button" class="hide-if-no-js button-link js-update-details-toggle" aria-expanded="false">' . __( 'Show details.' ) . '</button>' .
     156                    '</p></div>';
     157            }
     158
    153159            echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').hide();</script>';
    154160        }
  • trunk/src/wp-admin/js/common.js

    r40634 r40646  
    979979    // Set initial focus on a specific element.
    980980    $( '.wp-initial-focus' ).focus();
     981
     982    // Toggle update details on update-core.php.
     983    $body.on( 'click', '.js-update-details-toggle', function() {
     984        var $updateNotice = $( this ).closest( '.js-update-details' ),
     985            $progressDiv = $( '#' + $updateNotice.data( 'update-details' ) );
     986
     987        /*
     988         * When clicking on "Show details" move the progress div below the update
     989         * notice. Make sure it gets moved just the first time.
     990         */
     991        if ( ! $progressDiv.hasClass( 'update-details-moved' ) ) {
     992            $progressDiv.insertAfter( $updateNotice ).addClass( 'update-details-moved' );
     993        }
     994
     995        // Toggle the progress div visibility.
     996        $progressDiv.toggle();
     997        // Toggle the Show Details button expanded state.
     998        $( this ).attr( 'aria-expanded', $progressDiv.is( ':visible' ) )
     999    })
    9811000});
    9821001
Note: See TracChangeset for help on using the changeset viewer.