From 82e5450328d892101966c6b833d9175661da1fd3 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Fri, 18 Dec 2015 23:50:13 +0000
Subject: [PATCH] Accessibility: Improvements for the Authentication Check
 modal dialog "Close X".

Removes the title attribute and uses a `<button>` element instead of a `<div>`.
Also simplifies the CSS and takes care of the hover/focus style.

Fixes #35142.

git-svn-id: https://develop.svn.wordpress.org/trunk@36014 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/wp-auth-check.css | 21 ++++++---------------
 src/wp-includes/functions.php         |  2 +-
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/wp-includes/css/wp-auth-check.css b/src/wp-includes/css/wp-auth-check.css
index 5d31e0341f..0c1408ed91 100644
--- a/src/wp-includes/css/wp-auth-check.css
+++ b/src/wp-includes/css/wp-auth-check.css
@@ -87,33 +87,24 @@
 
 #wp-auth-check-wrap .wp-auth-check-close {
 	position: absolute;
-	top: 8px;
-	right: 8px;
+	top: 5px;
+	right: 5px;
 	height: 22px;
 	width: 22px;
-	cursor: pointer;
+	color: #72777c;
 }
 
 #wp-auth-check-wrap .wp-auth-check-close:before {
 	content: "\f158";
-	display: block !important;
-	font: normal 20px/1 dashicons;
+	font: normal 20px/22px dashicons;
 	speak: none;
-	height: 22px;
-	margin: 2px 0;
-	text-align: center;
-	width: 22px;
-	color: #777;
 	-webkit-font-smoothing: antialiased !important;
 	-moz-osx-font-smoothing: grayscale;
 }
 
-#wp-auth-check-wrap .wp-auth-check-close:hover:before {
-	color: #0073aa;
-}
-
+#wp-auth-check-wrap .wp-auth-check-close:hover,
 #wp-auth-check-wrap .wp-auth-check-close:focus {
-	outline: 1px dotted #82878c;
+	color: #0073aa;
 }
 
 #wp-auth-check-wrap .wp-auth-fallback-expired {
diff --git a/src/wp-includes/functions.php b/src/wp-includes/functions.php
index 9fd503fd0e..d5edb2c917 100644
--- a/src/wp-includes/functions.php
+++ b/src/wp-includes/functions.php
@@ -4934,7 +4934,7 @@ function wp_auth_check_html() {
 	<div id="wp-auth-check-wrap" class="<?php echo $wrap_class; ?>">
 	<div id="wp-auth-check-bg"></div>
 	<div id="wp-auth-check">
-	<div class="wp-auth-check-close" tabindex="0" title="<?php esc_attr_e('Close'); ?>"></div>
+	<button type="button" class="wp-auth-check-close button-link"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></button>
 	<?php
 
 	if ( $same_domain ) {