WordPress.org
Get WordPress

Make WordPress Core

Changeset 54191


Ignore:
Timestamp:
09/16/2022 11:11:41 PM (4 years ago)
Author:
joedolson
Message:

Login and Registration: Access improvements to network signup.

Fix a variety of accessibility issues with the network registration and activation screens. Fix associations between error messages and fields, improve labels for radio buttons, add fieldset and legend to properly group fields.

Props afercia, allisonplus, sabernhardt.
Fixes #40361.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-activate.php

    r49992 r54191  
    106106        ?>
    107107        <style type="text/css">
    108                 form { margin-top: 2em; }
    109                 #submit, #key { width: 90%; font-size: 24px; }
    110                 #language { margin-top: .5em; }
    111                 .error { background: #f66; }
     108                .wp-activate-container { width: 90%; margin: 0 auto; }
     109                .wp-activate-container form { margin-top: 2em; }
     110                #submit, #key { width: 100%; font-size: 24px; box-sizing: border-box; }
     111                #language { margin-top: 0.5em; }
     112                .wp-activate-container .error { background: #f66; color: #333; }
    112113                span.h3 { padding: 0 8px; font-size: 1.3em; font-weight: 600; }
    113114        </style>
    … …  
    131132                        <p>
    132133                                <label for="key"><?php _e( 'Activation Key:' ); ?></label>
    133                                 <br /><input type="text" name="key" id="key" value="" size="50" />
     134                                <br /><input type="text" name="key" id="key" value="" size="50" autofocus="autofocus" />
    134135                        </p>
    135136                        <p class="submit">
    … …  
    214215        </div>
    215216</div>
    216 <script type="text/javascript">
    217         var key_input = document.getElementById('key');
    218         key_input && key_input.focus();
    219 </script>
    220217<?php
    221218get_footer( 'wp-activate' );

  • trunk/src/wp-signup.php

    r53131 r54191  
    5858        ?>
    5959        <style type="text/css">
    60                 .mu_register { width: 90%; margin:0 auto; }
     60                .mu_register { width: 90%; margin: 0 auto; }
    6161                .mu_register form { margin-top: 2em; }
    62                 .mu_register .error { font-weight: 600; padding: 10px; color: #333333; background: #FFEBE8; border: 1px solid #CC0000; }
     62                .mu_register fieldset,
     63                        .mu_register legend { margin: 0; padding: 0; border: none; }
     64                .mu_register .error { font-weight: 600; padding: 10px; color: #333; background: #ffebe8; border: 1px solid #c00; }
    6365                .mu_register input[type="submit"],
    6466                        .mu_register #blog_title,
    6567                        .mu_register #user_email,
    6668                        .mu_register #blogname,
    67                         .mu_register #user_name { width:100%; font-size: 24px; margin:5px 0; }
     69                        .mu_register #user_name { width: 100%; font-size: 24px; margin: 5px 0; box-sizing: border-box; }
    6870                .mu_register #site-language { display: block; }
    6971                .mu_register .prefix_address,
    70                         .mu_register .suffix_address { font-size: 18px; display:inline; }
    71                 .mu_register label { font-weight: 600; font-size: 15px; display: block; margin: 10px 0; }
    72                 .mu_register label.checkbox { display:inline; }
    73                 .mu_register .mu_alert { font-weight: 600; padding: 10px; color: #333333; background: #ffffe0; border: 1px solid #e6db55; }
     72                        .mu_register .suffix_address { font-size: 18px; display: inline-block; direction: ltr; }
     73                .mu_register label,
     74                        .mu_register legend,
     75                        .mu_register .label-heading { font-weight: 600; font-size: 15px; display: block; margin: 10px 0; }
     76                .mu_register legend + p,
     77                        .mu_register input + p { margin-top: 0; }
     78                .mu_register label.checkbox { display: inline; }
     79                .mu_register .mu_alert { font-weight: 600; padding: 10px; color: #333; background: #ffffe0; border: 1px solid #e6db55; }
     80                .mu_register .mu_alert a { color: inherit; text-decoration: underline; }
     81                .mu_register .signup-options .wp-signup-radio-button { display: block; }
     82                .mu_register .privacy-intro .wp-signup-radio-button { margin-right: 0.5em; }
     83                .rtl .mu_register .wp-signup-blogname { direction: ltr; text-align: right; }
    7484        </style>
    7585        <?php
    7686}
    77 
    7887add_action( 'wp_head', 'wpmu_signup_stylesheet' );
     88
    7989get_header( 'wp-signup' );
    8090
    … …  
    111121        }
    112122
    113         $errmsg = $errors->get_error_message( 'blogname' );
    114         if ( $errmsg ) {
    115                 ?>
    116                 <p class="error"><?php echo $errmsg; ?></p>
    117                 <?php
     123        $errmsg_blogname      = $errors->get_error_message( 'blogname' );
     124        $errmsg_blogname_aria = '';
     125        if ( $errmsg_blogname ) {
     126                $errmsg_blogname_aria = 'wp-signup-blogname-error ';
     127                echo '<p class="error" id="wp-signup-blogname-error">' . $errmsg_blogname . '</p>';
    118128        }
    119129
    120130        if ( ! is_subdomain_install() ) {
    121                 echo '<span class="prefix_address">' . $current_network->domain . $current_network->path . '</span><input name="blogname" type="text" id="blogname" value="' . esc_attr( $blogname ) . '" maxlength="60" autocomplete="off" /><br />';
     131                echo '<div class="wp-signup-blogname"><span class="prefix_address" id="prefix-address">' . $current_network->domain . $current_network->path . '</span><input name="blogname" type="text" id="blogname" value="' . esc_attr( $blogname ) . '" maxlength="60" autocomplete="off" aria-describedby="' . $errmsg_blogname_aria . 'prefix-address" /></div>';
    122132        } else {
    123133                $site_domain = preg_replace( '|^www\.|', '', $current_network->domain );
    124                 echo '<input name="blogname" type="text" id="blogname" value="' . esc_attr( $blogname ) . '" maxlength="60" autocomplete="off" /><span class="suffix_address">.' . esc_html( $site_domain ) . '</span><br />';
     134                echo '<div class="wp-signup-blogname"><input name="blogname" type="text" id="blogname" value="' . esc_attr( $blogname ) . '" maxlength="60" autocomplete="off" aria-describedby="' . $errmsg_blogname_aria . 'suffix-address" /><span class="suffix_address" id="suffix-address">.' . esc_html( $site_domain ) . '</span></div>';
    125135        }
    126136
    … …  
    144154        <label for="blog_title"><?php _e( 'Site Title:' ); ?></label>
    145155        <?php
    146         $errmsg = $errors->get_error_message( 'blog_title' );
    147         if ( $errmsg ) {
    148                 ?>
    149                 <p class="error"><?php echo $errmsg; ?></p>
    150                 <?php
    151         }
    152         echo '<input name="blog_title" type="text" id="blog_title" value="' . esc_attr( $blog_title ) . '" autocomplete="off" />';
     156        $errmsg_blog_title      = $errors->get_error_message( 'blog_title' );
     157        $errmsg_blog_title_aria = '';
     158        if ( $errmsg_blog_title ) {
     159                $errmsg_blog_title_aria = ' aria-describedby="wp-signup-blog-title-error"';
     160                echo '<p class="error" id="wp-signup-blog-title-error">' . $errmsg_blog_title . '</p>';
     161        }
     162        echo '<input name="blog_title" type="text" id="blog_title" value="' . esc_attr( $blog_title ) . '" autocomplete="off"' . $errmsg_blog_title_aria . ' />';
    153163        ?>
    154164
    … …  
    198208
    199209        <div id="privacy">
    200                 <p class="privacy-intro">
    201                         <?php _e( 'Privacy:' ); ?>
    202                         <?php _e( 'Allow search engines to index this site.' ); ?>
    203                         <br style="clear:both" />
    204                         <label class="checkbox" for="blog_public_on">
    205                                 <input type="radio" id="blog_public_on" name="blog_public" value="1" <?php echo $blog_public_on_checked; ?> />
    206                                 <strong><?php _e( 'Yes' ); ?></strong>
    207                         </label>
    208                         <label class="checkbox" for="blog_public_off">
    209                                 <input type="radio" id="blog_public_off" name="blog_public" value="0" <?php echo $blog_public_off_checked; ?> />
    210                                 <strong><?php _e( 'No' ); ?></strong>
    211                         </label>
    212                 </p>
     210                <fieldset class="privacy-intro">
     211                        <legend>
     212                                <span class="label-heading"><?php _e( 'Privacy:' ); ?></span>
     213                                <?php _e( 'Allow search engines to index this site.' ); ?>
     214                        </legend>
     215                        <p class="wp-signup-radio-buttons">
     216                                <span class="wp-signup-radio-button">
     217                                        <input type="radio" id="blog_public_on" name="blog_public" value="1" <?php echo $blog_public_on_checked; ?> />
     218                                        <label class="checkbox" for="blog_public_on"><?php _e( 'Yes' ); ?></label>
     219                                </span>
     220                                <span class="wp-signup-radio-button">
     221                                        <input type="radio" id="blog_public_off" name="blog_public" value="0" <?php echo $blog_public_off_checked; ?> />
     222                                        <label class="checkbox" for="blog_public_off"><?php _e( 'No' ); ?></label>
     223                                </span>
     224                        </p>
     225                </fieldset>
    213226        </div>
    214227
    … …  
    257270        // Username.
    258271        echo '<label for="user_name">' . __( 'Username:' ) . '</label>';
    259         $errmsg = $errors->get_error_message( 'user_name' );
    260         if ( $errmsg ) {
    261                 echo '<p class="error">' . $errmsg . '</p>';
    262         }
    263         echo '<input name="user_name" type="text" id="user_name" value="' . esc_attr( $user_name ) . '" autocapitalize="none" autocorrect="off" maxlength="60" autocomplete="username" /><br />';
    264         _e( '(Must be at least 4 characters, letters and numbers only.)' );
    265         ?>
    266 
    267         <label for="user_email"><?php _e( 'Email&nbsp;Address:' ); ?></label>
    268         <?php
    269         $errmsg = $errors->get_error_message( 'user_email' );
    270         if ( $errmsg ) {
    271                 ?>
    272                 <p class="error"><?php echo $errmsg; ?></p>
    273         <?php } ?>
    274         <input name="user_email" type="email" id="user_email" value="<?php echo esc_attr( $user_email ); ?>" maxlength="200" autocomplete="email" /><br /><?php _e( 'Your registration email is sent to this address. (Double-check your email address before continuing.)' ); ?>
    275         <?php
    276         $errmsg = $errors->get_error_message( 'generic' );
    277         if ( $errmsg ) {
    278                 echo '<p class="error">' . $errmsg . '</p>';
     272        $errmsg_username      = $errors->get_error_message( 'user_name' );
     273        $errmsg_username_aria = '';
     274        if ( $errmsg_username ) {
     275                $errmsg_username_aria = 'wp-signup-username-error ';
     276                echo '<p class="error" id="wp-signup-username-error">' . $errmsg_username . '</p>';
     277        }
     278        ?>
     279        <input name="user_name" type="text" id="user_name" value="<?php echo esc_attr( $user_name ); ?>" autocapitalize="none" autocorrect="off" maxlength="60" autocomplete="username" aria-describedby="<?php echo $errmsg_username_aria; ?>wp-signup-username-description" />
     280        <p id="wp-signup-username-description"><?php _e( '(Must be at least 4 characters, lowercase letters and numbers only.)' ); ?></p>
     281
     282        <?php
     283        // Email address.
     284        echo '<label for="user_email">' . __( 'Email&nbsp;Address:' ) . '</label>';
     285        $errmsg_email      = $errors->get_error_message( 'user_email' );
     286        $errmsg_email_aria = '';
     287        if ( $errmsg_email ) {
     288                $errmsg_email_aria = 'wp-signup-email-error ';
     289                echo '<p class="error" id="wp-signup-email-error">' . $errmsg_email . '</p>';
     290        }
     291        ?>
     292        <input name="user_email" type="email" id="user_email" value="<?php echo esc_attr( $user_email ); ?>" maxlength="200" autocomplete="email" aria-describedby="<?php echo $errmsg_email_aria; ?>wp-signup-email-description" />
     293        <p id="wp-signup-email-description"><?php _e( 'Your registration email is sent to this address. (Double-check your email address before continuing.)' ); ?></p>
     294
     295        <?php
     296        // Extra fields.
     297        $errmsg_generic = $errors->get_error_message( 'generic' );
     298        if ( $errmsg_generic ) {
     299                echo '<p class="error" id="wp-signup-generic-error">' . $errmsg_generic . '</p>';
    279300        }
    280301        /**
    … …  
    610631                <?php show_user_form( $user_name, $user_email, $errors ); ?>
    611632
    612                 <p>
    613                 <?php if ( 'blog' === $active_signup ) { ?>
     633                <?php if ( 'blog' === $active_signup ) : ?>
    614634                        <input id="signupblog" type="hidden" name="signup_for" value="blog" />
    615                 <?php } elseif ( 'user' === $active_signup ) { ?>
     635                <?php elseif ( 'user' === $active_signup ) : ?>
    616636                        <input id="signupblog" type="hidden" name="signup_for" value="user" />
    617                 <?php } else { ?>
    618                         <input id="signupblog" type="radio" name="signup_for" value="blog" <?php checked( $signup_for, 'blog' ); ?> />
    619                         <label class="checkbox" for="signupblog"><?php _e( 'Gimme a site!' ); ?></label>
    620                         <br />
    621                         <input id="signupuser" type="radio" name="signup_for" value="user" <?php checked( $signup_for, 'user' ); ?> />
    622                         <label class="checkbox" for="signupuser"><?php _e( 'Just a username, please.' ); ?></label>
    623                 <?php } ?>
    624                 </p>
     637                <?php else : ?>
     638                        <fieldset class="signup-options">
     639                                <legend><?php _e( 'Create a site or only a username:' ); ?></legend>
     640                                <p class="wp-signup-radio-buttons">
     641                                        <span class="wp-signup-radio-button">
     642                                                <input id="signupblog" type="radio" name="signup_for" value="blog" <?php checked( $signup_for, 'blog' ); ?> />
     643                                                <label class="checkbox" for="signupblog"><?php _e( 'Gimme a site!' ); ?></label>
     644                                        </span>
     645                                        <span class="wp-signup-radio-button">
     646                                                <input id="signupuser" type="radio" name="signup_for" value="user" <?php checked( $signup_for, 'user' ); ?> />
     647                                                <label class="checkbox" for="signupuser"><?php _e( 'Just a username, please.' ); ?></label>
     648                                        </span>
     649                                </p>
     650                        </fieldset>
     651                <?php endif; ?>
    625652
    626653                <p class="submit"><input type="submit" name="submit" class="submit" value="<?php esc_attr_e( 'Next' ); ?>" /></p>
    … …  
    842869        <p><?php _e( 'If you do not activate your site within two days, you will have to sign up again.' ); ?></p>
    843870        <h2><?php _e( 'Still waiting for your email?' ); ?></h2>
    844         <p>
    845                 <?php _e( 'If you have not received your email yet, there are a number of things you can do:' ); ?>
    846                 <ul id="noemail-tips">
    847                         <li><p><strong><?php _e( 'Wait a little longer. Sometimes delivery of email can be delayed by processes outside of our control.' ); ?></strong></p></li>
    848                         <li><p><?php _e( 'Check the junk or spam folder of your email client. Sometime emails wind up there by mistake.' ); ?></p></li>
    849                         <li>
    850                         <?php
    851                                 /* translators: %s: Email address. */
    852                                 printf( __( 'Have you entered your email correctly? You have entered %s, if it&#8217;s incorrect, you will not receive your email.' ), $user_email );
    853                         ?>
    854                         </li>
    855                 </ul>
    856         </p>
     871        <p><?php _e( 'If you have not received your email yet, there are a number of things you can do:' ); ?></p>
     872        <ul id="noemail-tips">
     873                <li><p><strong><?php _e( 'Wait a little longer. Sometimes delivery of email can be delayed by processes outside of our control.' ); ?></strong></p></li>
     874                <li><p><?php _e( 'Check the junk or spam folder of your email client. Sometime emails wind up there by mistake.' ); ?></p></li>
     875                <li>
     876                <?php
     877                        /* translators: %s: Email address. */
     878                        printf( __( 'Have you entered your email correctly? You have entered %s, if it&#8217;s incorrect, you will not receive your email.' ), $user_email );
     879                ?>
     880                </li>
     881        </ul>
    857882        <?php
    858883        /** This action is documented in wp-signup.php */
Note: See TracChangeset for help on using the changeset viewer.