From cac1d5562167fbf508cee1d7503596b2ddc73873 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Fri, 24 Jul 2015 20:27:04 +0000
Subject: [PATCH] Customizer: Add missing text or labels to some nav menu UI
 controls.

props afercia, celloexpressions, westonruter.
fixes #32715.

git-svn-id: https://develop.svn.wordpress.org/trunk@33413 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-nav-menus.css      | 40 +++++++++++++++++--
 src/wp-admin/js/accordion.js                  |  8 ++++
 src/wp-admin/js/customize-nav-menus.js        | 37 ++++++++++-------
 .../class-wp-customize-control.php            | 14 +++++--
 .../class-wp-customize-nav-menus.php          | 20 +++++++++-
 5 files changed, 95 insertions(+), 24 deletions(-)

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 {
 		?>
 		<div class="menu-item-bar">
 			<div class="menu-item-handle">
-				<span class="item-type">{{ data.item_type_label }}</span>
-				<span class="item-title">
+				<span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
+				<span class="item-title" aria-hidden="true">
 					<span class="spinner"></span>
 					<span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
 				</span>
 				<span class="item-controls">
-					<button type="button" class="not-a-button item-edit"><span class="screen-reader-text"><?php _e( 'Edit Menu Item' ); ?></span></button>
-					<button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php _e( 'Remove Menu Item' ); ?></span></button>
+					<button type="button" class="not-a-button item-edit"><span class="screen-reader-text"><?php
+						/* translators: 1: Title of a menu item, 2: Type of a menu item */
+						printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
+					?></span></button>
+					<button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php
+						/* translators: 1: Title of a menu item, 2: Type of a menu item */
+						printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
+					?></span></button>
 				</span>
 			</div>
 		</div>
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 {
 				<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">
@@ -750,7 +756,17 @@ final class WP_Customize_Nav_Menus {
 				$id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
 				?>
 				<div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
-					<h4 class="accordion-section-title"><?php echo esc_html( $available_item_type['title'] ); ?> <span class="no-items"><?php _e( 'No items' ); ?></span><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" role="presentation">
+						<?php echo esc_html( $available_item_type['title'] ); ?>
+						<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
+							/* translators: %s: Title of a section with menu items */
+							printf( 'Toggle section: %s', esc_html( $available_item_type['title'] ) ); ?></span>
+							<span class="toggle-indicator" aria-hidden="true"></span>
+						</button>
+					</h4>
 					<ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
 				</div>
 				<?php