Administration: Better targeting for required form field highlighting.

Previously, any `input` or `select` inside of a `.form-invalid` wrapper would get the red border highlighting, including submit buttons which was not visually correct. This now only applies to form elements with a class of `.form-required` inside of the `.form-invalid` wrapper. It also continues to apply the border to elements with both classes (`.form-invalid.form-required`) as that is how some of the admin markup is structured.

Plugin authors may need to do the same sort of class application seen in this commit, i.e. add `.form-required` to certain form elements.

Props sabernhardt, dilipbheda, helen.
Fixes #50686.


git-svn-id: https://develop.svn.wordpress.org/trunk@49283 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2020-10-23 15:03:37 +00:00
parent a1403240bb
commit ebe858e5a7
4 changed files with 13 additions and 11 deletions

View File

@ -238,10 +238,12 @@ textarea[readonly] {
color: #72777c;
}
.form-invalid input,
.form-invalid input:focus,
.form-invalid select,
.form-invalid select:focus {
.form-invalid .form-required,
.form-invalid .form-required:focus,
.form-invalid.form-required input,
.form-invalid.form-required input:focus,
.form-invalid.form-required select,
.form-invalid.form-required select:focus {
border-color: #dc3232 !important;
box-shadow: 0 0 2px rgba(204, 0, 0, 0.8);
}

View File

@ -299,7 +299,7 @@ function wp_nav_menu_item_link_meta_box() {
<input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
<p id="menu-item-url-wrap" class="wp-clearfix">
<label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
<input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" type="text"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="code menu-item-textbox" placeholder="https://" />
<input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" type="text"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="code menu-item-textbox form-required" placeholder="https://" />
</p>
<p id="menu-item-name-wrap" class="wp-clearfix">

View File

@ -813,7 +813,7 @@ function touch_time( $edit = 1, $for_post = 1, $tab_index = 0, $multi = 0 ) {
$cur_hh = current_time( 'H' );
$cur_mn = current_time( 'i' );
$month = '<label><span class="screen-reader-text">' . __( 'Month' ) . '</span><select ' . ( $multi ? '' : 'id="mm" ' ) . 'name="mm"' . $tab_index_attribute . ">\n";
$month = '<label><span class="screen-reader-text">' . __( 'Month' ) . '</span><select class="form-required" ' . ( $multi ? '' : 'id="mm" ' ) . 'name="mm"' . $tab_index_attribute . ">\n";
for ( $i = 1; $i < 13; $i = $i + 1 ) {
$monthnum = zeroise( $i, 2 );
$monthtext = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );
@ -823,10 +823,10 @@ function touch_time( $edit = 1, $for_post = 1, $tab_index = 0, $multi = 0 ) {
}
$month .= '</select></label>';
$day = '<label><span class="screen-reader-text">' . __( 'Day' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="jj" ' ) . 'name="jj" value="' . $jj . '" size="2" maxlength="2"' . $tab_index_attribute . ' autocomplete="off" /></label>';
$year = '<label><span class="screen-reader-text">' . __( 'Year' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="aa" ' ) . 'name="aa" value="' . $aa . '" size="4" maxlength="4"' . $tab_index_attribute . ' autocomplete="off" /></label>';
$hour = '<label><span class="screen-reader-text">' . __( 'Hour' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="hh" ' ) . 'name="hh" value="' . $hh . '" size="2" maxlength="2"' . $tab_index_attribute . ' autocomplete="off" /></label>';
$minute = '<label><span class="screen-reader-text">' . __( 'Minute' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="mn" ' ) . 'name="mn" value="' . $mn . '" size="2" maxlength="2"' . $tab_index_attribute . ' autocomplete="off" /></label>';
$day = '<label><span class="screen-reader-text">' . __( 'Day' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="jj" ' ) . 'name="jj" value="' . $jj . '" size="2" maxlength="2"' . $tab_index_attribute . ' autocomplete="off" class="form-required" /></label>';
$year = '<label><span class="screen-reader-text">' . __( 'Year' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="aa" ' ) . 'name="aa" value="' . $aa . '" size="4" maxlength="4"' . $tab_index_attribute . ' autocomplete="off" class="form-required" /></label>';
$hour = '<label><span class="screen-reader-text">' . __( 'Hour' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="hh" ' ) . 'name="hh" value="' . $hh . '" size="2" maxlength="2"' . $tab_index_attribute . ' autocomplete="off" class="form-required" /></label>';
$minute = '<label><span class="screen-reader-text">' . __( 'Minute' ) . '</span><input type="text" ' . ( $multi ? '' : 'id="mn" ' ) . 'name="mn" value="' . $mn . '" size="2" maxlength="2"' . $tab_index_attribute . ' autocomplete="off" class="form-required" /></label>';
echo '<div class="timestamp-wrap">';
/* translators: 1: Month, 2: Day, 3: Year, 4: Hour, 5: Minute. */

View File

@ -961,7 +961,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div id="nav-menu-header">
<div class="major-publishing-actions wp-clearfix">
<label class="menu-name-label" for="menu-name"><?php _e( 'Menu Name' ); ?></label>
<input name="menu-name" id="menu-name" type="text" class="menu-name regular-text menu-item-textbox" <?php echo $menu_name_val . $menu_name_aria_desc; ?> />
<input name="menu-name" id="menu-name" type="text" class="menu-name regular-text menu-item-textbox form-required" required="required" <?php echo $menu_name_val . $menu_name_aria_desc; ?> />
<div class="publishing-action">
<?php submit_button( empty( $nav_menu_selected_id ) ? __( 'Create Menu' ) : __( 'Save Menu' ), 'primary large menu-save', 'save_menu', false, array( 'id' => 'save_menu_header' ) ); ?>
</div><!-- END .publishing-action -->