Changeset 49283

Timestamp:

10/23/2020 03:03:37 PM (4 years ago)

Author:

helen

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/forms.css (modified) (1 diff)
• includes/nav-menu.php (modified) (1 diff)
• includes/template.php (modified) (2 diffs)
• nav-menus.php (modified) (1 diff)

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

@@ -239 +239 @@
 }
 
-.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);

trunk/src/wp-admin/includes/nav-menu.php

@@ -300 +300 @@
         <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>
 

trunk/src/wp-admin/includes/template.php

@@ -814 +814 @@
     $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 );
@@ -824 +824 @@
     $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">';

trunk/src/wp-admin/nav-menus.php

@@ -962 +962 @@
                         <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' ) ); ?>