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

[kharisblank]

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:

The one is in comment form appears like this:

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

Regards,
Kharis

[kharisblank]

On Android phone it appears like this:

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

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

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

Regards,
Kharis

[audrasjb]

2020 Checkbox Test audrasjb

[audrasjb]

2020 Checkbox Test audrasjb - Checked State

[audrasjb]

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

[audrasjb]

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

[kharisblank]

Replying to audrasjb:

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

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

Best,
Kharis

[audrasjb]

Patch for Twenty Twenty checkboxes

[audrasjb]

Also tested in RTL languages

[audrasjb]

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

[kharisblank]

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

Regards,
Kharis

[audrasjb]

@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

[ianbelanger]

The patch looks and works great @audrasjb. Marking for commit

[ianbelanger]

In 46844:

Bundled Themes: Make checkbox in comment form larger Twenty Twenty.

This makes the checkbox in the comment form larger and more consistent with other checkboxes.

Props kharisblank, audrasjb.
Fixes #48652.

[SergeyBiryukov]

In 46847:

Twenty Twenty: Make checkbox in comment form larger.

This makes the checkbox in the comment form larger and more consistent with other checkboxes.

Props kharisblank, audrasjb, ianbelanger.
Merges [46844] to the 5.3 branch.
Fixes #48652.