Ticket #37013: 37013.2.diff

src/wp-admin/css/common.css

@@ -3000 +3000 @@
         content: "\f140";
 }
 
-.js .sidebar-name .sidebar-name-arrow:before {
-        padding: 10px;
-        left: 0;
-}
-
 .js #widgets-left .sidebar-name .sidebar-name-arrow {
         display: none;
 }
@@ -3184 +3179 @@
 }
 
 .widget-top a.widget-action:focus:after {
-        -webkit-box-shadow:
-                0 0 0 1px #5b9dd9,
-                0 0 2px 1px rgba(30,140,190,.8);
         box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30,140,190,.8);
@@ -3263 +3255 @@
         top: 12px;
         right: 10px;
         z-index: 1;
+        width: 20px;
+        border-radius: 50%;
+        text-indent: -1px; /* account for the dashicon alignment */
 }
 
 .accordion-section-title:focus {
@@ -3274 +3269 @@
         border-color: #a0a5aa transparent;
 }
 
+.js .accordion-section-title:focus:after {
+        box-shadow:
+                        0 0 0 1px #5b9dd9,
+                        0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 .cannot-expand .accordion-section-title {
         cursor: auto;
 }

src/wp-admin/css/widgets.css

@@ -91 +91 @@
         box-sizing: border-box;
 }
 
-.sidebar-name-arrow {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
+.js .sidebar-name .handlediv {
+        float: right;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+}
+
+.js .sidebar-name .handlediv:focus {
+        box-shadow: none;
+        outline: none;
+}
+
+.js .sidebar-name .handlediv:focus .sidebar-name-arrow:before {
+        box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.js .sidebar-name .sidebar-name-arrow:before {
+        margin-top: 4px;
+        width: 20px;
+        border-radius: 50%;
+        text-indent: -1px; /* account for the dashicon alignment */
 }
 
 .js .sidebar-name {
@@ -249 +267 @@
         padding: 15px 7px;
 }
 
-div#widgets-right .sidebar-name .sidebar-name-arrow:before {
-        top: 2px;
-}
-
 div#widgets-right .widget-top {
         padding: 0;
 }

src/wp-admin/includes/template.php

@@ -1148 +1148 @@
                                         }
                                         ?>
                                         <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
+                                                <button type="button" class="handlediv button-link" aria-expanded="true">
+                                                        <span class="screen-reader-text"><?php echo sprintf( __( 'Toggle panel: %s' ), $sidebar_name ); ?></span>
+                                                        <span class="sidebar-name-arrow" aria-hidden="true"></span>
+                                                </button>
                                                 <h3 class="accordion-section-title hndle" tabindex="0">
                                                         <?php echo esc_html( $box['title'] ); ?>
                                                         <span class="screen-reader-text"><?php _e( 'Press return or enter to open this section' ); ?></span>

src/wp-admin/includes/widgets.php

@@ -80 +80 @@
         if ( $sidebar_name ) {
                 ?>
                 <div class="sidebar-name">
-                        <div class="sidebar-name-arrow"><br /></div>
+                        <button type="button" class="handlediv button-link" aria-expanded="true">
+                                <span class="screen-reader-text"><?php echo sprintf( __( 'Toggle panel: %s' ), $sidebar_name ); ?></span>
+                                <span class="sidebar-name-arrow" aria-hidden="true"></span>
+                        </button>
                         <h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
                 </div>
                 <?php
@@ -278 +281 @@
  */
 function wp_widgets_access_body_class($classes) {
         return "$classes widgets_access ";
-}
- No newline at end of file
+}