Skip to content

Commit

Permalink
Accessibility: Improve settings tables and forms after [45403].
Browse files Browse the repository at this point in the history 
- adds `role="presentation"` to the edit comment table 
- removes a few pointless `<fieldset>` elements
- adds a few missing `<label>` elements
- adds the CSS class `class="td-full"` to table rows spanning to multiple cells
- adds explicit `scope="row"` attribute to the table headers in `options-permalink.php`: this table is better communicated as data table 
- uses consistent label association in the "Privacy Settings" page
- in the installation page "Set up your database connection": associates descriptions to their inout fields using `aria-describedby`
- improves the link to gravatar.com in the `user-edit.php` page

Props afercia.
Merges [45416] to the 5.2 branch.
See #46899.
Fixes #47390.

git-svn-id: https://develop.svn.wordpress.org/branches/5.2@45835 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@SergeyBiryukov
SergeyBiryukov committed Aug 19, 2019
1 parent 0f96b40 commit f663746
Show file tree
Hide file tree
Showing 13 changed files with 40 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/wp-admin/edit-form-comment.php
View file
Expand Up @@ -43,7 +43,7 @@
<h2 class="edit-comment-author"><?php _e( 'Author' ); ?></h2>
<fieldset>
<legend class="screen-reader-text"><?php _e( 'Comment Author' ); ?></legend>
<table class="form-table editcomment">
<table class="form-table editcomment" role="presentation">
<tbody>
<tr>
<td class="first"><label for="name"><?php _e( 'Name' ); ?></label></td>
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/includes/ms.php
View file
Expand Up @@ -984,7 +984,7 @@ function confirm_delete_users( $users ) {
echo '</fieldset></td></tr>';
} else {
?>
<td><fieldset><p><legend><?php _e( 'User has no sites or content and will be deleted.' ); ?></legend></p>
<td><p><?php _e( 'User has no sites or content and will be deleted.' ); ?></p></td>
<?php } ?>
</tr>
<?php
Expand Down
8 changes: 4 additions & 4 deletions src/wp-admin/includes/network.php
View file
Expand Up @@ -347,18 +347,18 @@ function network_step1( $errors = false ) {
</tr>
<?php endif; ?>
<tr>
<th scope='row'><?php esc_html_e( 'Network Title' ); ?></th>
<th scope='row'><label for="sitename"><?php esc_html_e( 'Network Title' ); ?></label></th>
<td>
<input name='sitename' type='text' size='45' value='<?php echo esc_attr( $site_name ); ?>' />
<input name='sitename' id='sitename' type='text' size='45' value='<?php echo esc_attr( $site_name ); ?>' />
<p class="description">
<?php _e( 'What would you like to call your network?' ); ?>
</p>
</td>
</tr>
<tr>
<th scope='row'><?php esc_html_e( 'Network Admin Email' ); ?></th>
<th scope='row'><label for="email"><?php esc_html_e( 'Network Admin Email' ); ?></label></th>
<td>
<input name='email' type='text' size='45' value='<?php echo esc_attr( $admin_email ); ?>' />
<input name='email' id='email' type='text' size='45' value='<?php echo esc_attr( $admin_email ); ?>' />
<p class="description">
<?php _e( 'Your email address.' ); ?>
</p>
Expand Down
13 changes: 6 additions & 7 deletions src/wp-admin/network/settings.php
View file
Expand Up @@ -452,16 +452,15 @@
*
* @param string[] $admin_menus Associative array of the menu items available.
*/
$menu_items = apply_filters( 'mu_menu_items', array( 'plugins' => __( 'Plugins' ) ) );
$fieldset_end = '';
if ( count( (array) $menu_items ) > 1 ) {
echo '<fieldset><legend class="screen-reader-text">' . __( 'Enable menus' ) . '</legend>';
$fieldset_end = '</fieldset>';
}
$menu_items = apply_filters( 'mu_menu_items', array( 'plugins' => __( 'Plugins' ) ) );

echo '<fieldset><legend class="screen-reader-text">' . __( 'Enable menus' ) . '</legend>';

foreach ( (array) $menu_items as $key => $val ) {
echo "<label><input type='checkbox' name='menu_items[" . $key . "]' value='1'" . ( isset( $menu_perms[ $key ] ) ? checked( $menu_perms[ $key ], '1', false ) : '' ) . ' /> ' . esc_html( $val ) . '</label><br/>';
}
echo $fieldset_end;

echo '</fieldset>';
?>
</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/network/site-info.php
View file
Expand Up @@ -166,7 +166,7 @@
else :
?>
<tr class="form-field form-required">
<th scope="row"><?php _e( 'Site Address (URL)' ); ?></th>
<th scope="row"><label for="url"><?php _e( 'Site Address (URL)' ); ?></label></th>
<td><input name="blog[url]" type="text" id="url" value="<?php echo $parsed_scheme . '://' . esc_attr( $details->domain ) . esc_attr( $details->path ); ?>" /></td>
</tr>
<?php endif; ?>
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/network/site-new.php
View file
Expand Up @@ -281,7 +281,7 @@
<td><input name="blog[email]" type="email" class="regular-text wp-suggest-user" id="admin-email" data-autocomplete-type="search" data-autocomplete-field="user_email" aria-describedby="site-admin-email" required /></td>
</tr>
<tr class="form-field">
<td colspan="2"><p id="site-admin-email"><?php _e( 'A new user will be created if the above email address is not in the database.' ); ?><br /><?php _e( 'The username and a link to set the password will be mailed to this email address.' ); ?></p></td>
<td colspan="2" class="td-full"><p id="site-admin-email"><?php _e( 'A new user will be created if the above email address is not in the database.' ); ?><br /><?php _e( 'The username and a link to set the password will be mailed to this email address.' ); ?></p></td>
</tr>
</table>

Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/network/site-users.php
View file
Expand Up @@ -354,7 +354,7 @@
</select></td>
</tr>
<tr class="form-field">
<td colspan="2"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
<td colspan="2" class="td-full"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
</tr>
</table>
<?php wp_nonce_field( 'add-user', '_wpnonce_add-new-user' ); ?>
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/network/user-new.php
View file
Expand Up @@ -130,7 +130,7 @@
<td><input type="email" class="regular-text" name="user[email]" id="email"/></td>
</tr>
<tr class="form-field">
<td colspan="2"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
<td colspan="2" class="td-full"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
</tr>
</table>
<?php
Expand Down
6 changes: 4 additions & 2 deletions src/wp-admin/options-discussion.php
View file
Expand Up @@ -221,12 +221,12 @@
<table class="form-table" role="presentation">
<tr>
<th scope="row"><?php _e( 'Avatar Display' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Avatar Display' ); ?></span></legend>
<td>
<label for="show_avatars">
<input type="checkbox" id="show_avatars" name="show_avatars" value="1" <?php checked( $show_avatars, 1 ); ?> />
<?php _e( 'Show Avatars' ); ?>
</label>
</fieldset></td>
</td>
</tr>
<tr class="avatar-settings<?php echo $show_avatars_class; ?>">
<th scope="row"><?php _e( 'Maximum Rating' ); ?></th>
Expand Down Expand Up @@ -255,7 +255,9 @@
<th scope="row"><?php _e( 'Default Avatar' ); ?></th>
<td class="defaultavatarpicker"><fieldset><legend class="screen-reader-text"><span><?php _e( 'Default Avatar' ); ?></span></legend>

<p>
<?php _e( 'For users without a custom avatar of their own, you can either display a generic logo or a generated one based on their email address.' ); ?><br />
</p>

<?php
$avatar_defaults = array(
Expand Down
12 changes: 6 additions & 6 deletions src/wp-admin/options-permalink.php
View file
Expand Up @@ -197,27 +197,27 @@
<h2 class="title"><?php _e( 'Common Settings' ); ?></h2>
<table class="form-table permalink-structure">
<tr>
<th><label><input name="selection" type="radio" value="" <?php checked( '', $permalink_structure ); ?> /> <?php _e( 'Plain' ); ?></label></th>
<th scope="row"><label><input name="selection" type="radio" value="" <?php checked( '', $permalink_structure ); ?> /> <?php _e( 'Plain' ); ?></label></th>
<td><code><?php echo get_option( 'home' ); ?>/?p=123</code></td>
</tr>
<tr>
<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[1] ); ?>" <?php checked( $structures[1], $permalink_structure ); ?> /> <?php _e( 'Day and name' ); ?></label></th>
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[1] ); ?>" <?php checked( $structures[1], $permalink_structure ); ?> /> <?php _e( 'Day and name' ); ?></label></th>
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . date( 'Y' ) . '/' . date( 'm' ) . '/' . date( 'd' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
</tr>
<tr>
<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[2] ); ?>" <?php checked( $structures[2], $permalink_structure ); ?> /> <?php _e( 'Month and name' ); ?></label></th>
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[2] ); ?>" <?php checked( $structures[2], $permalink_structure ); ?> /> <?php _e( 'Month and name' ); ?></label></th>
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . date( 'Y' ) . '/' . date( 'm' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
</tr>
<tr>
<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[3] ); ?>" <?php checked( $structures[3], $permalink_structure ); ?> /> <?php _e( 'Numeric' ); ?></label></th>
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[3] ); ?>" <?php checked( $structures[3], $permalink_structure ); ?> /> <?php _e( 'Numeric' ); ?></label></th>
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/123'; ?></code></td>
</tr>
<tr>
<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[4] ); ?>" <?php checked( $structures[4], $permalink_structure ); ?> /> <?php _e( 'Post name' ); ?></label></th>
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[4] ); ?>" <?php checked( $structures[4], $permalink_structure ); ?> /> <?php _e( 'Post name' ); ?></label></th>
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
</tr>
<tr>
<th>
<th scope="row">
<label><input name="selection" id="custom_selection" type="radio" value="custom" <?php checked( ! in_array( $permalink_structure, $structures ) ); ?> />
<?php _e( 'Custom Structure' ); ?>
</label>
Expand Down
9 changes: 3 additions & 6 deletions src/wp-admin/privacy.php
View file
Expand Up @@ -191,17 +191,17 @@
</p>

<hr>
<table class="form-table tools-privacy-policy-page">
<table class="form-table tools-privacy-policy-page" role="presentation">
<tr>
<th scope="row">
<th scope="row"><label for="page_for_privacy_policy">
<?php
if ( $privacy_policy_page_exists ) {
_e( 'Change your Privacy Policy page' );
} else {
_e( 'Select a Privacy Policy page' );
}
?>
</th>
</label></th>
<td>
<?php
$has_pages = (bool) get_posts(
Expand All @@ -218,9 +218,6 @@
if ( $has_pages ) :
?>
<form method="post" action="">
<label for="page_for_privacy_policy">
<?php _e( 'Select an existing page:' ); ?>
</label>
<input type="hidden" name="action" value="set-privacy-page" />
<?php
wp_dropdown_pages(
Expand Down
20 changes: 10 additions & 10 deletions src/wp-admin/setup-config.php
View file
Expand Up @@ -210,23 +210,23 @@ function setup_config_display_header( $body_classes = array() ) {
<table class="form-table" role="presentation">
<tr>
<th scope="row"><label for="dbname"><?php _e( 'Database Name' ); ?></label></th>
<td><input name="dbname" id="dbname" type="text" size="25" value="wordpress"<?php echo $autofocus; ?>/></td>
<td><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
<td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" value="wordpress"<?php echo $autofocus; ?>/></td>
<td id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
</tr>
<tr>
<th scope="row"><label for="uname"><?php _e( 'Username' ); ?></label></th>
<td><input name="uname" id="uname" type="text" size="25" value="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /></td>
<td><?php _e( 'Your database username.' ); ?></td>
<td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" value="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /></td>
<td id="uname-desc"><?php _e( 'Your database username.' ); ?></td>
</tr>
<tr>
<th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
<td><input name="pwd" id="pwd" type="text" size="25" value="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" /></td>
<td><?php _e( 'Your database password.' ); ?></td>
<td><input name="pwd" id="pwd" type="text" aria-describedby="pwd-desc" size="25" value="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" /></td>
<td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
</tr>
<tr>
<th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th>
<td><input name="dbhost" id="dbhost" type="text" size="25" value="localhost" /></td>
<td>
<td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /></td>
<td id="dbhost-desc">
<?php
/* translators: %s: localhost */
printf( __( 'You should be able to get this info from your web host, if %s doesn&#8217;t work.' ), '<code>localhost</code>' );
Expand All @@ -235,8 +235,8 @@ function setup_config_display_header( $body_classes = array() ) {
</tr>
<tr>
<th scope="row"><label for="prefix"><?php _e( 'Table Prefix' ); ?></label></th>
<td><input name="prefix" id="prefix" type="text" value="wp_" size="25" /></td>
<td><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
<td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /></td>
<td id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
</tr>
</table>
<?php
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/user-edit.php
View file
Expand Up @@ -568,7 +568,7 @@
if ( IS_PROFILE_PAGE ) {
/* translators: %s: Gravatar URL */
$description = sprintf(
__( 'You can change your profile picture on <a href="%s">Gravatar</a>.' ),
__( '<a href="%s">You can change your profile picture on Gravatar</a>.' ),
__( 'https://en.gravatar.com/' )
);
} else {
Expand Down

0 comments on commit f663746

Please sign in to comment.