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
This commit is contained in:
Andrea Fercia 2015-12-18 23:50:13 +00:00
parent fe89f7620f
commit 82e5450328
2 changed files with 7 additions and 16 deletions

View File

@ -87,33 +87,24 @@
#wp-auth-check-wrap .wp-auth-check-close { #wp-auth-check-wrap .wp-auth-check-close {
position: absolute; position: absolute;
top: 8px; top: 5px;
right: 8px; right: 5px;
height: 22px; height: 22px;
width: 22px; width: 22px;
cursor: pointer; color: #72777c;
} }
#wp-auth-check-wrap .wp-auth-check-close:before { #wp-auth-check-wrap .wp-auth-check-close:before {
content: "\f158"; content: "\f158";
display: block !important; font: normal 20px/22px dashicons;
font: normal 20px/1 dashicons;
speak: none; speak: none;
height: 22px;
margin: 2px 0;
text-align: center;
width: 22px;
color: #777;
-webkit-font-smoothing: antialiased !important; -webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
#wp-auth-check-wrap .wp-auth-check-close:hover:before { #wp-auth-check-wrap .wp-auth-check-close:hover,
color: #0073aa;
}
#wp-auth-check-wrap .wp-auth-check-close:focus { #wp-auth-check-wrap .wp-auth-check-close:focus {
outline: 1px dotted #82878c; color: #0073aa;
} }
#wp-auth-check-wrap .wp-auth-fallback-expired { #wp-auth-check-wrap .wp-auth-fallback-expired {

View File

@ -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-wrap" class="<?php echo $wrap_class; ?>">
<div id="wp-auth-check-bg"></div> <div id="wp-auth-check-bg"></div>
<div id="wp-auth-check"> <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 <?php
if ( $same_domain ) { if ( $same_domain ) {