Changeset 33762

Timestamp:

08/26/2015 03:22:57 PM (9 years ago)

Author:

SergeyBiryukov

Message:

Make post meta box toggles accessible.

props joedolson.
fixes #33544.

Location:

trunk/src/wp-admin

Files:

• css/common.css (modified) (1 diff)
• includes/template.php (modified) (1 diff)
• js/postbox.js (modified) (2 diffs)

trunk/src/wp-admin/css/common.css

@@ -1789 +1789 @@
 .postbox .handlediv {
     float: right;
-    width: 27px;
-    height: 30px;
+    width: 33px;
+    height: 36px;
 }
 

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

@@ -1084 +1084 @@
                     $hidden_class = in_array($box['id'], $hidden) ? ' hide-if-js' : '';
                     echo '<div id="' . $box['id'] . '" class="postbox ' . postbox_classes($box['id'], $page) . $hidden_class . '" ' . '>' . "\n";
-                    if ( 'dashboard_browser_nag' != $box['id'] )
-                        echo '<div class="handlediv" title="' . esc_attr__('Click to toggle') . '"><br /></div>';
+                    if ( 'dashboard_browser_nag' != $box['id'] ) {
+                        echo '<button class="handlediv button-link" title="' . esc_attr__( 'Click to toggle' ) . '" aria-expanded="true">';
+                        echo '<span class="screen-reader-text">' . sprintf( __( 'Click to toggle %s panel' ), $box['title'] ) . '</span><br />';
+                        echo '</button>';
+                    }
                     echo "<h3 class='hndle'><span>{$box['title']}</span></h3>\n";
                     echo '<div class="inside">' . "\n";

trunk/src/wp-admin/js/postbox.js

@@ -12 +12 @@
             self.init(page, args);
 
-            $('.postbox .hndle, .postbox .handlediv').bind('click.postboxes', function() {
+            $('.postbox .hndle, .postbox .handlediv').bind('click.postboxes', function( e ) {
                 var p = $(this).parent('.postbox'), id = p.attr('id');
 
@@ -18 +18 @@
                     return;
 
-                p.toggleClass('closed');
+                e.preventDefault();
+
+                p.toggleClass( 'closed' );
+                $(this).attr( 'aria-expanded', ! p.hasClass( 'closed' ) );
 
                 if ( page != 'press-this' )