From 2bdd712204785ed1c884139052f5da4c3e3a9463 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 7 Jul 2020 17:27:38 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@48389 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/widgets.css | 14 +++++++++-----
 src/wp-includes/widgets.php  | 24 ++++++++++++++----------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index ac5f183c89..e9775338c8 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -48,11 +48,6 @@
 	line-height: 1.23076923;
 }
 
-.widgets-holder-wrap .widget-inside label {
-	margin: 0.25em 0 0.5em;
-	display: inline-block;
-}
-
 .widget.widget-dirty .widget-control-close-wrapper {
 	display: none;
 }
@@ -796,6 +791,15 @@ ul.CodeMirror-hints {
 /* =Media Queries
 -------------------------------------------------------------- */
 
+@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 {
 		width: 100%;
diff --git a/src/wp-includes/widgets.php b/src/wp-includes/widgets.php
index 2b212d67fa..231431bada 100644
--- a/src/wp-includes/widgets.php
+++ b/src/wp-includes/widgets.php
@@ -1642,17 +1642,21 @@ function wp_widget_rss_form( $args, $inputs = null ) {
 	}
 	?>
 	</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 ] ) :
 		$id = str_replace( '_', '-', $input );