WordPress.org

Make WordPress Core

Changeset 31272


Ignore:
Timestamp:
01/23/2015 06:17:25 PM (6 years ago)
Author:
jorbin
Message:

Improve accessibility of nav menu locations form.

A couple of small tweaks to the nav menu locations form that make it friendlier to assistive technology. These include:

  • labels for selects
  • better context for the "Edit" link. We hide "edit" from screen readers and instead give them a phrase with context since they may not be able to take advantage of the visual context

Additionally, there are some minor css tweaks to improve the visual alignment of the rows.
We also remove duplicate IDs and use classes instead.

Props afercia.
fixes #31090.

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

Legend:

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

    r30695 r31272  
    100100    float: left;
    101101    margin-top: 1px;
    102 }
    103 
    104 .menu-edit p {
    105     margin: .3em 0 .6em;
    106102}
    107103
     
    217213}
    218214
    219 .widefat td.menu-location-menus {
    220     padding-bottom: 5px;
     215.widefat .menu-locations tr + tr td {
     216    padding-top: 0;
     217}
     218
     219.widefat .menu-locations td {
     220    vertical-align: middle;
     221}
     222
     223.menu-location-title label {
     224    font-weight: bold;
    221225}
    222226
  • trunk/src/wp-admin/nav-menus.php

    r31200 r31272  
    582582                <tbody class="menu-locations">
    583583                <?php foreach ( $locations as $_location => $_name ) { ?>
    584                     <tr id="menu-locations-row">
    585                         <td class="menu-location-title"><strong><?php echo $_name; ?></strong></td>
     584                    <tr class="menu-locations-row">
     585                        <td class="menu-location-title"><label for="locations-<?php echo $_location; ?>"><?php echo $_name; ?></label></td>
    586586                        <td class="menu-location-menus">
    587587                            <select name="menu-locations[<?php echo $_location; ?>]" id="locations-<?php echo $_location; ?>">
     
    598598                                <span class="locations-edit-menu-link">
    599599                                    <a href="<?php echo esc_url( add_query_arg( array( 'action' => 'edit', 'menu' => $menu_locations[$_location] ), admin_url( 'nav-menus.php' ) ) ); ?>">
    600                                         <?php _ex( 'Edit', 'menu' ); ?>
     600                                        <span aria-hidden="true"><?php _ex( 'Edit', 'menu' ); ?></span><span class="screen-reader-text"><?php _e( 'Edit selected menu' ); ?></span>
    601601                                    </a>
    602602                                </span>
     
    607607                                    </a>
    608608                                </span>
    609                             </div><!-- #locations-row-links -->
     609                            </div><!-- .locations-row-links -->
    610610                        </td><!-- .menu-location-menus -->
    611                     </tr><!-- #menu-locations-row -->
     611                    </tr><!-- .menu-locations-row -->
    612612                <?php } // foreach ?>
    613613                </tbody>
Note: See TracChangeset for help on using the changeset viewer.