diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index e32c86e856..425d63dffe 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -620,7 +620,33 @@ 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'; + color: #a0a5aa; + vertical-align: top; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +#available-menu-items .accordion-section-title:hover .toggle-indicator:after { + color: #777; +} + +#available-menu-items .open .accordion-section-title .toggle-indicator:after { content: '\f142'; } @@ -645,10 +671,11 @@ button.not-a-button { #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 { @@ -657,10 +684,15 @@ button.not-a-button { } #available-menu-items .accordion-section-title .no-items, -#available-menu-items .cannot-expand .accordion-section-title .spinner { +#available-menu-items .cannot-expand .accordion-section-title .spinner, +#available-menu-items .cannot-expand .accordion-section-title > button { display: none; } +#available-menu-items-search.cannot-expand .accordion-section-title .spinner { + display: block; +} + #available-menu-items .cannot-expand .accordion-section-title .no-items { display: block; color: #777; @@ -778,7 +810,7 @@ button.not-a-button { #available-menu-items-search .spinner { position: absolute; - top: 18px; + top: 20px; margin: 0 !important; right: 20px; } diff --git a/src/wp-admin/js/accordion.js b/src/wp-admin/js/accordion.js index 1769d27da9..990a2421b6 100644 --- a/src/wp-admin/js/accordion.js +++ b/src/wp-admin/js/accordion.js @@ -53,7 +53,9 @@ */ function accordionSwitch ( el ) { var section = el.closest( '.accordion-section' ), + sectionToggleControl = section.find( '[aria-expanded]' ).first(), siblings = section.closest( '.accordion-container' ).find( '.open' ), + siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), content = section.find( '.accordion-section-content' ); // This section has no content and cannot be expanded. @@ -65,11 +67,17 @@ 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', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) ); + } } })(jQuery); diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js index 5f30f79773..7d5e054cfb 100644 --- a/src/wp-admin/js/customize-nav-menus.js +++ b/src/wp-admin/js/customize-nav-menus.js @@ -153,10 +153,12 @@ // Load more items. this.sectionContent.scroll( function() { var totalHeight = self.$el.find( '.accordion-section.open .accordion-section-content' ).prop( 'scrollHeight' ), - visibleHeight = self.$el.find( '.accordion-section.open' ).height(); + visibleHeight = self.$el.find( '.accordion-section.open' ).height(); + if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) { var type = $( this ).data( 'type' ), - object = $( this ).data( 'object' ); + object = $( this ).data( 'object' ); + if ( 'search' === type ) { if ( self.searchTerm ) { self.doSearch( self.pages.search ); @@ -173,18 +175,22 @@ // 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]' ).first().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; @@ -197,9 +203,9 @@ // Get search results. doSearch: function( page ) { var self = this, params, - $section = $( '#available-menu-items-search' ), - $content = $section.find( '.accordion-section-content' ), - itemTemplate = wp.template( 'available-menu-item' ); + $section = $( '#available-menu-items-search' ), + $content = $section.find( '.accordion-section-content' ), + itemTemplate = wp.template( 'available-menu-item' ); if ( self.currentRequest ) { self.currentRequest.abort(); @@ -1991,7 +1997,8 @@ */ toggleReordering: function( showOrHide ) { var addNewItemBtn = this.container.find( '.add-new-menu-item' ), - reorderBtn = this.container.find( '.reorder-toggle' ); + reorderBtn = this.container.find( '.reorder-toggle' ), + itemsTitle = this.$sectionContent.find( '.item-title' ); showOrHide = Boolean( showOrHide ); @@ -2003,13 +2010,15 @@ this.$sectionContent.toggleClass( 'reordering', showOrHide ); this.$sectionContent.sortable( this.isReordering ? 'disable' : 'enable' ); if ( this.isReordering ) { - addNewItemBtn.attr( 'tabindex', '-1' ); + addNewItemBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' }); reorderBtn.attr( 'aria-label', api.Menus.data.l10n.reorderLabelOff ); wp.a11y.speak( api.Menus.data.l10n.reorderModeOn ); + itemsTitle.attr( 'aria-hidden', 'false' ); } else { - addNewItemBtn.removeAttr( 'tabindex' ); + addNewItemBtn.removeAttr( 'tabindex aria-hidden' ); reorderBtn.attr( 'aria-label', api.Menus.data.l10n.reorderLabelOn ); wp.a11y.speak( api.Menus.data.l10n.reorderModeOff ); + itemsTitle.attr( 'aria-hidden', 'true' ); } if ( showOrHide ) { diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php index c67fb153d2..45904bff43 100644 --- a/src/wp-includes/class-wp-customize-control.php +++ b/src/wp-includes/class-wp-customize-control.php @@ -1679,14 +1679,20 @@ class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control { ?> diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php index ce1a9bef84..1044a72e9d 100644 --- a/src/wp-includes/class-wp-customize-nav-menus.php +++ b/src/wp-includes/class-wp-customize-nav-menus.php @@ -721,7 +721,13 @@ final class WP_Customize_Nav_Menus {
-

+
-

+