From aef3839e7b5c2bfa7f62084eec4f3a027eba2040 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 11 May 2017 23:50:01 +0000
Subject: [PATCH] Accessibility: Change the "Show details" links in the update
 core screen to buttons.

These controls toggle the visibility of the update progress: they perform an action
therefore they should be buttons. Also:
- uses `aria-expanded` to communicate the toggle button state
- removes some inline JavaScript
- when clicking the toggle buttons, the progress details get moved with JavaScript after the button: this helps users of assistive technologies in finding them and makes the UI a bit more intuitive

Props Cheffheid, afercia.
See #26504.
Fixes #40453.


git-svn-id: https://develop.svn.wordpress.org/trunk@40646 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../includes/class-bulk-upgrader-skin.php     | 12 +++++++++---
 src/wp-admin/js/common.js                     | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/includes/class-bulk-upgrader-skin.php b/src/wp-admin/includes/class-bulk-upgrader-skin.php
index 16f410fdc9..60ac96d481 100644
--- a/src/wp-admin/includes/class-bulk-upgrader-skin.php
+++ b/src/wp-admin/includes/class-bulk-upgrader-skin.php
@@ -43,7 +43,7 @@ class Bulk_Upgrader_Skin extends WP_Upgrader_Skin {
 		/* translators: 1: Title of an update */
 		$this->upgrader->strings['skin_update_failed'] = __('The update of %1$s failed.');
 		/* translators: 1: Title of an update */
-		$this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' ) . ' <a onclick="%2$s" href="#" class="hide-if-no-js"><span>' . __( 'Show Details' ) . '</span><span class="hidden">' . __( 'Hide Details' ) . '</span></a>';
+		$this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' );
 		$this->upgrader->strings['skin_upgrade_end'] = __('All updates have been completed.');
 	}
 
@@ -128,6 +128,7 @@ class Bulk_Upgrader_Skin extends WP_Upgrader_Skin {
 		$this->in_loop = true;
 		printf( '<h2>' . $this->upgrader->strings['skin_before_update_header'] . ' <span class="spinner waiting-' . $this->upgrader->update_current . '"></span></h2>', $title, $this->upgrader->update_current, $this->upgrader->update_count );
 		echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').css("display", "inline-block");</script>';
+		// This progress messages div gets moved via JavaScript when clicking on "Show details.".
 		echo '<div class="update-messages hide-if-js" id="progress-' . esc_attr($this->upgrader->update_current) . '"><p>';
 		$this->flush_output();
 	}
@@ -148,8 +149,13 @@ class Bulk_Upgrader_Skin extends WP_Upgrader_Skin {
 			echo '<script type="text/javascript">jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').show();</script>';
 		}
 		if ( $this->result && ! is_wp_error( $this->result ) ) {
-			if ( ! $this->error )
-				echo '<div class="updated"><p>' . sprintf($this->upgrader->strings['skin_update_successful'], $title, 'jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').toggle();jQuery(\'span\', this).toggle(); return false;') . '</p></div>';
+			if ( ! $this->error ) {
+				echo '<div class="updated js-update-details" data-update-details="progress-' . esc_attr( $this->upgrader->update_current ) . '">' .
+					'<p>' . sprintf( $this->upgrader->strings['skin_update_successful'], $title ) .
+					' <button type="button" class="hide-if-no-js button-link js-update-details-toggle" aria-expanded="false">' . __( 'Show details.' ) . '</button>' .
+					'</p></div>';
+			}
+
 			echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').hide();</script>';
 		}
 
diff --git a/src/wp-admin/js/common.js b/src/wp-admin/js/common.js
index 59fd1b68c3..672836da36 100644
--- a/src/wp-admin/js/common.js
+++ b/src/wp-admin/js/common.js
@@ -978,6 +978,25 @@ $document.ready( function() {
 
 	// Set initial focus on a specific element.
 	$( '.wp-initial-focus' ).focus();
+
+	// Toggle update details on update-core.php.
+	$body.on( 'click', '.js-update-details-toggle', function() {
+		var $updateNotice = $( this ).closest( '.js-update-details' ),
+			$progressDiv = $( '#' + $updateNotice.data( 'update-details' ) );
+
+		/*
+		 * When clicking on "Show details" move the progress div below the update
+		 * notice. Make sure it gets moved just the first time.
+		 */
+		if ( ! $progressDiv.hasClass( 'update-details-moved' ) ) {
+			$progressDiv.insertAfter( $updateNotice ).addClass( 'update-details-moved' );
+		}
+
+		// Toggle the progress div visibility.
+		$progressDiv.toggle();
+		// Toggle the Show Details button expanded state.
+		$( this ).attr( 'aria-expanded', $progressDiv.is( ':visible' ) )
+	})
 });
 
 // Fire a custom jQuery event at the end of window resize