Changeset 36014

Timestamp:

12/18/2015 11:50:13 PM (9 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-includes

Files:

• css/wp-auth-check.css (modified) (1 diff)
• functions.php (modified) (1 diff)

trunk/src/wp-includes/css/wp-auth-check.css

@@ -88 +88 @@
 #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 {
+#wp-auth-check-wrap .wp-auth-check-close:hover,
+#wp-auth-check-wrap .wp-auth-check-close:focus {
     color: #0073aa;
-}
-
-#wp-auth-check-wrap .wp-auth-check-close:focus {
-    outline: 1px dotted #82878c;
 }
 

trunk/src/wp-includes/functions.php

@@ -4935 +4935 @@
     <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