WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 months ago

#48652 closed enhancement (fixed)

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

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

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 4 months ago.
2020 Checkbox Test audrasjb
2020-checkbox-jba-checked.png (25.2 KB) - added by audrasjb 4 months ago.
2020 Checkbox Test audrasjb - Checked State
2020-checkbox-jba-text-zoom-133%.png (61.5 KB) - added by audrasjb 4 months 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 4 months ago.
48652.diff (2.3 KB) - added by audrasjb 4 months ago.
Patch for Twenty Twenty checkboxes
ae62ed8dca015f86abfd51075e221790.gif (432.8 KB) - added by audrasjb 4 months ago.
Also tested in RTL languages

Download all attachments as: .zip

Change History (17)

#1 @kharisblank
5 months 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
5 months 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
4 months ago

2020 Checkbox Test audrasjb

@audrasjb
4 months ago

2020 Checkbox Test audrasjb - Checked State

@audrasjb
4 months ago

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

#3 follow-up: @audrasjb
4 months 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
4 months 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 4 months ago by kharisblank (previous) (diff)

@audrasjb
4 months ago

Patch for Twenty Twenty checkboxes

@audrasjb
4 months ago

Also tested in RTL languages

#5 @audrasjb
4 months 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
4 months ago

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

Regards,
Kharis

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


4 months ago

#8 @audrasjb
4 months 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

#9 @ianbelanger
4 months ago

  • Keywords commit added
  • Owner changed from audrasjb to ianbelanger

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

#10 @ianbelanger
4 months ago

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

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.

#11 @SergeyBiryukov
4 months ago

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.

Note: See TracTickets for help on using tickets.