Changeset 40480 for trunk/src/wp-admin/includes/widgets.php

Timestamp:

04/19/2017 09:13:53 PM (7 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:

• trunk/src/wp-admin/includes/widgets.php (modified) (2 diffs)

trunk/src/wp-admin/includes/widgets.php

@@ -220 +220 @@
     <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>
@@ -251 +254 @@
     <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'; ?>">