Login and Registration: Add descriptive `h1` on login screens.

Add an `h1` heading with the existing `login_header()` text string on each view of the login screen. Mark the existing `h1`, used to wrap the WordPress logo, with `role="presentation"`, to remove it from the headings hierarchy.

Props roytanck, joedolson, ryokuhi, sabernhardt, pamprn, nagpai, mukesh27.
Fixes #51786.
Built from https://develop.svn.wordpress.org/trunk@59138


git-svn-id: http://core.svn.wordpress.org/trunk@58534 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2024-09-30 19:12:14 +00:00
parent 3d8e08adf8
commit df3ba33621
6 changed files with 24 additions and 17 deletions

View File

@ -225,7 +225,7 @@ p {
margin: 1.1em 0; margin: 1.1em 0;
} }
.login h1.admin-email__heading { .login .admin-email__heading {
border-bottom: 1px #f0f0f1 solid; border-bottom: 1px #f0f0f1 solid;
color: #50575e; color: #50575e;
font-weight: normal; font-weight: normal;
@ -270,11 +270,11 @@ p {
vertical-align: baseline; vertical-align: baseline;
} }
.login h1 { .login .wp-login-logo {
text-align: center; text-align: center;
} }
.login h1 a { .login .wp-login-logo a {
background-image: url(../images/w-logo-blue.png?ver=20131202); background-image: url(../images/w-logo-blue.png?ver=20131202);
background-image: none, url(../images/wordpress-logo.svg?ver=20131107); background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
background-size: 84px; background-size: 84px;
@ -324,13 +324,13 @@ p {
.login #nav a:hover, .login #nav a:hover,
.login #backtoblog a:hover, .login #backtoblog a:hover,
.login h1 a:hover { .login .wp-login-logo a:hover {
color: #135e96; color: #135e96;
} }
.login #nav a:focus, .login #nav a:focus,
.login #backtoblog a:focus, .login #backtoblog a:focus,
.login h1 a:focus { .login .wp-login-logo a:focus {
color: #043959; color: #043959;
} }
@ -391,7 +391,7 @@ body.interim-login {
margin: 5px auto 20px; margin: 5px auto 20px;
} }
.interim-login.login h1 a { .interim-login.login .wp-login-logo a {
width: auto; width: auto;
} }

File diff suppressed because one or more lines are too long

View File

@ -224,7 +224,7 @@ p {
margin: 1.1em 0; margin: 1.1em 0;
} }
.login h1.admin-email__heading { .login .admin-email__heading {
border-bottom: 1px #f0f0f1 solid; border-bottom: 1px #f0f0f1 solid;
color: #50575e; color: #50575e;
font-weight: normal; font-weight: normal;
@ -269,11 +269,11 @@ p {
vertical-align: baseline; vertical-align: baseline;
} }
.login h1 { .login .wp-login-logo {
text-align: center; text-align: center;
} }
.login h1 a { .login .wp-login-logo a {
background-image: url(../images/w-logo-blue.png?ver=20131202); background-image: url(../images/w-logo-blue.png?ver=20131202);
background-image: none, url(../images/wordpress-logo.svg?ver=20131107); background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
background-size: 84px; background-size: 84px;
@ -323,13 +323,13 @@ p {
.login #nav a:hover, .login #nav a:hover,
.login #backtoblog a:hover, .login #backtoblog a:hover,
.login h1 a:hover { .login .wp-login-logo a:hover {
color: #135e96; color: #135e96;
} }
.login #nav a:focus, .login #nav a:focus,
.login #backtoblog a:focus, .login #backtoblog a:focus,
.login h1 a:focus { .login .wp-login-logo a:focus {
color: #043959; color: #043959;
} }
@ -390,7 +390,7 @@ body.interim-login {
margin: 5px auto 20px; margin: 5px auto 20px;
} }
.interim-login.login h1 a { .interim-login.login .wp-login-logo a {
width: auto; width: auto;
} }

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.7-alpha-59137'; $wp_version = '6.7-alpha-59138';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

View File

@ -210,10 +210,16 @@ function login_header( $title = null, $message = '', $wp_error = null ) {
* @since 4.6.0 * @since 4.6.0
*/ */
do_action( 'login_header' ); do_action( 'login_header' );
?>
<?php
if ( 'confirm_admin_email' !== $action && ! empty( $title ) ) :
?>
<h1 class="screen-reader-text"><?php echo $title; ?></h1>
<?php
endif;
?> ?>
<div id="login"> <div id="login">
<h1><a href="<?php echo esc_url( $login_header_url ); ?>"><?php echo $login_header_text; ?></a></h1> <h1 role="presentation" class="wp-login-logo"><a href="<?php echo esc_url( $login_header_url ); ?>"><?php echo $login_header_text; ?></a></h1>
<?php <?php
/** /**
* Filters the message to display above the login form. * Filters the message to display above the login form.
@ -420,6 +426,7 @@ function login_footer( $input_id = '' ) {
</div> </div>
<?php } ?> <?php } ?>
<?php } ?> <?php } ?>
<?php <?php
if ( ! empty( $input_id ) ) { if ( ! empty( $input_id ) ) {