Changeset 59138

Timestamp:

09/30/2024 07:10:22 PM (12 days ago)

Author:

joedolson

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/login.css (modified) (5 diffs)
• wp-login.php (modified) (2 diffs)

trunk/src/wp-admin/css/login.css

@@ -225 +225 @@
 }
 
-.login h1.admin-email__heading {
+.login .admin-email__heading {
     border-bottom: 1px #f0f0f1 solid;
     color: #50575e;
@@ -270 +270 @@
 }
 
-.login h1 {
+.login .wp-login-logo {
     text-align: center;
 }
 
-.login h1 a {
+.login .wp-login-logo a {
     background-image: url(../images/w-logo-blue.png?ver=20131202);
     background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
@@ -324 +324 @@
 .login #nav a:hover,
 .login #backtoblog a:hover,
-.login h1 a:hover {
+.login .wp-login-logo a:hover {
     color: #135e96;
 }
@@ -330 +330 @@
 .login #nav a:focus,
 .login #backtoblog a:focus,
-.login h1 a:focus {
+.login .wp-login-logo a:focus {
     color: #043959;
 }
@@ -391 +391 @@
 }
 
-.interim-login.login h1 a {
+.interim-login.login .wp-login-logo a {
     width: auto;
 }

trunk/src/wp-login.php

@@ -211 +211 @@
      */
     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">
-        <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
     /**
@@ -421 +427 @@
         <?php } ?>
     <?php } ?>
+
     <?php