Make WordPress Core


Ignore:
Timestamp:
05/11/2017 11:50:01 PM (7 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.

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