Ticket #32715: 32715.5.diff

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

@@ -619 +619 @@
         background: #eee;
 }
 
-#available-menu-items .open .accordion-section-title:after {
+/* rework the arrow indicator implementation for NVDA bug see #32715 */
+#available-menu-items .accordion-section-title:after {
+        content: none !important;
+}
+
+#available-menu-items .accordion-section-title .toggle-indicator {
+        display: inline-block;
+        font-size: 20px;
+        line-height: 1;
+}
+
+#available-menu-items .accordion-section-title .toggle-indicator:after {
+        content: '\f140';
+        font: normal 20px/1 'dashicons';
+        vertical-align: top;
+        speak: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-decoration: none !important;
+}
+
+#available-menu-items .open .accordion-section-title .toggle-indicator:after {
         content: '\f142';
 }
 
@@ -644 +665 @@
 #available-menu-items .accordion-section-title button {
         display: block;
         width: 28px;
-        height: 32px;
+        height: 35px;
         position: absolute;
         top: 5px;
         right: 5px;
+        cursor: pointer;
 }
 
 #available-menu-items .accordion-section-title button:focus {

src/wp-admin/js/accordion.js

@@ -53 +53 @@
          */
         function accordionSwitch ( el ) {
                 var section = el.closest( '.accordion-section' ),
+                        sectionToggleControl = section.find( '[aria-expanded]' ).eq( 0 ),
                         siblings = section.closest( '.accordion-container' ).find( '.open' ),
+                        siblingsToggleControl = siblings.find( '[aria-expanded]' ).eq( 0 ),
                         content = section.find( '.accordion-section-content' );
 
                 // This section has no content and cannot be expanded.
@@ -65 +67 @@
                         section.toggleClass( 'open' );
                         content.toggle( true ).slideToggle( 150 );
                 } else {
+                        siblingsToggleControl.attr( 'aria-expanded', 'false' );
                         siblings.removeClass( 'open' );
                         siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
                         content.toggle( false ).slideToggle( 150 );
                         section.toggleClass( 'open' );
                 }
+
+                // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
+                if ( sectionToggleControl ) {
+                        sectionToggleControl.attr( 'aria-expanded', sectionToggleControl.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+                }
         }
 
 })(jQuery);

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

@@ -176 +176 @@
 
                 // Search input change handler.
                 search: function( event ) {
+                        var $searchSection = $( '#available-menu-items-search' ),
+                                $openSections = $( '#available-menu-items .accordion-section.open' );
+
                         if ( ! event ) {
                                 return;
                         }
                         // Manual accordion-opening behavior.
-                        if ( this.searchTerm && ! $( '#available-menu-items-search' ).hasClass( 'open' ) ) {
-                                $( '#available-menu-items .accordion-section-content' ).slideUp( 'fast' );
-                                $( '#available-menu-items-search .accordion-section-content' ).slideDown( 'fast' );
-                                $( '#available-menu-items .accordion-section.open' ).removeClass( 'open' );
-                                $( '#available-menu-items-search' ).addClass( 'open' );
+                        if ( this.searchTerm && ! $searchSection.hasClass( 'open' ) ) {
+                                $openSections.find( '.accordion-section-content' ).slideUp( 'fast' );
+                                $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
+                                $openSections.find( '[aria-expanded]' ).eq( 0 ).attr( 'aria-expanded', 'false' );
+                                $openSections.removeClass( 'open' );
+                                $searchSection.addClass( 'open' );
                         }
                         if ( '' === event.target.value ) {
-                                $( '#available-menu-items-search' ).removeClass( 'open' );
+                                $searchSection.removeClass( 'open' );
                         }
                         if ( this.searchTerm === event.target.value ) {
                                 return;

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

@@ -692 +692 @@
                                 <ul class="accordion-section-content" data-type="search"></ul>
                         </div>
                         <div id="new-custom-menu-item" class="accordion-section">
-                                <h4 class="accordion-section-title"><?php _e( 'Custom Links' ); ?><button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
+                                <h4 class="accordion-section-title" role="presentation"><?php _e( 'Custom Links' ); ?> <button type="button" class="not-a-button" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span><span class="toggle-indicator" aria-hidden="true"></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">
@@ -724 +724 @@
                                 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> <span class="no-items"><?php _e( 'No items' ); ?></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
+                                                <h4 class="accordion-section-title" role="presentation"><?php echo esc_html( $type->label ); ?> <span class="spinner"></span> <span class="no-items"><?php _e( 'No items' ); ?></span> <button type="button" class="not-a-button" aria-expanded="false"><span class="screen-reader-text"><?php printf( 'Toggle section: %s', esc_html( $type->label ) ); ?></span><span class="toggle-indicator" aria-hidden="true"></span></button></h4>
                                                 <ul class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></ul>
                                         </div>
                                 <?php
@@ -736 +736 @@
                                 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> <span class="no-items"><?php _e( 'No items' ); ?></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
+                                                <h4 class="accordion-section-title" role="presentation"><?php echo esc_html( $tax->label ); ?> <span class="spinner"></span> <span class="no-items"><?php _e( 'No items' ); ?></span> <button type="button" class="not-a-button" aria-expanded="false"><span class="screen-reader-text"><?php printf( 'Toggle section: %s', esc_html( $tax->label ) ); ?></span><span class="toggle-indicator" aria-hidden="true"></span></button></h4>
                                                 <ul class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></ul>
                                         </div>
                                 <?php