WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 25 hours ago

#48652 assigned enhancement

Twenty Twenty: Input #wp-comment-cookies-consent Checkbox in Comment Form is Too Small

Reported by: kharisblank Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: ui Cc:
PR Number:

Description

Hello Default Themes Team,

I found the checkbox labelled "Save my name, email, and website in this browser for the next time I comment." located right before the post comment button is too small. I feel it is not good. Do you feel the same? It should be a bit bigger. For comparison, see the checkbox on admin login form below:

https://i.imgur.com/x41hdmi.jpg

The one is in comment form appears like this:

https://i.imgur.com/Pu043kL.png

It appears super tiny on my iPhone (tested with Safari, Chrome and Firefox). See the screenshot below:

https://i.imgur.com/5q48G1r.png

Regards,
Kharis

Attachments (6)

2020-checkbox-jba.png (25.0 KB) - added by audrasjb 3 weeks ago.
2020 Checkbox Test audrasjb
2020-checkbox-jba-checked.png (25.2 KB) - added by audrasjb 3 weeks ago.
2020 Checkbox Test audrasjb - Checked State
2020-checkbox-jba-text-zoom-133%.png (61.5 KB) - added by audrasjb 3 weeks ago.
2020 Checkbox Test audrasjb - Checked State - Text Zoom 133%
2020-comment-form-desktop-mobile-test-patch-on-android.png (115.1 KB) - added by kharisblank 3 weeks ago.
48652.diff (2.3 KB) - added by audrasjb 2 weeks ago.
Patch for Twenty Twenty checkboxes
ae62ed8dca015f86abfd51075e221790.gif (432.8 KB) - added by audrasjb 2 weeks ago.
Also tested in RTL languages

Download all attachments as: .zip

Change History (14)

#1 @kharisblank
3 weeks ago

On Android phone it appears like this:

https://i.imgur.com/l98JL19.jpg

Should we make it a bit bigger and consistent across devices?

The image below would be my design enhancement proposal for future update:

https://i.imgur.com/OkZbg4I.jpg

This theme is awesome and I really love it. Great work all you team members! Congratulations! :)

Regards,
Kharis

#2 @audrasjb
3 weeks ago

  • Focuses accessibility removed
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to audrasjb
  • Status changed from new to assigned

@audrasjb
3 weeks ago

2020 Checkbox Test audrasjb

@audrasjb
3 weeks ago

2020 Checkbox Test audrasjb - Checked State

@audrasjb
3 weeks ago

2020 Checkbox Test audrasjb - Checked State - Text Zoom 133%

#3 follow-up: @audrasjb
3 weeks ago

  • Keywords dev-feedback added

Hi,

In screenshot above, I tested a CSS patch. Would love to get more testing on mobile devices.

Here are the CSS rules added to Twenty Twenty Theme:

input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	top: 2px;
	display: inline-block;
	margin: 0;
	width: 1.5rem;
	min-width: 1.5rem;
	height: 1.5rem;
	background: #fff;
	border-radius: 0;
	border-style: solid;
	border-width: 0.1rem;
	border-color: #dcd7ca;
	box-shadow: none;
	cursor: pointer;
}

input[type="checkbox"]:checked::before {
	/* Use the "Yes" SVG Dashicon */
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E");
	position: absolute;
	display: inline-block;
	margin: -0.1875rem 0 0 -0.25rem;
	height: 1.75rem;
	width: 1.75rem;
}

Cheers,
Jb

#4 in reply to: ↑ 3 @kharisblank
3 weeks ago

Replying to audrasjb:

I tested it and it looks perfect on my iPhone. Great work @audrasjb!

https://i.imgur.com/hIEhRKf.png

I also made a test on my Android phone and the new checkbox design looks consistent. See the following attachement.

Best,
Kharis

Last edited 3 weeks ago by kharisblank (previous) (diff)

@audrasjb
2 weeks ago

Patch for Twenty Twenty checkboxes

@audrasjb
2 weeks ago

Also tested in RTL languages

#5 @audrasjb
2 weeks ago

  • Keywords has-patch added; needs-patch dev-feedback removed

Many thanks @kharisblank for your tests!
I also tested the patch on RTL laguages. Works well.

I created 48652.diff which is my patch proposal for this ticket.
Would be great to get a review from @anlino or @ianbelanger to confirm the patch is ready to be committed.

Cheers,
Jb

#6 @kharisblank
2 weeks ago

You're welcome @audrasjb! Great works! :)

Regards,
Kharis

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


2 days ago

#8 @audrasjb
25 hours ago

@ianbelanger are you ok with the changes in 48652.diff?
I think we are good to go, but would be great to get a quick review :-)

Thanks!
Jb

Note: See TracTickets for help on using tickets.