WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 4 months ago

#49228 closed defect (bug) (fixed)

Widgets: Checkbox overlap on small screens

Reported by: passoniate Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.3.2
Component: Widgets Keywords: has-screenshots has-patch
Focuses: ui, accessibility, css Cc:

Description

Checkbox overlap need to margin-top

Attachments (19)

checkboxoverlap.png (22.5 KB) - added by passoniate 9 months ago.
On mobile device
Capture d’écran 2020-01-19 à 14.45.58.png (23.7 KB) - added by audrasjb 9 months ago.
49228.diff (391 bytes) - added by milindmore22 9 months ago.
Fixes overlapping checkboxes and radio buttons on Chrome Safari and Firefox Browsers on Responsive Screen
wp 5.1.png (84.6 KB) - added by afercia 9 months ago.
49228.1.diff (4.3 KB) - added by jaz_on 6 months ago.
New patch.
49228.2.diff (433 bytes) - added by SergeyBiryukov 6 months ago.
49228.2.png (11.6 KB) - added by SergeyBiryukov 6 months ago.
Befoew patch.png (16.4 KB) - added by mukesh27 6 months ago.
After patch.png (17.9 KB) - added by mukesh27 6 months ago.
49228.3.diff (1.2 KB) - added by afercia 4 months ago.
49228 fixing the wrapping labels.png (342.7 KB) - added by afercia 4 months ago.
tag-cloud-widget-taxonomy-label.png (10.4 KB) - added by sabernhardt 4 months ago.
Taxonomy label set to display:inline-block is inconsistent with Title label
49228.4.diff (837 bytes) - added by sabernhardt 4 months ago.
uses the adjacent sibling selector to target only labels immediately after the input (for checkboxes and radio buttons)
49228.5.diff (866 bytes) - added by sabernhardt 4 months ago.
another option: targeting only the labels immediately after checkboxes and radio buttons, only on smaller screens
49228.rss-widget.diff (2.5 KB) - added by sabernhardt 4 months ago.
grouping RSS widget checkboxes within one paragraph tag
49228.6.diff (3.4 KB) - added by afercia 4 months ago.
49228 inline-block and long labels.png (168.3 KB) - added by afercia 4 months ago.
1. long labels in custom widget without display: inline-block 2. with display: inline-block 3. core widget with longer label and with display: inline-block
49228.7.diff (3.5 KB) - added by sabernhardt 4 months ago.
adding .editwidget class for accessibility mode checkboxes and radio buttons
checkboxes-a11y-mode-chrome-before-and-after.jpg (70.3 KB) - added by sabernhardt 4 months ago.
Widget Accessibility mode checkboxes before and after 49228.7.diff

Download all attachments as: .zip

Change History (57)

@passoniate
9 months ago

On mobile device

#1 @audrasjb
9 months ago

  • Keywords reporter-feedback added

Hi, thanks for opening this ticket,

Could you please give some context for this issue?
Would be nice to describe the issue and where it happens (which admin screen, etc.) and on which browser.
It would also be very helpful to provide screenshots for the issue :-)

Cheers,
Jb

#2 @audrasjb
9 months ago

  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 5.3.3
  • Status changed from assigned to accepted

Thanks @passoniate I can reproduce the issue on my side.
Let's handle that in the next minor as it's a regression from 5.3.

#3 @audrasjb
9 months ago

  • Summary changed from Checkbox overlap to Widgets: Checkbox overlap on small screens

#4 @audrasjb
9 months ago

This issue occurs only on Categories and Archives widgets.
I think the easier solution is to use proper paragraph wrapper for each input line.

#5 @audrasjb
9 months ago

  • Keywords good-first-bug added

#6 @audrasjb
9 months ago

Adding good-first-bug keyword, which means that experimented contributors (= people that already contributed to a core patch) should ideally leave few days for first timers to give it a try before adding a patch.

@milindmore22
9 months ago

Fixes overlapping checkboxes and radio buttons on Chrome Safari and Firefox Browsers on Responsive Screen

#7 @milindmore22
9 months ago

  • Keywords has-patch added; needs-patch removed

#8 @audrasjb
9 months ago

  • Milestone changed from 5.3.3 to 5.4

Moving all unfixed tickets from 5.3.3 to milestone 5.4, as there is no plan for a 5.3.3 maintenance release for now.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

#10 @afercia
9 months ago

This ticket was discussed during today's accessibility bug-scrub. Noticed the checkboxes slightly overlap now on 5.3. On all previous versions a vertical spacing was missing as well, even if there was no overlap. See attached screenshot from WP 5.1.

@afercia
9 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 months ago

#12 @afercia
8 months ago

  • Keywords needs-testing added

This ticket was discussed during today's accessibility bug-scrub: the proposed patch appears to target all checkboxes and radio buttons on small screens. Needs to be reviewed carefully as this will change the margins for all these elements within paragraphs.

#13 @audrasjb
8 months ago

  • Milestone changed from 5.4 to 5.5

Hi,

Given the last comment and with 5.4 Beta 3 approaching and the Beta period reserved for bugs introduced during the cycle, this is being moved to WP 5.5.

#14 @carriganvb
7 months ago

@audrasjb I've been looking at this. It seems to me that there are two approaches on the table to solving this. @milindmore22's approach was to change the style causing the squishing of the checkboxes directly. Your suggested approach (if I'm interpreting it correctly) is to surround each row in its own <p> tag, like this:

<p>
  <input1>
  <label1>
</p>
<p>
  <input2>
  <label2>
</p>
<p>
  <input3>
  <label3>
</p>

As opposed the current layout:

<p>
  <input1>
  <label1>
  <br1>
  <input2>
  <label2>
  <br2>
</p>

Am I interpreting your suggested approach correctly? Is your approach still how you'd like to proceed, as opposed to a direct style change?

Thanks,
-Carrigan

#15 @audrasjb
6 months ago

  • Keywords needs-refresh added

@carriganvb yes, so this way, we don't have to worry about side effects on all the admin styles.

@jaz_on
6 months ago

New patch.

#16 @jaz_on
6 months ago

  • Resolution set to invalid
  • Status changed from accepted to closed

Hi, this is my first contribution : new patch proposal thanks to @audrasjb help.
Mainly adding <p> and deleting <br />.
Is there anyone who can check and give their opinion on this?
Thanks

Edit : not sure why "resolution" and "status" were set to "invalid" and "accepted to closed". I maybe made a mistake when sending my message... sorry.

Last edited 6 months ago by jaz_on (previous) (diff)

#17 @afercia
6 months ago

  • Keywords needs-refresh removed
  • Resolution invalid deleted
  • Status changed from closed to reopened

Restoring resolution and status.

#18 @SergeyBiryukov
6 months ago

Thanks for the patches!

Adding paragraphs is a good workaround, but that wouldn't fix the appearance for any custom widgets that might have the same issue.

Given that this issue doesn't happen on the Discussion Settings screen, which uses the same layout as the current Widgets screen (checkboxes and labels not wrapped in paragraphs, but with some extra margin), I think a similar approach could be used here to achieve the same effect.

See 49228.2.diff and 49228.2.png.

#19 @audrasjb
6 months ago

  • Keywords commit added; needs-testing removed

The last approach makes sense to me @SergeyBiryukov.
It works fine and it won't apply to other admin pages. Thanks.

#20 @SergeyBiryukov
6 months ago

  • Focuses css added

#21 @SergeyBiryukov
6 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 47598:

Accessibility: Widgets: Prevent checkboxes in widget control forms from overlapping on smaller screens.

Props jaz_on, milindmore22, passoniate, audrasjb, carriganvb, afercia, SergeyBiryukov.
Fixes #49228.

#22 follow-up: @mukesh27
6 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Hi @SergeyBiryukov please check the attached screenshot for the issue.

The search widget got an issue after the changes in desktop and mobile devices.

Last edited 6 months ago by mukesh27 (previous) (diff)

@mukesh27
6 months ago

#23 in reply to: ↑ 22 ; follow-ups: @SergeyBiryukov
6 months ago

Replying to mukesh27:

The search widget got an issue after the changes in desktop and mobile devices.

Thanks for catching that! I cannot reproduce the issue in current trunk though, I think it was fixed in [47593], which moved the input out of the <label> tag in that widget for consistency with others.

That said, let's see if we can also make it work with the previous markup (with the input inside the <label> tag) for any custom widgets out there.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

#25 @audrasjb
4 months ago

  • Keywords needs-patch added; good-first-bug has-patch commit removed

#26 @afercia
4 months ago

Likely, the display: inline-block; made the input shorter on mobile. Adding width: 100% for the responsive view might fix it

This ticket was mentioned in Slack in #core by ocean90. View the logs.


4 months ago

#28 in reply to: ↑ 23 @afercia
4 months ago

Replying to SergeyBiryukov:

That said, let's see if we can also make it work with the previous markup (with the input inside the <label> tag) for any custom widgets out there.

On it.

I also noticed that the CSS change from [47598] altered the vertical alignment of other labels / inputs. I think that change should be in a media query for small screens, as it was meant to fix something happening on small screens :)

See in the screenshot below. It's not about the increased vertical spacing. It's more about the vertical alignment of the checkboxes and their labels.

@afercia
4 months ago

#29 @afercia
4 months ago

  • Keywords has-patch added; needs-patch removed

49228.3.diff does two things:

  • Moves the CSS from [47598] to a (max-width: 782px) media query, as that change was meant for small screens.
  • Uses a "substring matching attribute selector" to target only the title input label and restore its display property to inline as it was before [47598]. This ensures both wrapping and non-wrapping labels allow the title input field to take all the available width.

To test this patch, you will need a widget with a wrapping label for its title input field.
Hint: for example, you can alter the Search widget HTML by using your browser's dev tools.

See screenshot

@sabernhardt
4 months ago

Taxonomy label set to display:inline-block is inconsistent with Title label

@sabernhardt
4 months ago

uses the adjacent sibling selector to target only labels immediately after the input (for checkboxes and radio buttons)

#30 @sabernhardt
4 months ago

Moving the adjustment within a media query is good. Even though I like having more space between the label and the input/select (when below the label), that would be inconsistent with the special case for the titles.

~49228.4.diff targets only labels immediately following the inputs. This should include labels for checkboxes and radio buttons and exclude any others. To make sure it only affects those two, the two types could be specified in another patch.~

Last edited 4 months ago by sabernhardt (previous) (diff)

#31 @sabernhardt
4 months ago

Ignore my patch. I forgot to test with checkboxes inside the label.

#32 @afercia
4 months ago

@sabernhardt your approach makes sense to me! If we agree the extra margin should only be set on checkboxes and radio buttons labels, I think we can target only them?

There are inconsistencies in the markup though. For example:

  • in the RSS widget, the checkboxes are wrapped within paragraphs -> extra margins
  • in the Categories widget, they aren't

These inconsistencies should be fixed to reliably set some CSS :)

Worth also mentioning multiple checkboxes and radio buttons should be wrapped in a fieldset element with a legend. This should be addressed in a separate ticket.

@sabernhardt
4 months ago

another option: targeting only the labels immediately after checkboxes and radio buttons, only on smaller screens

@sabernhardt
4 months ago

grouping RSS widget checkboxes within one paragraph tag

#33 in reply to: ↑ 23 @sabernhardt
4 months ago

That said, let's see if we can also make it work with the previous markup (with the input inside the <label> tag) for any custom widgets out there.

@afercia 49228.4.diff and now 49228.5.diff do not add margin to any labels around checkboxes that still might be in custom widgets. 49228.3.diff did that already. However, if a custom widget form has a checkbox inside the label, it's quite possible there's a text input (other than title) inside a label as well. I updated my previous patch in case the styling should exclude the other labels. 49228.5.diff would ignore labels following hidden inputs and would add the styles only on labels following their checkboxes and radio buttons on smaller screens.

49228.rss-widget.diff combines all the RSS widget checkboxes within one paragraph tag. This is separate from the styles patch because I think it would be better to leave the multiple paragraphs instead (at least for now). The widget form has a little extra space compared to other core widgets, but some custom widgets have checkboxes in separate paragraphs, too. This patch could provide value as a starting point for the fieldset markup later.

Last edited 4 months ago by sabernhardt (previous) (diff)

#34 @afercia
4 months ago

@sabernhardt thanks!

but some custom widgets have checkboxes in separate paragraphs, too

I did (quickly) check the other widgets and couldn't find other cases of multiple checkboxes each one wrapped in a paragraph. Did I miss something?

#35 @sabernhardt
4 months ago

I didn't see any other core widgets with multiple paragraphs. Plugins' custom widgets with them include "Recent Posts With Thumbnails" and a "Contact Details" widget.

@afercia
4 months ago

#36 @afercia
4 months ago

Interesting. I haven't seen a so tall widget form yet (~3000 pixels).

More interestingly, when there are very long labels the display: inline-block make them drop below the checkbox. See attached screenshot.

This can happen also on the core widgets, depending on the language and the length of the translated labels.

I'm afraid display: inline-block from the original CSS change can't be used in the first place. What about adding the margins to the checkboxes/radios themselves? See 49228.6.diff

@afercia
4 months ago

  1. long labels in custom widget without display: inline-block 2. with display: inline-block 3. core widget with longer label and with display: inline-block

@sabernhardt
4 months ago

adding .editwidget class for accessibility mode checkboxes and radio buttons

#37 @sabernhardt
4 months ago

I like the margin on the input. I finally looked at "Accessibility mode" and the margin is needed there, too.

@sabernhardt
4 months ago

Widget Accessibility mode checkboxes before and after 49228.7.diff

#38 @afercia
4 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 48389:

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.

Note: See TracTickets for help on using tickets.