WordPress.org

Make WordPress Core

Changeset 42785


Ignore:
Timestamp:
03/05/2018 03:49:58 PM (3 years ago)
Author:
afercia
Message:

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.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r42689 r42785  
    15491549}
    15501550
     1551#dismissed-updates li > p {
     1552    margin-top: 0;
     1553}
     1554
     1555#dismiss,
     1556#undismiss {
     1557    margin-left: 0.5em;
     1558}
     1559
    15511560form.upgrade {
    15521561    margin-top: 8px;
  • trunk/src/wp-admin/update-core.php

    r42777 r42785  
    139139    ?>
    140140    <script type="text/javascript">
    141 
    142         jQuery(function($) {
    143             $('dismissed-updates').show();
    144             $('#show-dismissed').toggle(function(){$(this).text('<?php echo $hide_text; ?>');}, function() {$(this).text('<?php echo $show_text; ?>')});
    145             $('#show-dismissed').click(function() { $('#dismissed-updates').toggle('slow');});
     141        jQuery(function( $ ) {
     142            $( 'dismissed-updates' ).show();
     143            $( '#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' ); } );
     144            $( '#show-dismissed' ).click( function() { $( '#dismissed-updates' ).toggle( 'fast' ); } );
    146145        });
    147146    </script>
    148147    <?php
    149         echo '<p class="hide-if-no-js"><a id="show-dismissed" href="#">' . __( 'Show hidden updates' ) . '</a></p>';
     148        echo '<p class="hide-if-no-js"><button type="button" class="button" id="show-dismissed" aria-expanded="false">' . __( 'Show hidden updates' ) . '</button></p>';
    150149        echo '<ul id="dismissed-updates" class="core-updates dismissed">';
    151150    foreach ( (array) $dismissed as $update ) {
Note: See TracChangeset for help on using the changeset viewer.