Improve feedback for accessibility when moving items in nav menu (#210)

* Update nav-menu.js Improve feedback for accessibility when moving items in nav menu * Use localized strings in nav-menu.js * Add new localized strings to nav-menus.php Adds new localized strings to `nav-menus.php` to make them available in `nav-menu.js` * Renovate[bot]: Update dependency rollup to v3.29.2 (#211) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Renovate[bot]: Update dependency grunt-contrib-qunit to v8.0.1 (#212) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * JS Coding standards fixes * Update common.css Removes CSS that's no longer needed because of previous commits, and adds new CSS to make the nav menu page more accessible. * Renovate[bot]: Update dependency postcss to v8.4.30 (#215) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update common.css Changes `focus-within` to use `outline` instead of `border` * Update nav-menu.js After some testing, I have found that merely adding `setTimeout` in itself creates enough of a delay to enable the correct message to be generated. There is no need to set a value greater than 0. * WP-r56622: Add `sys_get_temp_dir()` to `open_basedir` tests. (#218) In PHPUnit 10.3.5, 9.6.13 and 8.5.34, the child processes used for process isolation now use temporary files to communicate their result to the parent process. This caused a failure in some tests that set the `open_basedir` PHP directive to a value that did not include `sys_get_temp_dir()`. This adds `sys_get_temp_dir()` to the `open_basedir` value set by the tests to ensure that permission is still granted for the temporary directory. PHPUnit uses `sys_get_temp_dir()`. To ensure the result is the same, Core's `get_temp_dir()` function is not used. References: - sebastianbergmann/phpunit#5356 WP:Props desrosj, mukesh27, SergeyBiryukov, costdev. Fixes https://core.trac.wordpress.org/ticket/59394. --- Merges https://core.trac.wordpress.org/changeset/56622 / WordPress/wordpress-develop@7d96189ba1 to ClassicPress. Co-authored-by: Colin Stewart <[email protected]> * Renovate[bot]: Update dependency node to v18.18.0 (#216) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update nav-menu.js Improve feedback for accessibility when moving items in nav menu * Use localized strings in nav-menu.js * Add new localized strings to nav-menus.php Adds new localized strings to `nav-menus.php` to make them available in `nav-menu.js` * JS Coding standards fixes * Update common.css Removes CSS that's no longer needed because of previous commits, and adds new CSS to make the nav menu page more accessible. * Update common.css Changes `focus-within` to use `outline` instead of `border` * Update nav-menu.js After some testing, I have found that merely adding `setTimeout` in itself creates enough of a delay to enable the correct message to be generated. There is no need to set a value greater than 0. --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: mattyrob <[email protected]> Co-authored-by: Colin Stewart <[email protected]>
ClassicPress · Sep 21, 2023 · f295a47 · f295a47
1 parent 872d0ae
commit f295a47
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
@@ -3449,7 +3449,7 @@ img {
 }
 
 /* @todo: can we use a common class for these? */
-/* @since CP-2.0.0 removes .accordion-section-title:after */
+/* @since CP 2.0.0 removes .accordion-section-title:after */
 .nav-menus-php .item-edit:before,
 .widget-top .widget-action .toggle-indicator:before {
 	content: "\f140";
@@ -3499,13 +3499,6 @@ img {
 		0 0 2px 1px rgba(79, 148, 212, 0.8);
 }
 
-.control-section .accordion-section-title:after,
-.accordion-section-title:after {
-	float: right;
-	right: 20px;
-	top: -2px;
-}
-
 .control-section.open .accordion-section-title:after,
 #customize-info.open .accordion-section-title:after,
 .nav-menus-php .menu-item-edit-active .item-edit:before,
@@ -3590,6 +3583,15 @@ img {
 	display: none;
 }
 
+.control-section {
+	border: 1px solid #c3c4c7;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+}
+
+.control-section:focus-within {
+	outline: 2px solid #3582c4;
+}
+
 .control-section .accordion-section-title,
 .customize-pane-child .accordion-section-title {
 	border-left: none;
@@ -3599,9 +3601,10 @@ img {
 	background: #fff;
 }
 
-.control-section .accordion-section-title:after,
-.customize-pane-child .accordion-section-title:after {
-	top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */
+.control-section details[open] summary.accordion-section-title {
+	color: #3c434a;
+	background-color: #f6f7f7;
+	border-bottom: 1px solid #dcdcde;
 }
 
 .js .control-section:hover .accordion-section-title,

diff --git a/src/wp-admin/js/nav-menu.js b/src/wp-admin/js/nav-menu.js
@@ -697,7 +697,7 @@
 					updateSharedVars(ui);
 				},
 				stop: function(e, ui) {
-					var children, subMenuTitle,
+					var children, subMenuTitle, origLabel, newLabel, newItemPosition, newLabels, positionSpeech,
 						depthChange = currentDepth - originalDepth;
 
 					// Return child elements to the list.
@@ -732,6 +732,21 @@
 
 					api.refreshKeyboardAccessibility();
 					api.refreshAdvancedAccessibility();
+
+					// Since CP 2.0.0
+					// Add message for accessibility purposes
+					origLabel = ui.item.find( 'a' )[2].getAttribute( 'aria-label' ).split( '.' ).join( '' ).replace( 'Menu', 'menu' ).replace( 'Sub', menus.child );
+					newLabel = '';
+					newItemPosition = menus.menuPosition + ' ' + ui.item.index() + 1;
+					setTimeout( function() {
+						newLabels = ui.item.find( 'a' )[2].getAttribute( 'aria-label' ).split( '. ' );
+						if ( undefined !== newLabels[1] ) {
+							newLabel = ' ' + newLabels[1].replace( 'Menu', 'menu' ).replace( 'Sub', menus.child );
+							newItemPosition = '';
+						}
+						positionSpeech = origLabel + ' ' + menus.movedTo + ' ' + newItemPosition + newLabel;
+						wp.a11y.speak( positionSpeech, 'polite' );
+					}, '0' );
 				},
 				change: function(e, ui) {
 					// Make sure the placeholder is inside the menu.
@@ -876,7 +891,7 @@
 		 * Handle toggling bulk selection checkboxes for menu items.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		attachBulkSelectButtonListeners : function() {
 			var that = this;
 
@@ -895,7 +910,7 @@
 		 * Enable bulk selection checkboxes for menu items.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		enableBulkSelection : function() {
 			var checkbox = $( '#menu-to-edit .menu-item-checkbox' );
 
@@ -912,7 +927,7 @@
 		 * Disable bulk selection checkboxes for menu items.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		disableBulkSelection : function() {
 			var checkbox = $( '#menu-to-edit .menu-item-checkbox' );
 
@@ -936,7 +951,7 @@
 		 * Listen for state changes on bulk action checkboxes.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		attachMenuCheckBoxListeners : function() {
 			var that = this;
 
@@ -949,7 +964,7 @@
 		 * Create delete button to remove menu items from collection.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		attachMenuItemDeleteButton : function() {
 			var that = this;
 
@@ -990,7 +1005,7 @@
 		 * List menu items awaiting deletion.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		attachPendingMenuItemsListForDeletion : function() {
 			$( '#post-body-content' ).on( 'change', '.menu-item-checkbox', function() {
 				var menuItemName, menuItemType, menuItemID, listedMenuItem;
@@ -1027,7 +1042,7 @@
 		 * Set status of bulk delete checkbox.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		setBulkDeleteCheckboxStatus : function() {
 			var that = this;
 			var checkbox = $( '#menu-to-edit .menu-item-checkbox' );
@@ -1051,7 +1066,7 @@
 		 * Set status of menu items removal button.
 		 *
 		 * @since 5.8.0
-		 */ 
+		 */
 		setRemoveSelectedButtonStatus : function() {
 			var button = $( '.menu-items-delete' );
 

diff --git a/src/wp-admin/nav-menus.php b/src/wp-admin/nav-menus.php
@@ -525,6 +525,9 @@
 	'movedTop'                => __( 'Menu item moved to the top' ),
 	'movedLeft'               => __( 'Menu item moved out of submenu' ),
 	'movedRight'              => __( 'Menu item is now a sub-item' ),
+	'menuPosition'            => __( 'menu position' ),
+	'movedTo'                 => __( 'moved to' ),
+	'child'                   => __( 'child' ),
 );
 wp_localize_script( 'nav-menu', 'menus', $nav_menus_l10n );