WordPress.org

Make WordPress Core


Ignore:
Timestamp:
04/19/2017 09:13:53 PM (2 years ago)
Author:
afercia
Message:

Accessibility: Make some Widgets buttons real buttons.

Links used as UI controls that behave like buttons, should be buttons.

  • changes the widgets "toggle", "Delete", and "Close" links to buttons
  • uses aria-expanded to announce the state of the toggle buttons
  • increases a bit the clickable area of the toggle
  • ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
  • uses a <span> element with an aria-hidden attribute to hide CSS generated font icons from assistive technologies
  • standardizes on .toggle-indicator:before rather than :after
  • changes two #f00 reds in #dc3232, see #35622

Fixes #31476.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/widgets.php

    r38672 r40480  
    220220    <div class="widget-top">
    221221    <div class="widget-title-action">
    222         <a class="widget-action hide-if-no-js" href="#available-widgets"></a>
     222        <button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
     223            <span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
     224            <span class="toggle-indicator" aria-hidden="true"></span>
     225        </button>
    223226        <a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">
    224227            <span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span>
     
    251254    <div class="widget-control-actions">
    252255        <div class="alignleft">
    253         <a class="widget-control-remove" href="#remove"><?php _e('Delete'); ?></a> |
    254         <a class="widget-control-close" href="#close"><?php _e('Close'); ?></a>
     256            <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> |
     257            <button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button>
    255258        </div>
    256259        <div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
Note: See TracChangeset for help on using the changeset viewer.