Accessibility: Change the "Show / Hide dismissed updates" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
Also, adds an `aria-expanded` attribute to communicate the expandable panel state
and improves the buttons spacing.

Props Cheffheid, audrasjb, afercia.
Fixes #38674.

Built from https://develop.svn.wordpress.org/trunk@42785


git-svn-id: http://core.svn.wordpress.org/trunk@42615 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2018-03-05 15:50:30 +00:00
parent 64634898c2
commit 9842bd6d24
6 changed files with 26 additions and 9 deletions

View File

@ -1548,6 +1548,15 @@ ul#dismissed-updates {
display: none; display: none;
} }
#dismissed-updates li > p {
margin-top: 0;
}
#dismiss,
#undismiss {
margin-right: 0.5em;
}
form.upgrade { form.upgrade {
margin-top: 8px; margin-top: 8px;
} }

File diff suppressed because one or more lines are too long

View File

@ -1548,6 +1548,15 @@ ul#dismissed-updates {
display: none; display: none;
} }
#dismissed-updates li > p {
margin-top: 0;
}
#dismiss,
#undismiss {
margin-left: 0.5em;
}
form.upgrade { form.upgrade {
margin-top: 8px; margin-top: 8px;
} }

File diff suppressed because one or more lines are too long

View File

@ -138,15 +138,14 @@ function dismissed_updates() {
$hide_text = esc_js( __( 'Hide hidden updates' ) ); $hide_text = esc_js( __( 'Hide hidden updates' ) );
?> ?>
<script type="text/javascript"> <script type="text/javascript">
jQuery(function( $ ) {
jQuery(function($) { $( 'dismissed-updates' ).show();
$('dismissed-updates').show(); $( '#show-dismissed' ).toggle( function() { $( this ).text( '<?php echo $hide_text; ?>' ).attr( 'aria-expanded', 'true' ); }, function() { $( this ).text( '<?php echo $show_text; ?>' ).attr( 'aria-expanded', 'false' ); } );
$('#show-dismissed').toggle(function(){$(this).text('<?php echo $hide_text; ?>');}, function() {$(this).text('<?php echo $show_text; ?>')}); $( '#show-dismissed' ).click( function() { $( '#dismissed-updates' ).toggle( 'fast' ); } );
$('#show-dismissed').click(function() { $('#dismissed-updates').toggle('slow');});
}); });
</script> </script>
<?php <?php
echo '<p class="hide-if-no-js"><a id="show-dismissed" href="#">' . __( 'Show hidden updates' ) . '</a></p>'; echo '<p class="hide-if-no-js"><button type="button" class="button" id="show-dismissed" aria-expanded="false">' . __( 'Show hidden updates' ) . '</button></p>';
echo '<ul id="dismissed-updates" class="core-updates dismissed">'; echo '<ul id="dismissed-updates" class="core-updates dismissed">';
foreach ( (array) $dismissed as $update ) { foreach ( (array) $dismissed as $update ) {
echo '<li>'; echo '<li>';

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.0-alpha-42784'; $wp_version = '5.0-alpha-42785';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.