Changeset 48389

Timestamp:

07/07/2020 05:27:38 PM (4 years ago)

Author:

afercia

Message:

Accessibility: Widgets: Further improve spacing between Widgets checkboxes and radio buttons in the admin interface.

Follow-up to [47598]:

• further improves the spacing after [47598] by better scoping the CSS to avoid layout glitches for custom widgets
• changes the RSS widget form to wrap the checkboxes in one single paragraph

Ideally, multiple related checkboxes and radio buttons should be grouped within a fieldset element with a legend. This will be addressed in a new Trac ticket.

Props mukesh27, SergeyBiryukov, sabernhardt.
Fixes #49228.

Location:

trunk/src

Files:

• wp-admin/css/widgets.css (modified) (2 diffs)
• wp-includes/widgets.php (modified) (1 diff)

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

@@ -47 +47 @@
     padding: 1px 15px 15px 15px;
     line-height: 1.23076923;
-}
-
-.widgets-holder-wrap .widget-inside label {
-    margin: 0.25em 0 0.5em;
-    display: inline-block;
 }
 
@@ -797 +792 @@
 -------------------------------------------------------------- */
 
+@media screen and (max-width: 782px) {
+    .widgets-holder-wrap .widget-inside input[type="checkbox"],
+    .widgets-holder-wrap .widget-inside input[type="radio"],
+    .editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */
+    .editwidget .widget-inside input[type="radio"] {
+        margin: 0.25rem 0.25rem 0.25rem 0;
+    }
+}
+
 @media screen and (max-width: 480px) {
     div.widget-liquid-left {

trunk/src/wp-includes/widgets.php

@@ -1643 +1643 @@
     ?>
     </select></p>
-<?php endif; if ( $inputs['show_summary'] ) : ?>
-    <p><input id="rss-show-summary-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_summary]" type="checkbox" value="1" <?php checked( $args['show_summary'] ); ?> />
-    <label for="rss-show-summary-<?php echo $esc_number; ?>"><?php _e( 'Display item content?' ); ?></label></p>
-<?php endif; if ( $inputs['show_author'] ) : ?>
-    <p><input id="rss-show-author-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_author]" type="checkbox" value="1" <?php checked( $args['show_author'] ); ?> />
-    <label for="rss-show-author-<?php echo $esc_number; ?>"><?php _e( 'Display item author if available?' ); ?></label></p>
-<?php endif; if ( $inputs['show_date'] ) : ?>
-    <p><input id="rss-show-date-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_date]" type="checkbox" value="1" <?php checked( $args['show_date'] ); ?>/>
-    <label for="rss-show-date-<?php echo $esc_number; ?>"><?php _e( 'Display item date?' ); ?></label></p>
+<?php endif; if ( $inputs['show_summary'] || $inputs['show_author'] || $inputs['show_date'] ) : ?>
+    <p>
+    <?php if ( $inputs['show_summary'] ) : ?>
+        <input id="rss-show-summary-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_summary]" type="checkbox" value="1" <?php checked( $args['show_summary'] ); ?> />
+        <label for="rss-show-summary-<?php echo $esc_number; ?>"><?php _e( 'Display item content?' ); ?></label><br />
+    <?php endif; if ( $inputs['show_author'] ) : ?>
+        <input id="rss-show-author-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_author]" type="checkbox" value="1" <?php checked( $args['show_author'] ); ?> />
+        <label for="rss-show-author-<?php echo $esc_number; ?>"><?php _e( 'Display item author if available?' ); ?></label><br />
+    <?php endif; if ( $inputs['show_date'] ) : ?>
+        <input id="rss-show-date-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_date]" type="checkbox" value="1" <?php checked( $args['show_date'] ); ?>/>
+        <label for="rss-show-date-<?php echo $esc_number; ?>"><?php _e( 'Display item date?' ); ?></label><br />
+    <?php endif; ?>
+    </p>
     <?php
-    endif;
+    endif; // end of display options
 foreach ( array_keys( $default_inputs ) as $input ) :
     if ( 'hidden' === $inputs[ $input ] ) :