Changeset 56024

Timestamp:

06/25/2023 06:42:56 PM (3 years ago)

Author:

joedolson

Message:

Upgrade/Install: Add aria-describedby for input descriptions.

Accessibly associate field description text with relevant input fields. Add aria-describedby and target IDs for each description field. Update privacy text note to better reflect relevancy to specific fields.

Props costdev, joedolson.
Fixes #58613.

File:

• trunk/src/wp-admin/install.php (modified) (6 diffs)

trunk/src/wp-admin/install.php

@@ -124 +124 @@
                         } else {
                                 ?>
-                                <input name="user_name" type="text" id="user_login" size="25" value="<?php echo esc_attr( sanitize_user( $user_name, true ) ); ?>" />
-                                <p><?php _e( 'Usernames can have only alphanumeric characters, spaces, underscores, hyphens, periods, and the @ symbol.' ); ?></p>
+                                <input name="user_name" type="text" id="user_login" size="25" aria-describedby="user-name-desc" value="<?php echo esc_attr( sanitize_user( $user_name, true ) ); ?>" />
+                                <p id="user-name-desc"><?php _e( 'Usernames can have only alphanumeric characters, spaces, underscores, hyphens, periods, and the @ symbol.' ); ?></p>
                                 <?php
                         }
@@ -142 +142 @@
                                         <?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?>
                                         <div class="password-input-wrapper">
-                                                <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
+                                                <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result admin-password-desc" />
                                                 <div id="pass-strength-result" aria-live="polite"></div>
                                         </div>
@@ -150 +150 @@
                                         </button>
                                 </div>
-                                <p><span class="description important hide-if-no-js">
+                                <p id="admin-password-desc"><span class="description important hide-if-no-js">
                                 <strong><?php _e( 'Important:' ); ?></strong>
                                 <?php /* translators: The non-breaking space prevents 1Password from thinking the text "log in" should trigger a password save prompt. */ ?>
@@ -178 +178 @@
                 <tr>
                         <th scope="row"><label for="admin_email"><?php _e( 'Your Email' ); ?></label></th>
-                        <td><input name="admin_email" type="email" id="admin_email" size="25" value="<?php echo esc_attr( $admin_email ); ?>" />
-                        <p><?php _e( 'Double-check your email address before continuing.' ); ?></p></td>
+                        <td><input name="admin_email" type="email" id="admin_email" size="25" aria-describedby="admin-email-desc" value="<?php echo esc_attr( $admin_email ); ?>" />
+                        <p id="admin-email-desc"><?php _e( 'Double-check your email address before continuing.' ); ?></p></td>
                 </tr>
                 <tr>
@@ -199 +199 @@
                                                 <input id="blog-public" type="radio" name="blog_public" value="1" <?php checked( 1, $blog_public ); ?> />
                                                 <label for="blog-public"><?php _e( 'Allow search engines to index this site' ); ?></label><br />
-                                                <input id="blog-norobots" type="radio" name="blog_public" value="0" <?php checked( 0, $blog_public ); ?> />
+                                                <input id="blog-norobots" type="radio" name="blog_public"  aria-describedby="public-desc" value="0" <?php checked( 0, $blog_public ); ?> />
                                                 <label for="blog-norobots"><?php _e( 'Discourage search engines from indexing this site' ); ?></label>
-                                                <p class="description"><?php _e( 'Note: Neither of these options blocks access to your site &mdash; it is up to search engines to honor your request.' ); ?></p>
+                                                <p id="public-desc" class="description"><?php _e( 'Note: Discouraging search engines does not block access to your site &mdash; it is up to search engines to honor your request.' ); ?></p>
                                                 <?php
                                                 /** This action is documented in wp-admin/options-reading.php */
@@ -207 +207 @@
                                         } else {
                                                 ?>
-                                                <label for="blog_public"><input name="blog_public" type="checkbox" id="blog_public" value="0" <?php checked( 0, $blog_public ); ?> />
+                                                <label for="blog_public"><input name="blog_public" type="checkbox" id="blog_public" aria-describedby="privacy-desc" value="0" <?php checked( 0, $blog_public ); ?> />
                                                 <?php _e( 'Discourage search engines from indexing this site' ); ?></label>
-                                                <p class="description"><?php _e( 'It is up to search engines to honor this request.' ); ?></p>
+                                                <p id="privacy-desc" class="description"><?php _e( 'It is up to search engines to honor this request.' ); ?></p>
                                         <?php } ?>
                                 </fieldset>