sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.


git-svn-id: https://develop.svn.wordpress.org/trunk@40646 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2017-05-11 23:50:01 +00:00
parent 1705f4501e
commit aef3839e7b
2 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/wp-admin/includes/class-bulk-upgrader-skin.php
View File

@ -43,7 +43,7 @@ class Bulk_Upgrader_Skin extends WP_Upgrader_Skin {
/* translators: 1: Title of an update */ /* translators: 1: Title of an update */
$this->upgrader->strings['skin_update_failed'] = __('The update of %1$s failed.'); $this->upgrader->strings['skin_update_failed'] = __('The update of %1$s failed.');
/* translators: 1: Title of an update */ /* translators: 1: Title of an update */
$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>'; $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' );
$this->upgrader->strings['skin_upgrade_end'] = __('All updates have been completed.'); $this->upgrader->strings['skin_upgrade_end'] = __('All updates have been completed.');
} }
@ -128,6 +128,7 @@ class Bulk_Upgrader_Skin extends WP_Upgrader_Skin {
$this->in_loop = true; $this->in_loop = true;
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 ); 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 );
echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').css("display", "inline-block");</script>'; echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').css("display", "inline-block");</script>';
// This progress messages div gets moved via JavaScript when clicking on "Show details.".
echo '<div class="update-messages hide-if-js" id="progress-' . esc_attr($this->upgrader->update_current) . '"><p>'; echo '<div class="update-messages hide-if-js" id="progress-' . esc_attr($this->upgrader->update_current) . '"><p>';
$this->flush_output(); $this->flush_output();
} }
@ -148,8 +149,13 @@ class Bulk_Upgrader_Skin extends WP_Upgrader_Skin {
echo '<script type="text/javascript">jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').show();</script>'; echo '<script type="text/javascript">jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').show();</script>';
} }
if ( $this->result && ! is_wp_error( $this->result ) ) { if ( $this->result && ! is_wp_error( $this->result ) ) {
if ( ! $this->error ) if ( ! $this->error ) {
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>'; echo '<div class="updated js-update-details" data-update-details="progress-' . esc_attr( $this->upgrader->update_current ) . '">' .
'<p>' . sprintf( $this->upgrader->strings['skin_update_successful'], $title ) .
' <button type="button" class="hide-if-no-js button-link js-update-details-toggle" aria-expanded="false">' . __( 'Show details.' ) . '</button>' .
'</p></div>';
}
echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').hide();</script>'; echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').hide();</script>';
} }

19
src/wp-admin/js/common.js
View File

@ -978,6 +978,25 @@ $document.ready( function() {
// Set initial focus on a specific element. // Set initial focus on a specific element.
$( '.wp-initial-focus' ).focus(); $( '.wp-initial-focus' ).focus();
// Toggle update details on update-core.php.
$body.on( 'click', '.js-update-details-toggle', function() {
var $updateNotice = $( this ).closest( '.js-update-details' ),
$progressDiv = $( '#' + $updateNotice.data( 'update-details' ) );
/*
* When clicking on "Show details" move the progress div below the update
* notice. Make sure it gets moved just the first time.
*/
if ( ! $progressDiv.hasClass( 'update-details-moved' ) ) {
$progressDiv.insertAfter( $updateNotice ).addClass( 'update-details-moved' );
}
// Toggle the progress div visibility.
$progressDiv.toggle();
// Toggle the Show Details button expanded state.
$( this ).attr( 'aria-expanded', $progressDiv.is( ':visible' ) )
})
}); });
// Fire a custom jQuery event at the end of window resize // Fire a custom jQuery event at the end of window resize