Ticket #32715: 32715.patch

src/wp-admin/css/customize-nav-menus.css

@@ -223 +223 @@
 }
 
 /* Duplicates `.nav-menus-php .item-edit:before {}` in common.css:2220. */
-.wp-customizer .menu-item .item-edit:before {
+.wp-customizer .menu-item .item-edit:before,
+#available-menu-items .accordion-section-title button:after {
         top: -1px;
         right: 0;
         content: '\f140';
@@ -241 +242 @@
         text-decoration: none !important;
 }
 
-.wp-customizer .menu-item.menu-item-edit-active .item-edit:before {
+.wp-customizer .menu-item.menu-item-edit-active .item-edit:before,
+#available-menu-items .open .accordion-section-title button:after {
         content: '\f142';
 }
 
@@ -599 +601 @@
         background: #fff;
 }
 
+#available-menu-items .accordion-section-title button {
+        width: 30px;
+        height: 35px;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        z-index: 1;
+        cursor: pointer;
+}
+
+#available-menu-items .accordion-section-title button:focus {
+        -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);
+}
+
 #available-menu-items .open .accordion-section-title {
         background: #eee;
 }
 
-#available-menu-items .open .accordion-section-title:after {
-        content: '\f142';
-}
-
 #available-menu-items .accordion-section-content {
         overflow-y: auto;
         max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
@@ -625 +638 @@
         margin: 0;
 }
 
-#available-menu-items .accordion-section-title button:focus:before {
-        display: block;
-        content: "";
-        width: 28px;
-        height: 32px;
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        -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);
-}
-
 #available-menu-items .accordion-section-content {
         padding: 1px 15px 15px 15px;
         min-height: 120px;
@@ -756 +757 @@
         box-sizing: border-box;
 }
 
+#available-menu-items .accordion-section-title:after,
 #available-menu-items-search .accordion-section-title:after {
-        display: none;
+        content: none;
 }
 
 #available-menu-items-search .accordion-section-content:empty {

src/wp-includes/class-wp-customize-nav-menus.php

@@ -563 +563 @@
                                 <dl class="menu-item-bar">
                                         <dt class="menu-item-handle">
                                                 <span class="item-type">{{ data.type_label }}</span>
-                                                <span class="item-title">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
-                                                <button type="button" class="not-a-button item-add"><span class="screen-reader-text"><?php _e( 'Add Menu Item' ) ?></span></button>
+                                                <span class="item-title" id="menu-item-tpl-{{ data.id }}-title">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
+                                                <button type="button" class="not-a-button item-add" aria-describedby="menu-item-tpl-{{ data.id }}-title"><span class="screen-reader-text"><?php _e( 'Add Menu Item' ) ?></span></button>
                                         </dt>
                                 </dl>
                         </div>
@@ -625 +625 @@
                                 <div class="accordion-section-content" data-type="search"></div>
                         </div>
                         <div id="new-custom-menu-item" class="accordion-section">
-                                <h4 class="accordion-section-title"><?php _e( 'Links' ); ?><button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
+                                <h4 class="accordion-section-title"><span id="section-title-links"><?php _e( 'Links' ); ?></span><button type="button" class="not-a-button" aria-describedby="section-title-links"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
                                 <div class="accordion-section-content">
                                         <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
                                         <p id="menu-item-url-wrap">
@@ -657 +657 @@
                                 foreach ( $post_types as $type ) :
                                         ?>
                                         <div id="available-menu-items-<?php echo esc_attr( $type->name ); ?>" class="accordion-section">
-                                                <h4 class="accordion-section-title"><?php echo esc_html( $type->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
+                                                <h4 class="accordion-section-title"><span id="section-title-<?php echo esc_attr( $type->label ); ?>"><?php echo esc_html( $type->label ); ?></span> <span class="spinner"></span> <button type="button" class="not-a-button" aria-describedby="section-title-<?php echo esc_attr( $type->label ); ?>"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
                                                 <div class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></div>
                                         </div>
                                 <?php
@@ -669 +669 @@
                                 foreach ( $taxonomies as $tax ) :
                                         ?>
                                         <div id="available-menu-items-<?php echo esc_attr( $tax->name ); ?>" class="accordion-section">
-                                                <h4 class="accordion-section-title"><?php echo esc_html( $tax->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
+                                                <h4 class="accordion-section-title"><span id="section-title-<?php echo esc_attr( $tax->label ); ?>"><?php echo esc_html( $tax->label ); ?></span> <span class="spinner"></span> <button type="button" class="not-a-button" aria-describedby="section-title-<?php echo esc_attr( $tax->label ); ?>"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
                                                 <div class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></div>
                                         </div>
                                 <?php