From 0a63e2ed96f076c42343ba0d55e33217c66456a1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 5 Mar 2018 15:49:58 +0000
Subject: [PATCH] Accessibility: Change the "Show / Hide dismissed updates"
 link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
Also, adds an `aria-expanded` attribute to communicate the expandable panel state
and improves the buttons spacing.

Props Cheffheid, audrasjb, afercia.
Fixes #38674.


git-svn-id: https://develop.svn.wordpress.org/trunk@42785 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css  |  9 +++++++++
 src/wp-admin/update-core.php | 11 +++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 6c4ac2d655..529970bd93 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1548,6 +1548,15 @@ ul#dismissed-updates {
 	display: none;
 }
 
+#dismissed-updates li > p {
+	margin-top: 0;
+}
+
+#dismiss,
+#undismiss {
+	margin-left: 0.5em;
+}
+
 form.upgrade {
 	margin-top: 8px;
 }
diff --git a/src/wp-admin/update-core.php b/src/wp-admin/update-core.php
index efc1913ce4..83ea86c784 100644
--- a/src/wp-admin/update-core.php
+++ b/src/wp-admin/update-core.php
@@ -138,15 +138,14 @@ function dismissed_updates() {
 		$hide_text = esc_js( __( 'Hide hidden updates' ) );
 	?>
 	<script type="text/javascript">
-
-		jQuery(function($) {
-			$('dismissed-updates').show();
-			$('#show-dismissed').toggle(function(){$(this).text('<?php echo $hide_text; ?>');}, function() {$(this).text('<?php echo $show_text; ?>')});
-			$('#show-dismissed').click(function() { $('#dismissed-updates').toggle('slow');});
+		jQuery(function( $ ) {
+			$( 'dismissed-updates' ).show();
+			$( '#show-dismissed' ).toggle( function() { $( this ).text( '<?php echo $hide_text; ?>' ).attr( 'aria-expanded', 'true' ); }, function() { $( this ).text( '<?php echo $show_text; ?>' ).attr( 'aria-expanded', 'false' ); } );
+			$( '#show-dismissed' ).click( function() { $( '#dismissed-updates' ).toggle( 'fast' ); } );
 		});
 	</script>
 	<?php
-		echo '<p class="hide-if-no-js"><a id="show-dismissed" href="#">' . __( 'Show hidden updates' ) . '</a></p>';
+		echo '<p class="hide-if-no-js"><button type="button" class="button" id="show-dismissed" aria-expanded="false">' . __( 'Show hidden updates' ) . '</button></p>';
 		echo '<ul id="dismissed-updates" class="core-updates dismissed">';
 	foreach ( (array) $dismissed as $update ) {
 		echo '<li>';