vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 14:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Make some Widgets buttons real buttons.

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@40480 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2017-04-19 21:13:53 +00:00
parent 9c5ba6f387
commit 66eb13d3b2
8 changed files with 73 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/includes/widgets.php
View File

@@ -219,7 +219,10 @@ function wp_widget_control( $sidebar_args ) {
echo $sidebar_args['before_widget']; ?>
<div class="widget-top">
<div class="widget-title-action">
<a class="widget-action hide-if-no-js" href="#available-widgets"></a>
<button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
<span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">
<span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span>
<span class="add"><?php _ex( 'Add', 'widget' ); ?></span>
@@ -250,8 +253,8 @@ function wp_widget_control( $sidebar_args ) {
<div class="widget-control-actions">
<div class="alignleft">
<a class="widget-control-remove" href="#remove"><?php _e('Delete'); ?></a> |
<a class="widget-control-close" href="#close"><?php _e('Close'); ?></a>
<button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> |
<button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button>
</div>
<div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
<?php submit_button( __( 'Save' ), 'primary widget-control-save right', 'savewidget', false, array( 'id' => 'widget-' . esc_attr( $id_format ) . '-savewidget' ) ); ?>